如何使用 Fabric.js 停止绘图

Question

我复制了一个随着鼠标移动绘制矩形的代码，使用fabric.js。但我需要当用户选择该选项时，绘图停止。

我用过这个fiddlehttp://jsfiddle.net/a7mad24/aPLq5/

var canvas = new fabric.Canvas('c', { selection: false });

var rect, isDown, origX, origY;

canvas.on('mouse:down', function (o) {
    isDown = true;
    var pointer = canvas.getPointer(o.e);
    origX = pointer.x;
    origY = pointer.y;
    var pointer = canvas.getPointer(o.e);
    rect = new fabric.Rect({
        left: origX,
        top: origY,
        originX: 'left',
        originY: 'top',
        width: pointer.x - origX,
        height: pointer.y - origY,
        angle: 0,
        fill: 'rgba(255,0,0,0.5)',
        transparentCorners: false
    });
    canvas.add(rect);
});

canvas.on('mouse:move', function (o) {
    if (!isDown) return;
    var pointer = canvas.getPointer(o.e);

    if (origX > pointer.x) {
        rect.set({ left: Math.abs(pointer.x) });
    }
    if (origY > pointer.y) {
        rect.set({ top: Math.abs(pointer.y) });
    }

    rect.set({ width: Math.abs(origX - pointer.x) });
    rect.set({ height: Math.abs(origY - pointer.y) });


    canvas.renderAll();
});

canvas.on('mouse:up', function (o) {
    isDown = false;
});

Answer 1

您是说 enable/disable 用户输入的复选框之类的东西？试试下面的代码片段看看我的意思。

var canvas = new fabric.Canvas('c', { selection: false });

var rect, isDown, origX, origY;

canvas.on('mouse:down', function(o) {
    isDown = true;
    var pointer = canvas.getPointer(o.e);
    origX = pointer.x;
    origY = pointer.y;
    var pointer = canvas.getPointer(o.e);
    
    rect = new fabric.Rect({
        left: origX,
        top: origY,
        originX: 'left',
        originY: 'top',
        width: pointer.x-origX,
        height: pointer.y-origY,
        angle: 0,
        fill: 'rgba(255,0,0,0.5)',
        transparentCorners: false
    });
    canvas.add(rect);
});

canvas.on('mouse:move', function(o){
    if (!isDown) return;
    var pointer = canvas.getPointer(o.e);
    
    if(origX>pointer.x){
        rect.set({ left: Math.abs(pointer.x) });
    }
    if(origY>pointer.y){
        rect.set({ top: Math.abs(pointer.y) });
    }
    
    rect.set({ width: Math.abs(origX - pointer.x) });
    rect.set({ height: Math.abs(origY - pointer.y) });
    
    
    canvas.renderAll();
});

canvas.on('mouse:up', function(o){
  isDown = false;
});

.container {
  position: relative;
  pointer-events: auto;
}
#checkBox:checked ~ .container {
  pointer-events: none;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
Disable: <input id="checkBox" type="checkbox">
<div class="container disabled">
  <canvas id="c" width="500" height="500" style="border:1px solid #ccc"></canvas>
</div>

Answer 2

您可以使用 canvas.on() 和 canvas.off() 添加事件侦听器。

此处更新jsFiddle。

如何使用 Fabric.js 停止绘图

How to stop drawing with Fabric.js

javascript

fabricjs

drawrectangle