ES6 - 帆布行程不工作

Question

我想要在此筆http://codepen.io/IMarty/pen/RaajQx做一些修改（在ES6），這幾乎完美的工作，除了這些功能

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

在我的筆http://codepen.io/wendelnascimento/pen/PzRzGE，我已經在ES6中編寫了一切，它正在工作，但只是筆畫沒有顯示。該方法看起來像這樣

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

任何人都可以幫助我嗎？

Answer 1

這是因爲您的最近點列表只有一個元素，因此迭代不會繪製線條。原因是：你有

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

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

雖然它應該是：

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

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

你想進入上述，如果當點是不同的。

這會在點之間畫線，但效果與您受到啓發的示例非常不同。如果這就是你想要的 - 做得好;如果不是，那麼可能還有另一個問題，例如選擇鼠標位置並找到最接近該位置的點，而不是原點。