如何模糊织物 js 中的对象（不是图像）？

Posted 2023-03-25

【中文标题】如何模糊织物 js 中的对象（不是图像）？

【英文标题】：How to blur objects in fabric js (NOT AN IMAGE)?

【发布时间】：2016-07-02 08:51:32

【问题描述】：

我们可以用像矩形、多边形这样的织物来模糊 Canvas 中的对象吗？至少可以使对象边缘变软。

更新：

我有另一种方法，我们可以模糊物体阴影。所以模糊对象阴影而不是像这样将偏移设置为相反的方向：

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);

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.1.0/fabric.all.min.js"></script>

<canvas id="my-canvas"  ></canvas>

但问题是我们不能为此使用globalCompositeOperation 选项

【参考方案1】：

查看面料演示：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 ]
));

它可以工作。

【参考方案2】：

fabricjs 是 html5 canvas API 的高级库。在 fabric 中，您在画布对象本身上工作，而不是上下文。要模糊对象，只需为该对象设置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);

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.1.0/fabric.all.min.js"></script>

<canvas id="my-canvas"  ></canvas>

【讨论】：

其实我想把物体的硬边变成软边。不透明度不是一个好主意。

抱歉无法回答问题。无论如何，硬边到软边是什么意思？这可能会帮助我获得一些想法

硬边仅仅意味着普通的fabricjs矩形。软边意味着像这样link