在线商城网站怎么做,企业系统包括哪些系统,网站开发用什么技术asp,潍坊大型网站建设Snap.svg对原生的svg进行了封装#xff0c;为svg的创建、操作提供了便捷的方法#xff0c;但是官网的文档对一些概念没有解释#xff0c;难免会造成困扰。比如说路径的旋转#xff0c;就存在变换后得不到路径交点的问题。
用普通的变换得不到路径的相交点
Snap.svg提供了…Snap.svg对原生的svg进行了封装为svg的创建、操作提供了便捷的方法但是官网的文档对一些概念没有解释难免会造成困扰。比如说路径的旋转就存在变换后得不到路径交点的问题。
用普通的变换得不到路径的相交点
Snap.svg提供了
Matrix.rotate(angle) 方法将变换矩阵旋转一定角度。和Matrix.toTransformString()方法可以将变换矩阵转成变换字符串Element.transform(transformString)方法将变换应用到元素
变换矩阵涉及到图形学的内容可参看3D计算机图形学原书第三版 第一章。
很直接的我们会想到用这三个函数来实现变换
let myElem Snap(.myElem);
let angle 45 , matrix new Snap.Matrix();
matrix.rotate(angle); //变换矩阵旋转45度
myElem.transform(matrix); //将变换应用到元素
这样确实是可以实现效果的demo1。但是这种变换不改变元素的定义如果用在路径上将造成路径的计算错误。比如一条路径00400400经过上面的变换后其定义还是00400400那么此时计算它和其它路径的相交点就会出错。
你可以打开demo1然后打开console,运行
Snap.path.intersection($lineA,$lineL2)
查看斜线和第二条平行线的交点可以看到在拖动lineA过程中相交点是不变的。
使用map将变换映射到路径
上面那种变换方法用在普通元素上是没问题的但是用在路径上就会造成计算问题。其实Snap.svg也提供了Snap.path.map(pathString,transformString)方法这个方法可以将变换转成路径的定义放回新的路径定义字符串。所以我们可以这么用
let myElem Snap(.myElem);
let angle 45 , matrix new Snap.Matrix();
matrix.rotate(angle); //变换矩阵旋转45度
let transformString Snap.path.map($lineA,m);
$lineA.attr(d,transformString);
看demo2再运行上面的测试可以用到相交点是动态变化的。
另外交点的值和路径的宽度是有关系可以改变demo中路径的宽度试试。
