kineticjs - setfill 時に「ノイズの多い」ピクセルが追加される

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

これは、オブジェクトを複製し、構成に単一の変更があるオブジェクトに置き換えるだけです。これで問題が解決しない場合、それは kineticJS の問題ではありません。