在 HTML5 canvas 中填充后消除锯齿边缘？
Anti-aliasing edges after floodfill in HTML5 canvas?
我正在尝试实现一种在 HTML5 canvas.
中生成抗锯齿边缘的填充算法
我的初始输入是一个 ImageData 对象，它包含透明背景上重叠的圆圈和线条的轮廓。轮廓已经抗锯齿化了，我有边缘的实际颜色（rgba(51, 51, 51, 255)），以及一些灰度 "fringe" 由抗锯齿形状产生的像素（值如 rgba(48, 48, 48, 32) 和 rgba(54, 54, 54, 200)).
我当前的泛光填充实现知道这些边缘像素，但它只是将填充颜色应用于它们 - 导致像素化。我还尝试应用 this answer 的 alpha 混合，也导致像素化。
对于通过混合这些边缘像素的颜色和填充颜色来生成平滑边缘，您会推荐什么算法？
我认为您需要将边缘像素 "on top of" 混合为（纯色）填充颜色。像这样（伪代码）：
alpha = pixel.alpha / 255;
pixel.r = alpha * pixel.r + (1 - alpha) * fill.r;
pixel.g = alpha * pixel.g + (1 - alpha) * fill.g;
pixel.b = alpha * pixel.b + (1 - alpha) * fill.b;
换句话说，如果边缘像素是不透明的 (alpha == 1)，它只会保留其颜色。如果它是完全透明的 (alpha == 0)，它会接收泛光填充颜色。在这些极端之间，根据 alpha 进行线性插值。
我正在尝试实现一种在 HTML5 canvas.
中生成抗锯齿边缘的填充算法我的初始输入是一个 ImageData 对象，它包含透明背景上重叠的圆圈和线条的轮廓。轮廓已经抗锯齿化了，我有边缘的实际颜色（rgba(51, 51, 51, 255)），以及一些灰度 "fringe" 由抗锯齿形状产生的像素（值如 rgba(48, 48, 48, 32) 和 rgba(54, 54, 54, 200)).
我当前的泛光填充实现知道这些边缘像素，但它只是将填充颜色应用于它们 - 导致像素化。我还尝试应用 this answer 的 alpha 混合，也导致像素化。
对于通过混合这些边缘像素的颜色和填充颜色来生成平滑边缘，您会推荐什么算法？
我认为您需要将边缘像素 "on top of" 混合为（纯色）填充颜色。像这样（伪代码）：
alpha = pixel.alpha / 255;
pixel.r = alpha * pixel.r + (1 - alpha) * fill.r;
pixel.g = alpha * pixel.g + (1 - alpha) * fill.g;
pixel.b = alpha * pixel.b + (1 - alpha) * fill.b;
换句话说，如果边缘像素是不透明的 (alpha == 1)，它只会保留其颜色。如果它是完全透明的 (alpha == 0)，它会接收泛光填充颜色。在这些极端之间，根据 alpha 进行线性插值。