将效果/过滤器应用于FabricJS中的不仅仅是图像对象

Question

我已经为我的交互式漫画生成器使用FabricJS一段时间了，在大多数情况下，它都很棒。然而，一个限制是，到目前为止，我还没能找到任何方法让非图像的物体产生效果。

例如，本指南展示了如何在图像对象上渲染效果，但例如，我想将效果应用于使用Fabric或文本对象绘制的矩形和圆形等形状。有没有办法做到这一点？

我对深褐色或复古等预设不太感兴趣，我真的只需要模糊、变亮/变暗和饱和/不饱和的能力。

Answer 1

我不清楚fabric.js是如何工作的。我浏览了他们的网站，注意到它只适用于图像。由于您希望将这些过滤器应用于其他元素，因此我将与CSSfilter属性共享。

Javascript

要说变量element等于您试图应用过滤器的元素，下面是如何使用JavaScript应用过滤器。

element.style.filter= "blur(8px)";

CSS

要说元素具有element的id，请使用CSS来实现以下内容。

#element {
filter: blur(8px);
}

有很多过滤器是可能的。要了解更多关于如何使用它们的信息，请单击此处！

示例：

p {
filter: blur(5px);
transition: all 0.5s;
}
p:hover {
filter: none;
}

<h3>Put Your Mouse Over The Element Below:</h3>
<p>Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text</p>