Нарисуйте прямоугольник с помощью 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 Ансари, Для моего понимания у вас есть проблемы, чтобы нарисовать прямоугольник мышь. Пожалуйста, проверьте это fiddle

Ваша проблема была в перемещении мыши. Это то, что вам нужно сделать в вашей мыши: переместить событие:

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