當設置填充時添加額外'嘈雜'像素

Question

我遵循此示例：http://www.html5canvastutorials.com/labs/html5-canvas-modify-shape-color-on-click/爲了改變我的形狀在鼠標操作上的顏色。

一切正常有關設置顏色，但看到例如：

我有一條藍線。當我將它翻譯爲紅色時，線條邊界上會保留一些藍色像素。當我回到藍色時，仍有一些紅色像素。

我的代碼如下：

recolor: function(newColor){ 
    // Children are Kinetic.rect or Kinetic.line 
    var children=this.group.children; 

    for(var k in children){ 

     if(children[k] instanceof Kinetic.Line) 
      children[k].setStroke(newColor); 
     else 
      children[k].setFill(newColor); 
    } 
    this.group.draw(); 
} 

下面是截圖（正常和縮放）：

Answer 1

雖然我不知道發生了什麼，這將使這樣的錯誤，你可以試試這個：

recolor: function(newColor){ 
    // Children are Kinetic.rect or Kinetic.line 
    var children=this.group.children; 

    for(var k in children){ 

     if(children[k] instanceof Kinetic.Line) 
      children[k] = children[k].clone({stroke: newColor}); 
     else 
      children[k] = children[k].clone({fill: newColor}); 
    } 
    this.group.draw(); 
    this.group.getLayer().draw(); 
} 

這只是克隆喲ur對象，並將它們替換爲在config中有一個更改的對象。如果這不能解決你的問題，那麼kineticJS就不是問題。