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

我正在尝试编写一个程序，使用javascript在Adobe Illustrator中创建两个形状之间的步骤。我能够通过导出形状，SVG，然后使用Raphael.js来实现：使用javascript或d3.js在形状之间进行转换

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

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

来源

2012-08-09 Saiato

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

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

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

http://bl.ocks.org/3081153

线性内插有一种倾向，以自身相交，但大多是凸的形状，它的工作原理相当不错并很快。

来源

2012-08-09 05:23:19 mbostock

感谢您的回应！我明白你在说什么，但是我对d3仍然很陌生，在实施时遇到了麻烦。基于你的例子，我可以[得到这个]（http://jsfiddle.net/xJGHk/），但它看起来像我重新采样不正确。我计划导入的所有SVG图形都是这些小块的小动物，所以我认为如果我可以弄清楚如何从SVG路径传递坐标，那么圆函数应该可以正常工作......如果这是我应该做的。 – Saiato 2012-08-09 08:14:36

好吧，你有一个弯曲的路径，而不是像我的例子中的多边形坐标，所以增加了一些额外的难度。您可以使用SVG路径元素的[getTotalLength]（http://www.w3.org/TR/SVG/paths.html#__svg__SVGPathElement__getTotalLength）和[getPointAtLength]（http://www.w3.org/TR/SVG/） paths.html #__ svg__SVGPathElement__getPointAtLength）方法以定期采样形状并将它们转换为多边形（分段线性段）。 – mbostock 2012-08-09 14:28:04

这很有道理！我很抱歉有这么多麻烦，但我仍然对D3很新。我尝试将我的路径转换成多边形，然后用我的JSON替换您的示例中的california.json。但是，它不再呈现任何东西。'var pathone = $（“svg path”）[0]; var polyone = [[]]; 为（VAR I = 0;我 Saiato 2012-08-12 22:31:22

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

来源

2015-03-16 13:01:51 atomless

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

回答

相关问题