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

Question

我正在尝试编写一个程序，使用 JavaScript 在 Adob​​e Illustrator 中创建的两个形状之间切换。我能够通过将形状导出为 SVG 然后使用 Raphael.js 来完成此操作:

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

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

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

Answer 1

我不知道在 JavaScript 中有现成的解决方案吗？在您链接的论文中实现算法看起来相当耗时(虽然很有趣!)。根据您尝试插入的特定形状，您或许可以使用更简单的解决方案。

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

重采样的一种方法是测量源形状中每个控制点沿其圆周的距离，然后以等效(缩放)距离对目标形状重采样。这是在加利福尼亚和圆之间插值的这种技术的演示:

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

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