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

发布于 2024-10-30 20:03:05 字数 1559 浏览 0 评论 0原文

我正在构建一个 JavaScript 模块来向 HTML5 canvas 元素添加便利功能。我试图提供尽可能多的不同实现来填写我的模块。要查看我的进度，请访问我的项目页面和我的示例页面。

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

近似圆时误差范围是否有差异？椭圆形？
有什么理由同时采用这两种实现吗？（性能、准确性等）
我是否缺少任何其他绘制椭圆的方法？

PS 这没有直接关系，但是在这样的模块中是否还有其他功能会更好？

注意：这不是家庭作业。

编辑：这是我的椭圆代码（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);
}

相关问题：

将二次贝塞尔曲线转换为三次曲线？

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

原文

I am building a JavaScript module to add convenience functions to the HTML5 canvas element. I am trying to give as many different implementations as possible to fill out my module. To see my progress, please visit my project page and my examples page.

I have an ellipse drawing method that uses cubic bezier curves. I know that quadratic bezier curves can be converted to cubic bezier curves, but I have some questions:

Is there any difference in margin for error when approximating a circle? An ellipse?
Is there any reason to have both implementations? (performance, accuracy, etc)
Am I missing any other methods for drawing ellipses?

P.S. This isn't directly related, but are there any other functions that would be nice to have in such a module?

Note: This is not a homework assignment.

EDIT: Here is my code for an ellipse (xDis is radius in x, yDis is radius in 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);
}