【发布时间】：2016-01-27 23:03:48
【问题描述】：
是否可以将图像过滤器应用于基元、路径、形状和文本？能够对更复杂的图像进行处理，但不能将矩形变蓝，这有点奇怪。有什么“作弊”可以做到这一点吗？
【问题讨论】：
标签： javascript canvas fabricjs
【发布时间】：2016-01-27 23:03:48
【问题描述】：
如果您查看 fabric.js 代码，您会看到 fabric.js 过滤器功能正在从原始图像创建一个新图像（即，新图像中的每个像素都是通过手动将过滤器应用于原始图像）。因此，fabric.js 过滤器功能仅适用于图像。
请记住，fabric.js 在画布元素之上提供了一个模型。画布 2D 渲染上下文的当前标准规范不支持过滤器的一般概念。
【讨论】：
-
一种跟进。有什么方法可以将图元转换为图像？
-
您可以创建一个不在屏幕上的临时画布。在临时画布上绘制图元。将过滤器应用于临时画布。然后使用临时画布作为图像在主画布上绘制。
-
例如：var elem = document.createElement("canvas"); elem.setAttribute("宽度", 100); elem.setAttribute("身高", 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}));