Javascript 绘制均匀二次曲线

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

正如您所知，一条二次曲线由以下内容表示： m65100q30010030020

其中前两个数字（65100）表示起点坐标，后两个数字（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。

首先从两个端点开始

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

达到中点

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

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

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

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

从起点和终点到90度（顺时针或右侧）的直线为

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

这条线的长度与两点之间的距离相同。二次曲线将延伸出控制点与直线距离的一半。所以如果我们想让曲线的长度为1/4，那么就把p向量的一半加到中点

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

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

如果希望曲线向另一方向弯曲

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

或者，您可以将曲线量作为变量写入

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

越大，曲线越多，曲线越小。零表示完全没有曲线，负表示反向弯曲。

你检查过吗？你怎么能只从两个点做曲线？@Rorymcrossan我百分之百确定你可以，例如，你可以从它们做一个等腰三角形，三角形的高度是基边的一半。我知道怎么做，但我不能把它们放在公式里；你需要第三点。如果要使用等参线创建该等参线，请计算连接两个端点的线段的中点。提供“均匀”曲线的二次曲线控制点将位于与该中点处的线段垂直的方向上。在垂直线上走得越远，得到的曲线就越多。您的设计要求决定了可接受的“弯曲度”。