坐标转换成SVG的path路径

标签：默认   函数   tps   ret   cti   参数   路径   转换   net   

function svgPathCurv(a,b,curv) {
/*
* 弯曲函数.
* a:a点的坐标{x:10,y:10}
* b:b点的坐标{x:10,y:20}
* curv:弯曲程度 取值 -5 到 5
*/
curv = curv ? curv : 0;
var s, k2, controX, controY, q, l, path = ‘‘;
var s = ‘M‘ + a.x + ‘,‘ + a.y + ‘ ‘;

/*
* 控制点必须在line的中垂线上
* **求出k2的中垂线(中垂线公式)**
*/
var x1=a.x;x2=b.x;y1=a.y;y2=b.y;
k2 = -(x2 - x1) / (y2 - y1);
/*
* 弯曲程度是根据中垂线斜率决定固定控制点的X坐标或者Y坐标,通过中垂线公式求出另一个坐标
* 默认A/B中点的坐标+curv*30,可以通过改基数30改变传入的参数范围
*/
if(k2 < 2 && k2 > -2) {
controX = (https://www.qqtn.com/wm/nanshengwm_3.html) / 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;
}
//定义控制点的位置
q = ‘Q‘ + controX + ‘,‘ + controY + ‘ ‘;
//l=lineto
l = x2 + ‘,‘ + y2 + ‘ ‘;
//结果例: M10,10Q35,15,10,20
path = s + q + l;
return path;
}

坐标转换成SVG的path路径

标签：默认   函数   tps   ret   cti   参数   路径   转换   net   

原文地址：https://www.cnblogs.com/liyanyan665/p/11278075.html