如何模糊織物js中的物體（不是圖像）？

我們可以使用諸如矩形，多邊形之類的布料模糊畫布中的對象。對象邊緣至少柔軟。如何模糊織物js中的物體（不是圖像）？

更新：

我有其他的想法，爲此我們可以模糊物體的影子。所以，模糊物體陰影高於設定這樣的偏移相反的方向：

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>

，但問題是，我們不能使用globalCompositeOperation選擇這個

來源

2016-03-16 sharma sk

fabricjs是一個高層次的圖書館HTML5 canvas API。在結構中，您將處理畫布對象本身，而不是上下文。要模糊對象，只需設置該對象的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" height="400" width="400"></canvas>

來源

2016-03-17 04:40:03

其實我想把對象變成軟邊緣。不透明度不是一個好主意。 –

對不起，不能回答這個問題。無論如何，軟邊緣的硬邊緣意味着什麼？這可能會幫助我獲得一些想法 –

硬邊只是指普通的fabricjs矩形。軟邊指的是這樣的[鏈接]（http://www.indezine.com/products/powerpoint/learn/fillslinesandeffects/images/softedgeoptions2010_2.jpg） –

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

它可以工作。

來源

2016-06-14 03:06:55

它使模糊，但只有內部對象。我想要柔軟的邊緣.. –

如何模糊織物js中的物體（不是圖像）？

回答

相關問題