如何實現在畫布逆轉徑向傾斜偏移效果

我創建一個JavaScript圖像處理的應用程序（使用Fabric.js & HTML5畫布）建立/重新渲染畫布上，並放置/拖動對象。放置對象之後，它可以導出數據URL並處理圖像。

，我想補充

我試圖實現逆轉徑向傾斜移位效果圖像，使某些點可以「模糊了」的功能。通過Fabric.js或簡單的HTML5畫布實現這一目標的最快方法是什麼？

這是我所想達到

我已經試過

2015-12-10 0x1ad2

最快的你說什麼？只需在所需區域繪製一個填充中等透明白色的圓形路徑即可。你可以模糊像素操作，但它的slooow。 – markE

@markE：我不記得shadowBlur是否也適用於drawImage ...也就是適當的裁剪（+ offset技巧），這將是答案。 – GameAlchemist

@markE：我想要實現的主要目標是模糊，所以我認爲透明度不適合工作。 – 0x1ad2

也許我以後可以完成這個演示。

正如你看到我把你的圖像作爲背景。然後，我在圖像元素中加載了相同的圖像，我用它爲圓形創建了一個圖案。現在，當圓圈移動時，我移動圖案偏移量，使其看起來像圖像與背景相同，但您正在查看圖案。

現在設想使用stackblur或fabricjs過濾器來模糊圖案圖像（只有一次），並且您應該獲得所需的效果。

需要一些技巧來補償縮放效果。

我將在稍後完成演示。希望它能給你提供幫助。

編輯：我有嚴重的Cors問題在這裏。我不知道如何製作與本地圖片不相關的片段。

2015-12-12 09:51:50 AndreaBogazzi

哇，這是驚人的感謝幫助和真棒演示！這爲我節省了很多時間，並且您能否指引我朝着正確的方向發展，「有一些技巧需要補償縮放效應」。 – 0x1ad2

我在演示中添加了縮放效果「提示」。我改變了一個橢圓，因爲思考模糊的面孔更有用。你知道嗎？現在輪換失蹤了。 – AndreaBogazzi

非常感謝:)你有什麼改變來有效擴展？而且我認爲我現在要禁用旋轉並不需要這些。 – 0x1ad2

回答