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(

Snap.svg库在SVG路径变换时可能导致相交点计算错误。通过使用`transform`、`matrix`和`toString`方法无法正确处理路径变换。文章介绍了如何利用`map`方法将变换映射到路径上,从而动态更新路径定义,确保相交点计算的准确性。附带的示例代码展示了这种方法的效果。
最低0.47元/天 解锁文章
1328

被折叠的 条评论
为什么被折叠?



