我可以为Fabric.js基元应用过滤器吗?

3

是否可以将图像滤镜应用于基本图形、路径、形状和文本?能够在更复杂的图像上进行处理,但不能模糊一个矩形有点奇怪。有没有什么“技巧”可以做到这一点?

1个回答

3

如果您查看fabric.js代码,您会发现fabric.js过滤功能是从原始图像创建一个新图像(即通过手动将过滤器应用于原始图像中的像素来计算新图像中的每个像素)。因此,fabric.js过滤功能仅适用于图像。

请记住,fabric.js提供了一个在canvas元素上的模型。当前的标准规范对于canvas 2D渲染上下文不支持过滤器的一般概念。


有点后续问题。有没有办法将一个原始数据类型转换成图像? - GMchris
你可以创建一个屏幕外的临时画布。在临时画布上绘制原始图形。将滤镜应用于临时画布。然后使用临时画布作为图像在主画布上绘制。 - Bobby Orndorff
2
例如: var elem = document.createElement("canvas"); elem.setAttribute("width", 100); elem.setAttribute("height", 100); var temp = new fabric.Canvas(elem); temp.add(new fabric.Triangle({ left: 0, top: 0, width: 100, height: 100, fill: "blue" })); var filter = new fabric.Image.filters.Grayscale(); filter.applyTo(temp); var canvas = new fabric.Canvas("myCanvas"); canvas.add(new fabric.Circle({ left: 25, top: 25, width: 50, radius: 50, fill: "red" })); canvas.add(new fabric.Image(elem, {left: 50, top: 50})); - Bobby Orndorff

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接