坐标转换成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;
    }
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值