fabric.jsで矩形を描く

Question

ここでは、fabric.jsで四角形を描くためのコードですが、正確な結果は得られません。私はHTMLで

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

私のJSコードをキャンバス上に四角形を描画するためにfabric.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(); 
});