3

我目前正在编写一个小型图像编辑器来学习一些 javascript。其中一个功能显然是绘图工具。当使用它时，我将这些像素绘制到实际画布顶部的另一个画布上，然后当释放鼠标时，我将像素从顶部画布复制到底层画布。

这是用于将绘制的像素复制到底层画布的代码。

this.applySketch = function() {
    this.revertStack.push(this.ctx.getImageData(0, 0, this.width, this.height));

    var real = this.ctx.getImageData(0, 0, this.width, this.height);
    var sketch = this.sketchctx.getImageData(0, 0, this.width, this.height);

    for(var i = 0; i < sketch.data.length; i += 4) {
        // check the alpha value to decide if to copy to the real canvas
        if(sketch.data[i+3] > 0) {
            real.data[i] = sketch.data[i];
            real.data[i+1] = sketch.data[i+1];
            real.data[i+2] = sketch.data[i+2];
            real.data[i+3] = sketch.data[i+3];
        }
    }

    this.ctx.putImageData(real, 0, 0);
    this.sketchctx.clearRect(0, 0, this.width, this.height);
}

我遇到的问题是像素被复制到另一层时看起来不一样。相反，无论我正在复制什么，周围都有一个白色像素的薄轮廓。

鼠标释放前（当像素位于顶层时） http://i.imgur.com/xHvN1iF.jpg

鼠标释放后（当它们被复制时） http://i.imgur.com/P0sdybs.jpg

我真的不知道这里发生了什么，因为它看起来很简单。有什么抗锯齿功能吗？

谢谢

4

1 回答 1

0

我想这是因为抗锯齿而发生的。绘制平滑线时，线条附近的一些像素几乎是透明的，但不是完全透明的。这个小提琴说明了这个问题。因此，您需要更仔细地合并 Alpha 通道。最简单的解决方案是将 alpha 通道值添加到原始值而不是完全替换它：

real.data[i+3] += sketch.data[i+3];

这个小提琴显示了效果。嗯，线看起来比原来的线粗。我想您应该使用其他公式来合并颜色。

于 2013-05-11T08:41:25.403 回答