ES6 - Leinwand-Hub nicht funktioniert

Question

Ich versuche, einige Änderungen (in ES6) in diesem Stift http://codepen.io/IMarty/pen/RaajQx zu tun, und es ist fast perfekt funktionierende, außer für diese Funktion

function drawLines(p) { 
    if(!p.active) return; 
    for(var i in p.closest) { 
     ctx.beginPath(); 
     ctx.moveTo(p.x, p.y); 
     ctx.lineTo(p.closest[i].x, p.closest[i].y); 
     ctx.strokeStyle = 'rgba(255,255,255,'+ p.active+')'; 
     ctx.stroke(); 
    } 
} 

In meiner Feder http://codepen.io/wendelnascimento/pen/PzRzGE, i‘ Ich habe alles in ES6 geschrieben und es funktioniert, aber nur die Striche werden nicht angezeigt. Die Methode sieht so aus:

drawLines(p) { 
    if(!p.active) 
     return; 

    for(var i = 0; i < p.closest.length; i++) { 
     this._context.beginPath(); 
     this._context.moveTo(p.x, p.y); 
     this._context.lineTo(p.closest[i].x, p.closest[i].y); 
     this._context.strokeStyle = `rgba(255,255,255,${p.active})`; 
     this._context.stroke(); 
    } 
} 

Kann mir jemand dabei helfen?

Answer 1

Dies liegt daran, dass Ihre Liste der nächstgelegenen Punkte nur ein Element enthält, sodass die Iteration keine Linien zeichnet. Grund: Sie

if(p1 == p2) { 
    let placed = false; 

    for(let k = 0; k < 5; k++) { 
     if(!placed) { 
      if(!closest[k]) { 
       closest[k] = p2; 
       placed = true; 
      } 
     } 
    } 
} 

haben Während es sein sollte:

if(!(p1 == p2)) { 
    let placed = false; 

    for(let k = 0; k < 5; k++) { 
     if(!placed) { 
      if(!closest[k]) { 
       closest[k] = p2; 
       placed = true; 
      } 
     } 
    } 
} 

Sie wollen das oben eingeben, wenn wenn die Punkte unterschiedlich sind.

Dies zeichnet Linien zwischen Punkten, jedoch ist der Effekt sehr unterschiedlich zu dem Beispiel, von dem Sie inspiriert wurden. Wenn du das gewollt hättest - gut gemacht; Wenn nicht, gibt es wahrscheinlich ein anderes Problem, wie das Auswählen der Mausposition und das Finden von Punkten, die dem am nächsten sind, nicht den Ursprung.