キャンバスに垂直な破線を描くことができません

Question

私はキャンバスに破線を描くために、以下のJavaScriptアルゴリズムを使用しています。水平線の描画テストに使用

g.dashedLine(157, 117, 157,153, [10, 5]); 

次ポイント：垂直線描画テストに使用

  g.dashedLine = function (x, y, x2, y2, dashArray) { 
      this.beginPath(); 
      this.lineWidth = "2"; 

      if (!dashArray) 
       dashArray = [10, 5]; 

      if (dashLength == 0) 
       dashLength = 0.001;  // Hack for Safari 

      var dashCount = dashArray.length; 
      this.moveTo(x, y); 

      var dx = (x2 - x); 
      var dy = (y2 - y); 
      var slope = dy/dx; 

      var distRemaining = Math.sqrt(dx * dx + dy * dy); 
      var dashIndex = 0; 
      var draw = true; 

      while (distRemaining >= 0.1) { 
       var dashLength = dashArray[(dashIndex++) % dashCount]; 

       if (dashLength > distRemaining) 
        dashLength = distRemaining; 

       var xStep = Math.sqrt((dashLength * dashLength)/(1 + slope * slope)); 
       if (x < x2) { 
        x += xStep; 
        y += slope * xStep; 
       } 
       else { 
        x -= xStep; 
        y -= slope * xStep; 
       } 

       if (draw) { 
        this.lineTo(x, y); 
       } 
       else { 
        this.moveTo(x, y); 
       } 
       distRemaining -= dashLength; 
       draw = !draw; 
      } 
      this.stroke(); 
      this.closePath(); 
     }; 

次のポイント： g.dashedLineを（このアルゴは垂直線を描画するために正しくなく、できない水平線を描画します157,117,160,157、[10,5]）。

Answer 1

ラインが垂直の場合、dx = 0となり、傾き=無限大になります。あなた自身のダッシュロジックを書くなら、dx = 0（または非常に0に近い）の特殊なケースを扱う必要があります。この特殊なケースでは、逆スロープ（すなわち、dx/dy）とyStep（xStepの代わりに）で作業する必要があります。

もっと大きな疑問は、あなた自身のダッシュロジックを書いている理由です。 Canvasには点線のビルトインサポートがあります。ダッシュパターンを設定するには、setLineDash（）関数を呼び出します。完了したら、前のダッシュパターンを復元します。たとえば...

g.dashedLine = function (x, y, x2, y2, dashArray) { 
    this.beginPath(); 
    this.lineWidth = "2"; 
    if (!dashArray) 
     dashArray = [10, 5]; 
    var prevDashArray = this.getLineDash(); 
    this.setLineDash(dashArray); 
    this.moveTo(x, y); 
    this.lineTo(x2, y2); 
    this.stroke(); 
    this.closePath(); 
    this.setLineDash(prevDashArray); 
};