如何使用Fabric JS绘制透明图形

时间:2019-01-18 06:24:20

标签: javascript drawing fabricjs transparent

我正在使用Fabric js 1.7.22版。 我想删除图像背景。

我的画布代码如下:

var canvas = new fabric.Canvas('canvas');
var canvasElement  = document.getElementById('canvas');
var ctx = canvasElement.getContext('2d');
ctx.globalCompositeOperation = 'destinatoin-out';
canvas.setBackgroundImage('http://exampleImage.jpg', function (){
  canvas.renderAll();
})

var rect = new fabric.Rect({
  top:10,
  left:10,
  globalCompositeOperation: 'destination-out'
});
canvas.add(rect);

并输出如下:

enter image description here

说明:

  1. 任何添加了'destination-out'属性的fabric js对象都将背景显示为透明。
  2. 现在我要使用鼠标来绘制而不是rect,并尝试使用“ destination-out”属性将其添加到Fabric js画布中。
  3. 但是我不知道如何在鼠标事件触发后在画布上添加该图形。
  4. 当鼠标键向上移动时,我已经退出绘图模式。但是当我将鼠标移到该图形上时,该图形不是图形而是充当Fabric js的一个对象。
  5. 没有globalCompositeOperation属性。
  6. 因此使用绘图不会擦除背景。

我不知道如何以更好的方式擦除图像背景, 请帮助我。

我只想在鼠标按下事件时以编程方式选择最后一个图形,并为该图形设置globalCompositeOperation属性。

0 个答案:

没有答案