将 effects/filters 应用到不仅仅是 FabricJS 中的图像对象

Question

我使用 FabricJS 为我的交互式漫画制作工具使用了一段时间，在大多数情况下，它非常棒。然而，一个限制是 - 迄今为止 - 我还没有找到任何方法来使不是图像的对象应用效果。

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

我对棕褐色或复古等预设不太感兴趣，我真的只需要模糊功能，lighten/darken 和 saturate/unsaturate。

Answer 1

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

Javascript

要说变量 element 等于您尝试对其应用过滤器的元素，这里是如何使用 JavaScript.

应用过滤器

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

CSS

要说该元素的 id 为 element，请使用 CSS 实现以下内容。

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

有很多可能的过滤器。要了解有关如何使用它们的更多信息，请单击 here!

示例：

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>

将 effects/filters 应用到不仅仅是 FabricJS 中的图像对象

Apply effects/filters to more than just image objects in FabricJS

javascript

canvas

fabricjs

Javascript

CSS

示例：