繪製均勻的二次曲線

-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

繪製均勻的二次曲線

回答

相關問題