jquery 如何在fabric js中模糊对象(不是图像)？

e1xvtsh3 于 2024-01-07 发布在 jQuery

关注(0)|答案(4)|浏览(176)

我们可以模糊对象在画布上与fabricjs像矩形，多边形。至少软，对象的边缘。

更新：

我有另一种方法，我们可以模糊对象的阴影。所以模糊对象的阴影比设置偏移到相反的方向，像这样：

var canvas = new fabric.Canvas("my-canvas");
var rect = new fabric.Rect({
    top: -600,
    left: 100,
    fill: 'red',
    width: 100,
    height: 100,
    opacity: 0.5
});
rect.setShadow({
     color: 'red',
     blur: 7,
     offsetX: 0,
     offsetY: 700
});
canvas.add(rect);

个字符
但问题是我们不能使用globalCompositeOperation选项

jquery

来源：https://stackoverflow.com/questions/36036291/how-to-blur-objects-in-fabric-js-not-an-image

4条答案

按热度按时间

n9vozmp41#

请参见结构演示：http://fabricjs.com/image-filters
在复选框模糊代码：

$('blur').onclick = function() {
applyFilter(9, this.checked && new f.Convolute({
  matrix: [ 1/9, 1/9, 1/9,
            1/9, 1/9, 1/9,
            1/9, 1/9, 1/9 ]
}));}

字符串
它可以工作。

赞(0）回复(0）举报 2024-01-07

ha5z0ras2#

可以通过CSS实现

filter: blur(X%)

字符串
https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_filter&preval=contrast(200%25)

赞(0）回复(0）举报 2024-01-07

cpjpxq1n3#

作为解决方法，您可以使对象透明并应用模糊阴影：

var shadow = new fabric.Shadow({
      color: 'white',
      blur: 7,
      offsetX: 20,
      offsetY: 20,
    })
var myObject = new fabric.Polygon(
      {
        ... other props
        shadow: shadow,
      }
    )

字符串

赞(0）回复(0）举报 2024-01-07

ve7v8dk24#

fabricjs是HTML5 canvas API的高级库。在fabric中，您处理的是canvas对象本身，而不是上下文。要模糊对象，只需设置该对象的opacity属性。

var canvas = new fabric.Canvas("my-canvas");
var rect = new fabric.Rect({
    top: 100,
    left: 100,
    fill: 'red',
    width: 40,
    height: 40,
    opacity: 0.5
});
canvas.add(rect);

个字符

赞(0）回复(0）举报 2024-01-07

我来回答

jquery 如何在fabric js中模糊对象(不是图像)？

4条答案

相关问题

热门标签

最新问答