坐标转换成SVG的path路径

大家好，我是一个刚入职的前端小白，入职后一直做关于svg 的东西，我将自以为很方便的方法提供给大家。

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 = (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;
        }
        //定义控制点的位置
        q = 'Q' + controX + ',' + controY + ' ';
        //l=lineto
        l = x2 + ',' + y2 + ' ';
        //结果例: M10,10Q35,15,10,20 
        path = s + q + l;
        return path;
    }

本文地址：https://blog.csdn.net/qq_40793132/article/details/85987107

坐标转换成SVG的path路径

相关推荐