Warm tip: This article is reproduced from serverfault.com, please click

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

(javascript - Apply effects/filters to more than just image objects in FabricJS)

发布于 2020-11-28 23:32:11

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

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

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

Questioner
Venk
Viewed
0
myjobistobehappy 2020-12-09 12:11:52

我不清楚如何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>