在D3.js中使用画布进行笔画划线插值

Question

我想知道基于画布的Mike Bostock基于SVG stroke-dash interpolation method的实现。我收集了一个画布与SVG的不同之处在于，“一旦绘制出一个形状，就无法对其进行修改或设计”（来自Roger Veciana i Rovira）。那么这个方法原则上画布可以支持，还是会浪费我的时间？

如果有可能，任何指针都会非常感激。

提前致谢。

Answer 1

简短的回答是肯定的，你可以这样做，但你可能不想这样做。稍微长一点的答案是它比SVG复杂得多 - 你不能使用相同的技术，因为它依赖于画布中不存在的东西。

当离开SVG时，你会丢失D3为它提供的所有东西（以及SVG本身提供的东西），例如线条生成器，插值和stroke-dasharray属性。我已经制作了一个简单的（而不是很简单的D3）动画路径here的例子。您可以看到基本技术，但对于任何更复杂的技术（例如，单个路径的动画绘制），您将不得不创建自己的插补器，为您提供沿路径的点序列，并将这些点一个接一个地绘制到画布上。这只是简单的线性插值。

因此，要在画布中重现上述示例，您需要实现一个函数，该函数使用点之间的基数样条插值路径，并允许您获取沿线的每个点的位置，然后将其传递给{ {1}}在一小段延迟后绘制每个点的函数，可以让您产生线条平滑绘制的错觉。对于开头的虚线，除了你必须得到破折号而不是点之外，它将是类似的。

你可能会重复使用D3的SVG线路生成器的部分实现，但它仍然需要付出相当大的努力。