使用javascript或d3.js在形状之间转换

Question

我正在尝试编写一个程序，该程序介于两个使用javascript在Adobe Illustrator中创建的形状之间。我能够通过将形状导出为SVG然后使用Raphael.js来实现这一目的：

http://jsfiddle.net/ZLfkZ/4/

然而，两种形状之间的插值看起来很糟糕。我从researching this topic得知，最好使用使用b样条曲线的算法进行插值，并在适当的位置加上或减去顶点，我假设Raphael使用的SVG标准不是做。我想知道是否有可能用d3.js实现这一点，因为我注意到它的SVG文档中有插值选项，而“基础”似乎使用了b-spline。可以通过适当的插值在d3中完成我的jsfiddle吗？

或者，有没有更好的方法来解决这个问题？我可能使用SVG走错了路，因为无论如何，生成的路径都将在画布中呈现。我最初选择SVG是因为路径很容易存储为字符串。我注意到有Illustrator to canvas plugin导出画布命令，是否可以插入那些？我是否应该以某种方式从插画家那里捕捉形状？任何见解都将不胜感激！

Answer 1

我不知道在JavaScript中有一个很好的现成解决方案;在您链接的论文中实现算法看起来相当耗时（虽然很有趣！）。根据您尝试插入的特定形状，您可以使用更简单的解决方案。

通常，您需要重新采样源或目标形状（或两者），以便它们具有相同数量的控制点。重新采样形状后，可以使用标准线性插值，例如d3.interpolate。

重采样的一种方法是测量源形状中每个控制点沿其圆周的距离，然后以等效（缩放）距离重新采样目标形状。以下是加利福尼亚与圈子之间插值的这种技术演示：

• http://bl.ocks.org/3081153

线性插值具有自相交的趋势，但对于大多数凸形状，它工作得相当好并且速度很快。

Answer 2

使用superformular插件有一个新的解决方案：http://bl.ocks.org/mbostock/1020902