我有一些理论问题。 可以说我在svg中有2条路径。每个都有不同的点数。一个有4个Bézier曲线,另外有3个。
我想做的是将一个变为另一个。 现在,我知道他们必须具有相同的结构和相同数量的点才能这样做。
所以,问题是,我可以在其路径中添加“虚拟点”以获得相同的结构和点数,而不会改变对象的形状吗?
例如,在其中一条路径中取一个点,然后在其后添加相同的点以增加点数。或者在两条路径中创建Bézier曲线,实际上假装是一条线而不是一条曲线。那会改变对象吗?如果我在x = 1 y = 1且x = 4 y = 4时有点,那么使用这个形式会使Bézier曲线成一条线吗? (M1 1C1 1 4 4 4 4)
答案 0 :(得分:1)
想出来。在coordiantes的同一行上的任何位置使用控制点将Bézier转换为直线,如果您使用与控制点相同的点,开始和结束坐标,您可以将曲线转换为点。在路径中添加更多这些点不会改变对象的外观,只需在路径中添加更多数据。
http://www.petercollingridge.co.uk/book/export/html/560
在三次曲线处向下,您可以按照描述的方式对齐点以获得所需的结果
答案 1 :(得分:1)
我有一个简单易用的d3插件来动画svg路径,它支持不同数量的点,同时它只动画路径中与原始路径不同的部分,而不是整个路径。 7kb缩小:https://pratyushcrd.github.io/d3-path-morphing/