FabricJs Can't draw with “DrawMode button”

问题

I want to have the possibility to draw rectangle only after clicking a button .

Javascript :

$("#select").click(function() {
    DrawingRectangle = false;
});
$("#draw").click(function() {
    DrawingRectangle = true;
    draw();
}); 

function draw() {
    if (DrawingRectangle == true) {
        canvas.on('mouse:down', function(o) {
            var pointer = canvas.getPointer(o.e);
            isDown = true;
            origX = pointer.x;
            origY = pointer.y;

            rectangle = new fabric.Rect({
                left: origX,
                top: origY,
                fill: 'transparent',
                stroke: 'red',
                strokeWidth: 3,
            });
            canvas.add(rectangle);
        });

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

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

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

HTML :

<canvas id="paper" width="800" height="300" style="border:1px solid #ccc;position: absolute; z-index : 1"></canvas>
<li align="center"><button  id="draw">Draw ROI</button></li>
<li align="center"><button  id="select">Select ROI(s)</button></li>

I don't know why the code in the IF statement is never fired . I was thinking aout using canvas.off but I can't figure out, how it can work with it .

My alert don't show too so I guess DrawingRectangle is never true .

回答1:

Your canvas position is absolute and z-index is 1. So it comes on the top of your button. So that button was not clickable. You can use canvas.on and canvas.off to register the events. Check.

var canvas = new fabric.Canvas('paper');
var isDown = false;
$("#select").click(function() {
    DrawingRectangle = false;
    canvas.selection = true;
    canvas.off('mouse:down');
    canvas.off('mouse:move');
    canvas.off('mouse:up');
    changeSelectableStatus(true);
});

$("#draw").click(function() {
    canvas.selection = false;
    draw();
    changeSelectableStatus(false);
});

function changeSelectableStatus(val) {
    canvas.forEachObject(function(obj) {
        obj.selectable = val;
    })
    canvas.renderAll();
}

function draw() {
    canvas.on('mouse:down', onMouseDown);
    canvas.on('mouse:move', onMouseMove);
    canvas.on('mouse:up', onMouseUp);
}

function onMouseDown(o) {
    var pointer = canvas.getPointer(o.e);
    isDown = true;
    origX = pointer.x;
    origY = pointer.y;

    rectangle = new fabric.Rect({
        left: origX,
        top: origY,
        fill: 'transparent',
        stroke: 'red',
        strokeWidth: 3,
        selectable: false
    });
    canvas.add(rectangle);
}

function onMouseMove(o) {
    if (!isDown) return;
    var pointer = canvas.getPointer(o.e);
    if (origX > pointer.x) {
        rectangle.set({
            left: Math.abs(pointer.x)
        });
    }
    if (origY > pointer.y) {
        rectangle.set({
            top: Math.abs(pointer.y)
        });
    }

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

function onMouseUp(o) {
    rectangle.setCoords();
    isDown = false;
    DrawingRectangle = false;
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.min.js"></script>
<canvas id="paper" width="800" height="300" style="border:1px solid #ccc;"></canvas>
<li align="center"><button  id="draw">Draw ROI</button></li>
<li align="center"><button  id="select">Select ROI(s)</button></li>

来源：https://stackoverflow.com/questions/46954056/fabricjs-cant-draw-with-drawmode-button