绘制均匀的二次曲线答案

【问题标题】：Draw uniform quadratic curve绘制均匀的二次曲线
【发布时间】：2017-02-09 02:42:52
【问题描述】：

我正在尝试制作一个项目，用户可以在画布上绘制箭头，我需要一条曲线。

如您所知，一条二次曲线可以这样表示： M 65 100 Q 300、100、300、20

其中前两个数字（65, 100）代表起点坐标，后两个数字（300,20）代表终点坐标（箭头末端）。我需要根据第一个点和第二个点计算中间两个数字，做出一条好看的曲线。

第一个点的坐标来自mousedown，第二个点的坐标来自mouseup。

现在我是这样使用的。

function addCurve(Ax, Ay, Bx, By){
canvas.add(new fabric.Path('M '+ Ax +' '+ Ay +' Q 100, 100, '+ Bx +', '+ By +'', { fill: '', stroke: 'red' }));
}
addCurve(100,0,200,0);

那么，如何计算中点坐标才能得到一条均匀的曲线呢？我也在这个项目中使用了 fabric.js。

【问题讨论】：

你检查过Fabric.js — Quadratic Curve Demo吗？
如何仅从两点绘制曲线？
@RoryMcCrossan 我 100% 确定你可以，例如你可以用它们制作一个等腰三角形，并且三角形的高度是底边的一半。我知道怎么做，但我不能把它们放在一个公式中。
这就是我的意思；你需要第三点。如果您使用等腰线来创建它，那么足够公平
计算连接两个端点的线段的中点。为您提供“均匀”曲线的二次曲线控制点将垂直于该中点处的线段。你在垂直线上走得越远，你得到的曲线就越多。您的设计要求决定了可接受的“曲线”。

标签： javascript jquery html5-canvas fabricjs

【解决方案1】：

先从两个端点开始

x1 = ?   // start point
y1 = ?
x2 = ?   // end point
y2 = ?

求中点

mx = (x1 + x2) / 2;
my = (y1 + y2) / 2;

你需要从第一个点到第二个点的向量

vx = x2 - x1;
vy = y2 - y1;

与起点和终点成 90 度（顺时针或向右）的直线是

px = -vy;  // perpendicular
py = vx;

线的长度与两点之间的距离相同。二次曲线将延伸到控制点到直线距离的一半。因此，如果我们希望曲线的长度为 1/4，则为 p 向量的一半并添加到中点

cx = mx  + px / 2; // get control point
cy = my  + py / 2;

如果你想让曲线向另一个方向弯曲

cx = my - px / 2;
cy = my - py / 2;

或者你可以把曲线量写成var

var curveAmount = 0.25; // How far out the curve is compared to the line length

cx = my - px * (curveAmount * 2);
cy = my - py * (curveAmount * 2);

使curveAmount 更大以获得更多曲线，更小则更少。零表示完全没有曲线，负数表示向其他方向弯曲。

【讨论】：