HTML5 Canvas - 抗锯齿和油漆桶/洪水填充

Question

在浏览了 Stack Overflow 和 Google 之后，在我看来，在 HTML5 Canvas 上绘制线条时无法禁用抗锯齿。

这使得线条看起来很漂亮，但在应用油漆桶/洪水填充算法时会给我带来问题。

我的应用程序的一部分要求用户在 Canvas 上进行自由式绘图，使用基本工具，如线条大小、颜色……和油漆桶。

因为线条是用抗锯齿渲染的，所以它们不是一致的颜色……考虑到这一点，请考虑以下几点:

画一条黑色粗线

稍后再决定这条线应该是红色的

将洪水填充应用于黑线

我的洪水填充算法用红色填充了大部分线条，但是检测到抗锯齿的边缘在应该填充的区域之外......因此仍然存在(灰色/蓝色(？)从黑线遗留下来)。

洪水填充算法没有像 Photoshop 那样包含类似于“容差”的东西......我已经考虑过类似的东西，但我不确定它会有所帮助，因为我不认为抗锯齿会做一些简单的事情，比如在 a 旁边渲染灰色黑线，我认为它比那更先进，抗锯齿考虑了周围的颜色和混合。

有没有人对我如何最终得到一个更好的油漆桶/洪水填充物有任何建议，完全淹没/替换现有的线条或绘图部分？

Answer 1

如果您只是想更改线条的颜色:根本不要使用桶漆填充。

将所有线条和形状存储为对象/数组，并在需要时重新绘制它们。

这不仅允许您更改 Canvas 大小而不会丢失其上的所有内容，而且更改颜色只需更改对象/数组上的颜色属性并重绘，以及基于矢量而不是光栅缩放所有内容。

这将比桶填充更快，因为重绘大部分是在内部处理的，而不是像桶填充那样在 JavaScript 中逐像素处理。

话虽如此:不幸的是，您不能禁用形状和线条的抗锯齿，只能用于图像(使用 imageSmoothingEnabled 属性)。

一个对象可能如下所示:

function myLine(x1, y1, x2, y2, color) {
    this.x1 = x1;
    this.y1 = y1;
    this.x2 = x2;
    this.y2 = y2;
    this.color = color;
    return this;
}

然后通过以下方式分配它:

var newLine = new myLine(x1, y1, x2, y2, color);

然后将其存储到数组中:

/// globally:
var myLineStack = [];

/// after x1/x2/y1/y2 and color is achieved in the draw function:
myLineStack.push(new myLine(x1, y1, x2, y2, color));

然后只需在需要更新时遍历对象即可:

/// some index to a line you want to change color for:
myLineStack[index].color = newColor;

/// Redraw all (room for optimizations here...)
context.clearRect( ... );

for(var i = 0, currentLine; currentLine = myLineStack[i]; i++) {

    /// new path
    context.beginPath();

    /// set the color for this line
    context.strokeStyle = currentLine.color;

    /// draw the actual line
    context.moveTo(currentLine.x1, currentLine.y1);
    context.lineTo(currentLine.x2, currentLine.y2);

    context.stroke();
}

(例如，对于优化，您可以仅清除需要重绘的区域并绘制单个索引。您还可以将具有相同颜色的线条/形状分组，然后使用 strokeStyle 等的单个设置进行绘制。)