0

我正在尝试绘制现有二次曲线的一半，但我不确定如何调整控制点来这样做：

http://jsfiddle.net/s6sB8/3/

您将看到画布中绘制的圆角矩形的上半部分，以及带有顶部 CSS 边框的框。我想要做的是用画布重现 css 绘制的框，换句话说，将角落切成两半。

我一直在弄乱起点和第一个控制点，但无法弄清楚如何准确拼接曲线。

我知道画布不会完全匹配 CSS，这很好，我不想让它达到。我试图在完全不扭曲其形状的情况下准确地绘制出一半的曲线。我对这背后的数学比这个具体例子的解决方案更感兴趣

更新示例：http: //jsfiddle.net/s6sB8/4/

您可以看到，虽然很接近，但我尝试绘制的曲线与原始曲线不太匹配...

4

2 回答 2

1

作为我的项目http://canvimation.github.com/的一部分，我需要能够绘制圆角矩形。

我使用贝塞尔曲线来近似四分之一圆而不是二次曲线来绘制角。我根据我的代码http://jsfiddle.net/kCd7b/创建了一个小提琴来绘制圆角矩形。在函数 rounded_rectangle 中，left、top、width 和 height 是边界矩形的参数，radius 是角弧的半径。我认为该函数可以更改为使用弧线或二次曲线

注意：1 我对这种方法的参考来自这个问题的答案中的第二个链接。 如何用贝塞尔曲线最好地逼近几何弧？

注意 2：我的方法首先绘制水平顶线并绘制完整曲线。如果你想从曲线中间开始画曲线的一半，那么你需要阅读http://www.iancgbell.clara.net/maths/bezier.htm

注意 3：我使用 Bezier 曲线而不是圆弧，因为它使绘图和转换函数更容易编写，因为它们只需要考虑 lineTo 和 bezierCurveTo 我正在绘制的任何形状。

注 3：我的项目的源代码位于https://github.com/canvimation/canvimation.github.com

于 2012-04-28T12:21:40.067 回答
0

我不是很擅长这个，所以，只是一个建议。

Mozilla 的一个很好的例子： https ://developer.mozilla.org/samples/canvas-tutorial/2_5_canvas_quadraticcurveto.html

来自 wiki 的二次函数： http ://en.wikipedia.org/wiki/Quadratic_curve

看了上面的链接，我们知道这current position是起点，control point是永远无法到达但越来越近的点，我们需要一个终点。当我们拥有它们时，我们得到了一条曲线。

在您的问题中，我们像这样“调整control point”：

      ctx.moveTo          ( 15, 11 );
      ctx.quadraticCurveTo( 16, 10, 20, 10 );
      ctx.lineTo          ( 95, 10 );

      ctx.moveTo          ( 100, 11);
      ctx.quadraticCurveTo( 99, 10, 95, 10 );

      ctx.lineWidth = 10;
      ctx.stroke();

看起来不错。

于 2012-04-27T01:31:31.120 回答