svg路径:贝塞尔曲线的交互式编辑

lh80um4z  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(243)

我希望做的事情的例子:


我一直在寻找一个工具来操纵加载的svg路径和多边形,因为我可以使用snap.svg free transform来调整大小和旋转。
除了paper.js之外,我找不到一个库,它允许我对bezier曲线进行交互式编辑,但是我根本不想使用画布,只想使用svg,而且我找不到svg元素的任何内容。
我仍然非常困惑,因为我通过codepen和github所能找到的只是演示,其中svg对象是内联html,javascript的目标是未动态添加的内联html。
我知道我可能可以使用vector.js、snap.svg或svg.js等库。但是,在阅读api时,我知道svggeometryelement有一个方法getpointatlength(),它返回路径上给定距离处的点。
我的第一个问题是,是否有一个js库允许我对bezier曲线的填充和笔划进行交互式编辑?如果是的话,在哪里有一个演示来帮助我理解如何使用它?如果不是基于我想做的,即只使用svg,那么3个库中的哪一个是最好的,为什么?

ktca8awb

ktca8awb1#

这个 getPointAtLength() 方法对您的需要没有用处。您需要能够访问路径命令及其参数的列表。但是 getPointAtLength() 不是吗。
svg有一个用于访问路径段的旧api。然而,这是不赞成现在,因为它有点丑陋和难以使用。我不确定哪种浏览器(如果有的话)仍然支持它。
在新的svg路径模块中还提出了一个新的api。
我不知道哪些浏览器删除了旧的api,哪些浏览器实现了新的api。你需要检查一下。
如果您想要向后兼容,philip rogers已经为旧api创建了一个polyfill库。
如果您不顾一切,可以使用其他库来解析路径定义。例如:https://www.npmjs.com/package/svg-path-segments. 请注意,这不是一项建议。我没有用过那个图书馆。

相关问题