设置填充时会添加额外的“噪声”像素

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来说这不是问题。