如何将过滤器应用于图像填充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的形状？

回答

相关问题