用fabric.js繪制矩形

Question

這是我用fabric.js繪制矩形的代碼，但我沒有得到確切的結果。 我正在使用fabric.js在HTML中的畫布上繪制一個矩形

<canvas id="canvas2" width=500 height=500 style="height:500px;width:500px;"></canvas>

我的JS代碼是：

var canvas = new fabric.Canvas("canvas2");
var rectangle, isDown, origX, origY;

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: '',
        stroke: 'red',
        strokeWidth: 3,
    });
    canvas.add(rectangle);
});

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

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

Answer 1

Shariq Ansari，據我了解，用鼠標繪制矩形有問題。 請檢查這個小提琴

你的問題是鼠標移動。 這是您需要在鼠標中執行的操作：移動事件：

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();
});