在FabricJS中绘制后无法选择对象

Question

我想在画布上自由绘制矩形.

这是我的JSFiddle.

码:

var canvas1 = new fabric.Canvas("canvas2");
var freeDrawing = true;
var divPos = {};
var offset = $("#canvas2").offset();
$(document).mousemove(function(e) {
    divPos = {
        left : e.pageX - offset.left,
        top : e.pageY - offset.top
    };
});
$('#2').click(function() {

    console.log("Button 2 cilcked");

    // Declaring the variables
    var isMouseDown = false;
    var refRect;

    // Setting the mouse events
    canvas1.on('mouse:down', function(event) {
        // Defining the procedure
        isMouseDown = true;
        // Getting yhe mouse Co-ordinates
        // Creating the rectangle object
        if (freeDrawing) {
            var rect = new fabric.Rect({
                left : divPos.left,
                top : divPos.top,
                width : 0,
                height : 0,
                stroke : 'red',
                strokeWidth : 3,
                fill : ''
            });
            canvas1.add(rect);
            refRect = rect; // **Reference of rectangle object
        }

    });

    canvas1.on('mouse:move', function(event) {
        // Defining the procedure

        if (!isMouseDown) {
            return;
        }
        // Getting yhe mouse Co-ordinates
        if (freeDrawing) {
            var posX = divPos.left;
            var posY = divPos.top;

            refRect.setWidth(Math.abs((posX - refRect.get('left'))));
            refRect.setHeight(Math.abs((posY - refRect.get('top'))));
            canvas1.renderAll();
        }

    });

    canvas1.on('mouse:up', function() {
        // alert("mouse up!");
        isMouseDown = false;
        // freeDrawing=false; // **Disables line drawing
    });
});

我面临的问题是在绘制一个矩形后我无法移动,调整大小或至少选择绘制的矩形.

Answer 1

错误是你在鼠标启动时最终没有添加对象.只需更改鼠标:up事件功能如下:

 canvas1.on('mouse:up', function() {
    // alert("mouse up!");
    canvas1.add(refRect);
    isMouseDown = false;
    // freeDrawing=false; // **Disables line drawing
});

它会工作正常.:)