如何將過濾器應用於圖像填充KonvaJS的形狀？

我使用Konva.js來做一些畫布動畫。我有圓形，有圖像填充，並且想要將顏色疊加/濾鏡應用於形狀（RGBA）。如何將過濾器應用於圖像填充KonvaJS的形狀？

這是我如何創建Shape對象：

var konvaObject = new Konva.Circle({ 
    x: 100, 
    y: 100, 
    radius: 300, 
    stroke: this.color, 
    strokeWidth: 6, 
    fillPatternRepeat: 'no-repeat', 
}); 

// load the image into the shape: 
var imageObj = new Image(); 
imageObj.onload = function() { 
    konvaObject.fillPatternImage(imageObj); 
    konvaObject.draw(); 
} 
imageObj.src = 'www.demo.com/anImageName.png';

演示：http://jsbin.com/winugimeme/edit?js,output

The Docs outline an RGBA filter，但據我可以告訴它只能適用於Konva.Image項目。

有沒有辦法重新工作我上面的代碼，以便我可以將濾鏡應用到形狀對象/填充圖像？

來源

2016-06-30 Prefix

根據過濾器的文檔，你必須使用過濾器之前緩存形狀http://konvajs.github.io/api/Konva.Filters.html#RGBA

node.cache(); 
node.filters([Konva.Filters.RGBA]); 
node.blue(120); 
node.green(200); 
node.alpha(0.3);

注：作爲填充圖像應啓用CORS（如託管在同一域）jsbin演示不會與這個例子中工作。

來源

2016-07-01 01:40:46 lavrton

我嘗試了上述並得到了上述CORS錯誤。有沒有辦法繞過CORS限制..？我從CDN加載圖片。我不明白爲什麼這是一個CORS問題，我可以鏈接來自同一個CDN的圖像，並將它們作爲圖像標籤加載。爲什麼在畫布上操作它們會導致CORS錯誤？ – Prefix

你可以試試這個技巧讓它工作「imageObj.crossOrigin =」Anonymous「;」 – lavrton

http://jsbin.com/licusaxeqe/2/edit?js,output – lavrton

如何將過濾器應用於圖像填充KonvaJS的形狀？

回答

相關問題