Question

我们可以使用像矩形，多边形这样的fabricjs来模拟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" height="400" width="400"></canvas>

但问题是我们无法使用此{/ p>的globalCompositeOperation选项

Answer 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 ]
}));}

它可以工作。

Answer 2

/* for normal user logout */ Auth::user()->logout(); /* for admin user logout */ Auth::admin()->logout(); /* for manager user logout */ Auth::manager()->logout();是HTML5 fabricjs API的高级库。在结构中，您处理canvas对象本身，而不是上下文。要模糊对象，只需为该对象设置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);

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

2 个答案: