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

debugcn 发表于 Dev

胜利

我已经为我的交互式漫画生成器使用FabricJS一段时间了，并且在大多数情况下，这很棒。但是，一个局限性是-迄今为止-我还没有找到任何使非图像对象应用效果的方法。

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

我对棕褐色或老式等预设不太感兴趣，我真的只需要能够模糊，变亮/变暗以及饱和/不饱和的功能。

myjobistobehappy

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

Java脚本

要说变量element等于您要向其应用过滤器的元素，这是如何在JavaScript中应用过滤器。

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

的CSS

要说元素具有idof element，请使用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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。