Sai*_*ato 3 javascript svg canvas adobe-illustrator d3.js
我正在尝试编写一个程序,使用javascript在Adobe Illustrator中创建的两个形状之间切换.我可以通过将形状导出为SVG然后使用Raphael.js来实现此目的:
但是,两个形状之间的插值看起来很糟糕.我从研究 这个主题中学到,最好使用使用b样条曲线的算法进行插值,并在适当的位置加上或减去顶点,我假设Raphael使用的SVG标准没有.我想知道是否有可能用d3.js实现这一点,因为我注意到它的SVG文档中有插值选项,而"基础"似乎使用了b-spline.我的jsfiddle可以在d3中通过适当的插值完成吗？
或者,有没有更好的方法来解决这个问题？我可能使用SVG走错了路,因为无论如何,生成的路径都将在画布中呈现.我最初选择SVG是因为路径很容易存储为字符串.我注意到有一个Illustrator to canvas插件导出canvas命令,是否可以插入那些？我是否应该以某种方式从插画家那里捕捉形状？任何见解将不胜感激!
我不知道在JavaScript中有一个很好的现成解决方案; 在您链接的论文中实现算法看起来相当耗时(虽然很有趣!).根据您尝试插入的特定形状,您可以使用更简单的解决方案.
通常,您需要重新采样源或目标形状(或两者),以便它们具有相同数量的控制点.重新采样形状后,可以使用标准线性插值,例如d3.interpolate.
重采样的一种方法是测量源形状中每个控制点沿其圆周的距离,然后以等效(缩放)距离重新采样目标形状.以下是在加利福尼亚和圆圈之间插值的这种技术演示:
线性插值具有自相交的趋势,但对于大多数凸形状,它工作得相当好并且快速.
| 归档时间： |
|
| 查看次数： |
1646 次 |
| 最近记录： |