在HTML5畫布中填充洪泛後的抗鋸齒邊緣？

我想實現一個在HTML5畫布中產生反鋸齒邊緣的填充算法。在HTML5畫布中填充洪泛後的抗鋸齒邊緣？

我的初始輸入是一個ImageData對象，其中包含透明背景上重疊的圓和線的輪廓。輪廓線已經被反鋸齒，並且我具有邊緣的實際顏色（rgba(51, 51, 51, 255)），以及通過對圖形進行抗鋸齒處理生成的一些灰度「邊緣」像素（值爲rgba(48, 48, 48, 32)和rgba(54, 54, 54, 200)）。

我目前的填充填充實現瞭解這些邊緣像素，但它只是將填充顏色應用於它們 - 導致像素化。我也嘗試應用this answer的alpha混合，也導致像素化。

通過混合這些邊緣像素的顏色和填充顏色，您會推薦什麼算法來生成平滑邊緣？

來源

2015-08-15 Stiliyan

旁邊的問題：對於抗鋸齒來說，是不是足以改變alpha？你可以建立一個抗飽和版本的填充（邊界具有相同的rgb，但與像素內填充的空間成比例），然後將其添加到圓圈/線條的圖形中。 – GameAlchemist

我認爲你需要在（實心）泛光填充顏色上「混合」邊緣像素。像這樣的（僞）的東西：

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進行線性插值。

來源

2016-02-03 18:04:56 Thomas

謝謝托馬斯，那的確是正確的做法。 – Stiliyan

在HTML5畫布中填充洪泛後的抗鋸齒邊緣？

回答

相關問題