虚线错误

Question

我已经采用并改编了一个HTML5画布扩展，它绘制了虚线，但它有一些问题，如http://jsfiddle.net/VxCYL/2/

所示

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

示例2：如果from.x小于to.x或from.y小于to.y，即向后绘制，则moveTo的行为与我预期的不同，即在所示的示例中，行应该还是加入了。

感谢。

Answer 1

第一个问题不容易在图书馆中修复。它需要一个包装方法，它采用一个点数组，以便它可以在“四舍五入”时累积并跟踪当前点/破折号状态。 （如果时间允许，我会编写一个执行此操作的方法;如果我这样做，我将编辑此答案并添加通知注释。）

通过更改dashArray。

，您无法使用当前的当前代码处理此问题

例如，名义dashArray为[2,9]，模式每11px重复一次。如果您的第一行是115​​px，则意味着您将绘制10个模式副本，2px点和3px短划线。因此，在绘制下一个点之前，您希望下一行以6px偏移量开始。在覆盖下一行的长度之前，您需要一个[0,6,2,9,2,9,2,9,2,9,2,9,...]的dashArray。 ：/

---

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

破碎：http://jsfiddle.net/VxCYL/3/

要解决此问题，我们需要确保xStep为负时dx为否定。我们将这一行添加到：

if (dx<0) xStep = -xStep;

已修复：http://jsfiddle.net/VxCYL/4/

Answer 2

谢谢，你是个绅士。值得注意的是，我尝试了类似的东西，但在我的无知中将dx＆lt; 0设置为dx＆lt; 1。

此小提琴中还有另一个问题：

http://jsfiddle.net/VxCYL/5/

如果x或Y在线，则不会渲染任何内容。

Answer 3

最后一期已经解决。在计算斜率时，修复是为了迎合Infinity或-Infinity：

var slope =（dy / dx）;    斜率=斜率==无穷大||斜率== - 无穷大？ dy：坡度;