绘制均匀的二次曲线

Question

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

如您所知，一条二次曲线由以下内容表示： 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.

Answer 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更大，更多曲线，更小更少。零曲线完全没有曲线而负曲线则反其道而行。