绘制均匀的二次曲线

-1

我正在试图制作一个项目，用户可以在画布中绘制箭头，而且我需要一条曲线。绘制均匀的二次曲线

你知道一个二次曲线是通过这样的事情表示： 中号65 *** 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。

来源

2016-09-30 Razvan Cuceu

你检查了[Fabric.js - 二次曲线演示]（http://fabricjs.com/quadratic-curve）吗？ –

你怎样才能从两点做曲线？ –

@RoryMcCrossan我100％确定你可以，例如你可以从它们做一个等腰三角形，并且三角形的高度是底边的一半。我知道如何，但我不能把它们放在一个公式中。 –

首先开始与两个端点

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

要获得中点

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

您需要矢量从第一到第二点的

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

线在从起点和终点90deg（顺时针或右侧）是

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

线条与两点之间的距离相同。二次曲线将延伸出控制点距线的一半距离。因此，如果我们想的曲线1/4由出长度的一半，然后在p载体，如果你想曲线弯曲的其他方式

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

添加到中点

cx = mx + px/2; // get control point 
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更大更多的曲线，更小的少。根本没有曲线，而负向曲线就是另一种方式。

来源

2016-10-01 20:49:32 Blindman67

绘制均匀的二次曲线

回答

相关问题