坐标转换成SVG的path路径
程序员文章站
2022-04-09 10:57:45
大家好,我是一个刚入职的前端小白,入职后一直做关于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......
大家好,我是一个刚入职的前端小白,入职后一直做关于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
推荐阅读
-
html5中如何将图片的绝对路径转换成文件对象
-
Linux系统下修改环境变量PATH路径的三种方法
-
php中的路径问题与set_include_path使用介绍
-
AI怎么把文字转换成路径?ai字体转换路的详细教程
-
C#中使用Path、Directory、Split、Substring实现对文件路径和文件名的常用操作实例
-
Linux系统下修改环境变量PATH路径的三种方法
-
php中的路径问题与set_include_path使用介绍
-
【每日一道算法题】Leetcode之longest-increasing-path-in-a-matrix矩阵中的最长递增路径问题 Java dfs+记忆化
-
使用CSS3的clip-path(裁剪路径)实现剪贴区域的显示以及实例实现图片渐变
-
android实现Uri获取真实路径转换成File的方法