3

我正在尝试编写一个程序，该程序在使用 javascript 在 Adob​​e Illustrator 中创建的两个形状之间进行步进。我可以通过将形状导出为 SVG 然后使用 Raphael.js 来实现这一点：

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

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

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

4

2 回答 2

6

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

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

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

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

于 2012-08-09T05:23:19.833 回答
1

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

于 2015-03-16T13:01:51.617 回答