Question

我想在PHP网页中部署一个使用fabric js 的在线绘图工具。我们成功创建了大多数fabric，js，i的自定义工具。

但是我不能像 MS Paint橡皮擦那样创建橡皮擦工具 ..

我为橡皮擦找到了这种替代方法。这将在对象
中做掩模处理
function eraser() { mode = 'pencil'; canvas.isDrawingMode = true; canvas.freeDrawingBrush.width = strokeWidth; canvas.freeDrawingBrush.color = 'white'; }

但是，我想创建一个类似于MS Paint的橡皮擦。我签了SO，In Fabric js there is no built in eraser

Plz任何人帮助我。

是否可以在织物js中制作橡皮擦？

如果不可能，你能否建议任何替代面料js ，就像任何开源/免费网页绘图工具一样支持橡皮擦的功能

Answer 1

不幸的是，fabric.js不支持此功能。我认为最好的方法是使用背景颜色绘制，例如：http://fabricjs.com/freedrawing/

但是我发现了这个很好的例子：http://jsfiddle.net/ArtBIT/WUXDb/1/

var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
var radius = 10; // or whatever
var fillColor = '#ff0000';
ctx.globalCompositeOperation = 'destination-out';
ctx.fillCircle(x, y, radius, fillColor);

我希望这会有所帮助。

Answer 2

这种可能性是存在的，但是您应该在绘制时撤消操作：

//eraser
    canvas.on('path:created', function (opt) {
        opt.path.globalCompositeOperation = 'destination-out';
        opt.path.lineWidth = strokeWidth;
        opt.path.stroke = 'rgba(0,0,0,0)';
        //opt.path.fill = 'black';
        canvas.requestRenderAll();
    });

 //draw
 canvas.on('path:created', function (opt) {
        opt.path.globalCompositeOperation = 'source-over';
        opt.path.lineWidth = strokeWidth;
        opt.path.stroke = 'black';
        //opt.path.fill = 'black';
        canvas.requestRenderAll();
    });

替代橡皮擦工具（Fabric js）用于开源橡皮擦工具

2 个答案: