Lage nicht vertikale DashedLine auf Leinwand zu zeichnen

Question

ich verwende folgende JavaScript-Algorithmus gestrichelte Linie auf Leinwand zu zeichnen. Das Algo zieht horizontale Linie korrekt, aber nicht in der Lage vertikale Linie zeichnen:

  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(); 
     }; 

folgende Punkte zum Testen vertikale Linie zu ziehen verwendet:

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

folgende Punkte zum Testen horizontale Linienzeichen verwendet: g.dashedLine (157, 117, 160, 157 [10, 5]);

Answer 1

wenn die Leitung vertikal, dx = 0, die Steigung = Unendlich führt. Wenn Sie Ihre eigene Strichlogik schreiben, müssen Sie den Spezialfall behandeln, bei dem dx = 0 (oder sehr nahe bei 0) ist. In diesem speziellen Fall müssten Sie mit der inversen Steigung (d. H. Dx/dy) und yStep (anstelle von xStep) arbeiten.

Eine größere Frage ist, warum Sie Ihre eigenen Strich Logik zu schreiben. Canvas verfügt über integrierte Unterstützung für gestrichelte Linien. Rufen Sie die Funktion setLineDash() auf, um das Bindestrichmuster festzulegen. Stellen Sie das vorherige Bindestrichmuster wieder her, wenn Sie fertig sind. Zum Beispiel ...

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); 
};