我已经为我的交互式漫画生成器使用FabricJS一段时间了,并且在大多数情况下,它很棒。但是,一个局限性是-迄今为止-我还没有找到使非图像对象应用效果的任何方法。
例如,本指南显示了如何在图像对象上渲染效果,但是例如,我想将效果应用于用Fabric或文本对象绘制的矩形和圆形等形状。有没有办法做到这一点?
我对棕褐色或老式等预设不太感兴趣,我真的只需要能够模糊,变亮/变暗以及饱和/不饱和的功能。
我不清楚如何fabric.js工作。我浏览了他们的网站,发现它仅适用于图像。由于你希望将这些过滤器应用于其他元素,因此我将与CSSfilter属性共享。
要说变量element
等于你要向其应用过滤器的元素,这是如何在JavaScript中应用过滤器。
element.style.filter= "blur(8px)";
要说该元素具有id
of 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>
太好了,但与FabricJS一起使用又如何呢?Fabric处理元素的方式比仅使用HTML标签要复杂得多,因此使用CSS对此并没有多大意义。检查元素的示例:prnt.sc/vyrsa9
@Venk,如果它们都在
<canvas>
元素内,请不要担心,您可以从此处使用javascript 。这是对画布内部元素执行这些效果的方法。