javascript - 虚线错误

Question

我采用并改编了一个绘制虚线的 HTML5 canvas 扩展，但它有几个问题，如 http://jsfiddle.net/VxCYL/2/ 所示。

示例 1:如何避免两点之间的距离非常小的点“聚在一起”(参见第一个 Angular 30,50 到 32,50)。我想我需要在确定是否绘制或移动到下一个点时检查与最后一个点的距离？当我有很多点时，输出看起来很笨拙。

示例 2:在 from.x 小于 to.x 或 from.y 小于 to.y 的情况下，即向后绘制 moveTo 的行为与我预期的不同，即在示例中显示的行应该仍然加入。

谢谢。

Answer 1

第一个问题在目前的库中不容易修复。它需要一个包装器方法，该方法采用一个点数组，以便它可以在“转 Angular ”时累积并跟踪当前的点/破折号状态。 (如果时间允许，我将编写一个方法来执行此操作；如果我这样做，我将编辑此答案并添加通知评论。)

您无法通过更改 dashArray 使用当前代码来处理此问题。

例如，对于 [2,9] 的标称 dashArray，该模式每 11 像素重复一次。如果你的第一行是 115px，这意味着你将绘制 10 个图案副本，2px 的点和 3px 的破折号。因此，您希望下一行在绘制下一个点之前以 6px 偏移量开始。你需要一个 [0,6,2,9,2,9,2,9,2,9,2,9,...] 的 dashArray 直到你覆盖了你的长度下一行。 :/

---

第二个例子显然是代码中的错误。这是一个稍微简单的演示:

损坏:http://jsfiddle.net/VxCYL/3/

要修复它，我们需要确保 dx 为负时 xStep 为负。我们将这一行添加到:

if (dx<0) xStep = -xStep;

固定:http://jsfiddle.net/VxCYL/4/