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 的问题。