下午搜索了一堆相關文章,沒有找到符合要求的。
對一張圖片應用不規則區域的羽化,該怎么做呢?
首先去查了下 羽化的原理,然而沒有什么用,
然后就開始從表現層去研究怎么模擬?
idea 1:
blur濾鏡,可以實現邊緣“羽化”,但是呢 整個圖片都會被模糊。那么可不可以 blur濾鏡 后 將它的邊緣拿出來給原始圖片使用呢?(多層圖片疊)。
在PS里模擬操作后,程序難度較大。
1:應用blur的層,需要比目標區域大一些,(牽扯程序對點陣外擴的算法)
2:blur層和顯示層,邊緣結合依然會有“硬邊”的問題。
實際出來效果並不好,
idea 2:
檢測每個非透明點周圍透明點的數量
此處理方式理論上符合我們羽化圖片的預期。待實驗結果。
終於經過代碼實驗出得結果,可喜可賀
中心保持清晰,邊緣羽化,實驗成功。
而我們看到 當羽化程度很大時,可以看到一些瑕疵,這也是這種算法的一定缺陷吧。暫時還未想到解決辦法。不過前面的羽化程度應該夠用了:(
羽化效果會一定程度“縮小”圖片(因為透明邊緣點后,視覺上會覺得圖片變小了)
到此我們終於完成了在canvas里面實現不規則形狀的 羽化效果