用二次贝塞尔曲线和三次贝塞尔曲线绘制椭圆
Drawing ellipses with quadratic bezier curves and cubic bezier curves
我正在构建一个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样条类似于贝塞尔曲线,但可以沿着多个控制点继续。
如果它是一个普通的椭圆,如果它有一个非规范的方向,那么绘制椭圆的标准参数形式并通过旋转变换得到结果不是更容易吗?
相关文章:
- 画布:制作贝塞尔曲线绘制动画
- 在谷歌地理图中绘制两点之间的曲线
- 在新框架上绘制图像,同时仍然使用P5.js中的利萨茹曲线
- 在滚动上绘制一条曲线虚线 SVG
- 绘制具有 JS 中平均值和标准偏差的正态分布曲线
- 在 WebGL 中的曲面上绘制曲线
- 绘制正态分布曲线,左下角区域在 javascript 中带有阴影
- 如何使用 svg 循环绘制贝塞尔曲线
- 用createjs绘制一个虚线曲线
- HTML5 画布:加载时绘制的贝塞尔曲线
- 在HTML5画布上慢慢绘制二次曲线
- 在HTML5画布上复制曲线时未绘制点
- 如何使用javascript HTML5画布绘制通过N个点的曲线
- 如何使用CSS和JavaScript绘制正态分布曲线(Bell曲线)
- 如何绘制曲线svg路径
- 如何在画布上绘制文本,该文本遵循使用二次曲线方法绘制的二次曲线
- 如何在HTML画布上绘制具有可变厚度的贝塞尔曲线
- 如何使用bezierCurveTo动态绘制曲线
- 如何在Javascript中绘制3d blezier曲线?(three.js, webGL)
- 用二次贝塞尔曲线和三次贝塞尔曲线绘制椭圆