如何将二次曲线切成两半？答案

【问题标题】：How do you cut a quadratic curve in half?如何将二次曲线切成两半？
【发布时间】：2012-04-27 00:25:58
【问题描述】：

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

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

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

我一直在搞乱起点和第一个控制点，但不知道如何准确拼接曲线。

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

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

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

【问题讨论】：

你能生成你想要的图像吗？
@GabrielSantos -- 我想要一些与我发布的示例非常接近的东西，但该示例并不完美。刚刚发布了更新

标签： javascript canvas quadratic-curve

【解决方案1】：

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

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

注意：1 我对这种方法的参考来自这个问题的答案中的第二个链接。 How to best approximate a geometrical arc with a Bezier curve?

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

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

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

【讨论】：

【解决方案2】：

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

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();

看起来不错。

【讨论】：