Javascript 虚线虫

我已经采用并修改了一个HTML5画布扩展，它可以画虚线，但它有两个问题，如中所示

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

示例2：如果from.x小于to.x或from.y小于to.y，即向后绘制moveTo，则其行为与我预期的不同，即在所示示例中，线仍应连接

---

谢谢。

第一个问题在目前的库中不容易解决。它需要一个包装器方法，该方法接受一个点数组，以便在“四舍五入”时可以累积并跟踪当前点/破折号状态。（如果时间允许，我将编写一个方法来完成此操作；如果我这样做，我将编辑此答案并添加通知注释。）

通过更改

dashArray

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

例如，对于

[2,9]

的标称dashArray，模式每11px重复一次。如果你的第一行是115px，这意味着你已经画了10份图案，2份点和3份破折号。因此，在绘制下一个点之前，您希望下一行以6px偏移开始。您需要一个包含

[0,6,2,9,2,9,9,2,9,2,9,2,9，…]的dashArray

，直到您完成下一行的长度：/

---

第二个例子显然是代码中的一个bug。下面是一个稍微简单的演示：

破碎的： 要修复它，我们需要确保当

dx

为负时

xStep

为负。我们将这一行添加到：

if (dx<0) xStep = -xStep;

---

if（dx谢谢，你是个绅士。值得注意的是，我尝试了类似的方法，但在我无知的情况下设置了dx上一个问题现在已经解决。解决方法是在计算坡度时考虑无穷大或-无穷大：

var斜率=（dy/dx）；
slope=slope==Infinity | | slope==-Infinity？dy:slope；
Ooh，很好的测试！我必须在实现中添加类似于SVG的东西。（我一直想这么做只是为了简单。）在第二个示例中，我不确定您的内容是否正确；我必须进一步研究。感谢采用的代码：）我很高兴。感谢您发现了一个bug，以及改进它的动力。；）