用二次贝塞尔曲线和三次贝塞尔曲线绘制椭圆

Drawing ellipses with quadratic bezier curves and cubic bezier curves

本文关键字:曲线 绘制 三次 二次      更新时间:2023-09-26

我正在构建一个JavaScript模块,为HTML5 canvas元素添加方便函数。我试图给尽可能多的不同的实现来填写我的模块。要查看我的进度,请访问我的项目页面和示例页面。

我有一个椭圆绘制方法,使用三次贝塞尔曲线。我知道二次贝塞尔曲线可以转换为三次贝塞尔曲线,但我有一些问题:

  • 在近似圆时,误差范围有什么不同吗?一个椭圆?
  • 有什么理由有两个实现?(性能、精度等)
  • 我是否缺少任何其他绘制椭圆的方法?

注:这不是直接相关的,但是在这样的模块中有任何其他函数会很好吗?

注意:这是而不是的家庭作业。

编辑:这是我的椭圆代码(xDis是x的半径,yDis是y的半径):

function ellipse(x, y, xDis, yDis) {
    var kappa = 0.5522848, // 4 * ((√(2) - 1) / 3)
        ox = xDis * kappa,  // control point offset horizontal
        oy = yDis * kappa,  // control point offset vertical
        xe = x + xDis,      // x-end
        ye = y + yDis;      // y-end
    this.moveTo(x - xDis, y);
    this.bezierCurveTo(x - xDis, y - oy, x - ox, y - yDis, x, y - yDis);
    this.bezierCurveTo(x + ox, y - yDis, xe, y - oy, xe, y);
    this.bezierCurveTo(xe, y + oy, x + ox, ye, x, ye);
    this.bezierCurveTo(x - ox, ye, x - xDis, y + oy, x - xDis, y);
}

相关问题:

将二次bezier转换为三次?

https://stackoverflow.com/questions/2688808/drawing-quadratic-bezier-circles-with-a-given-radius-how-to-determine-control-po

三次贝塞尔曲线比二次次贝塞尔曲线多两个自由度。因此,它可以进一步减少误差。尽管选择控制点的数学方法随着曲线的高度而变得越来越复杂,但三次曲线应该足够简单。

性能差异不大。更多的乘法和加法。

虽然这可以通过旋转平面来实现,但如果能够指定椭圆的轴就更好了。一个中心和两个轴组成椭圆center + cos(t)*axis1 + sin(t)*axis2

库的另一个特点是可以有不同种类的多项式曲线和样条。b样条类似于贝塞尔曲线,但可以沿着多个控制点继续。

如果它是一个普通的椭圆,如果它有一个非规范的方向,那么绘制椭圆的标准参数形式并通过旋转变换得到结果不是更容易吗?