svg中給出兩點(diǎn)的坐標(biāo)得到連接兩點(diǎn)的曲線路徑.
中心思想:求出兩點(diǎn)連線的中垂線公式,給定AB某一點(diǎn)的X或Y坐標(biāo),求出中垂線上的另一個(gè)坐標(biāo)
在svg中,我們畫曲線的時(shí)候需要知道曲線的生成公式-----貝塞爾曲線.
線性貝塞爾曲線演示動(dòng)畫，t在[0,1]區(qū)間
二次貝塞爾曲線演示動(dòng)畫高职，t在[0,1]區(qū)間
三次貝塞爾曲線演示動(dòng)畫父款，t在[0,1]區(qū)間
四次貝塞爾曲線演示動(dòng)畫鸿捧，t在[0,1]區(qū)間
五次貝塞爾曲線演示動(dòng)畫，t在[0,1]區(qū)間
根據(jù)圖像,我們可以輕易的知道貝塞爾曲線的原理,他是由 起點(diǎn)-控制點(diǎn)-控制點(diǎn)-...-終點(diǎn) 之間的連線,從之中再取相領(lǐng)兩根線的某一個(gè)點(diǎn)連線,取其中點(diǎn)繪制出來(lái)的曲線.
當(dāng)然我們現(xiàn)在只是想隨意的畫出一條看的過(guò)去的曲線,所以我們的目標(biāo)是得到一個(gè)控制點(diǎn)
連線
從上圖我們可以看出來(lái)控制點(diǎn)2(綠色)畫出來(lái)的線是比較好看的.而這種線不偏向某一邊的線的控制點(diǎn)都是在這兩個(gè)點(diǎn)連線的中垂線上的
中垂線
所以我們的重心落到了求出兩點(diǎn)的中垂線上.
下面的問(wèn)題就比較簡(jiǎn)單了
中垂線公式
function svgPathCurv(a,b,curv) {
/*
* 彎曲函數(shù).
* a:a點(diǎn)的坐標(biāo){x:10,y:10}
* b:b點(diǎn)的坐標(biāo){x:10,y:20}
* curv:彎曲程度 取值 -5 到 5
*/
curv = curv ? curv : 0;
var x1, x2, y1, y2, s, k2, controX, controY, q, l, path = '';
var s = 'M' + a.x + ',' + a.y + ' ';
/*
* 控制點(diǎn)必須在line的中垂線上
* **求出k2的中垂線(中垂線公式)**
*/
k2 = -(x2 - x1) / (y2 - y1);
/*
* 彎曲程度是根據(jù)中垂線斜率決定固定控制點(diǎn)的X坐標(biāo)或者Y坐標(biāo),通過(guò)中垂線公式求出另一個(gè)坐標(biāo)
* 默認(rèn)A/B中點(diǎn)的坐標(biāo)+curv*30,可以通過(guò)改基數(shù)30改變傳入的參數(shù)范圍
*/
if(k2 < 2 && k2 > -2) {
controX = (x2 + x1) / 2 + curv * 30;
controX = controX < 0 ? -controX : controX;
controY = k2 * (controX - (x1 + x2) / 2) + (y1 + y2) / 2;
controY = controY < 0 ? -controY : controY;
} else {
controY = (y2 + y1) / 2 + curv * 30;
controY = controY < 0 ? -controY : controY;
controX = (controY - (y1 + y2) / 2) / k2 + (x1 + x2) / 2;
controX = controX < 0 ? -controX : controX;
}
//定義控制點(diǎn)的位置
q = 'Q' + controX + ',' + controY + ' ';
//l=lineto
l = x2 + ',' + y2 + ' ';
//結(jié)果例: M10,10Q35,15,10,20
path = s + q + l;
return path;
}
