Question

我希望只有在点击按钮后才可以绘制矩形。

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>

我不知道为什么IF语句中的代码永远不会被触发。我正在考虑使用canvas.off，但我无法弄清楚它是如何使用它的。

我的警报也没有显示，所以我猜PictureRectangle永远不会是真的。

Answer 1

您的画布位置是绝对的，z-index是1.因此它位于按钮的顶部。因此该按钮无法点击。您可以使用canvas.on和canvas.off来注册活动。 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>

FabricJs无法使用“DrawMode按钮”绘制

1 个答案: