FabricJs不能使用"DrawMode button"绘制 [英] FabricJs Can't draw with "DrawMode button"

问题描述

我希望仅在单击按钮后才可以绘制矩形.

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

JavaScript:

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，但是我不知道该如何使用它.

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 .

我的警报也没有显示，所以我猜DrawingRectangle永远不是true.

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

推荐答案

您的画布位置是绝对的，而z-index是1.因此它位于按钮的顶部.因此该按钮不可单击.您可以使用canvas.on和canvas.off来注册事件. 选中.

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>

这篇关于FabricJs不能使用"DrawMode button"绘制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！