坐标转换成SVG的path路径

Posted 2022-05-31 liyanyan665

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;