Fabric.jsライブラリRect（）メソッドが正しく動作しない

Question

fabricjsの2.0.7バージョンを使用しています。

> Fiddle: http://jsfiddle.net/eugene1983/gu8nna9x/ 

問題は、私が小さな矩形に対しては機能しませんでしたが、より大きなサイズの矩形に対しては機能しませんでした。 1.2バージョンのファブリックにはこのような問題はありません。 1.7バージョンでも同じ問題があります。

私は何か間違っている可能性がありますか？

Answer 1

組み込みのfabric.js関数を使用して、キャンバス上のマウスの位置を計算する必要があります。

コードの代わりにcanvas.getPointer(opt.e)を使用すると、これを使用して正確な左上と左辺を使用できます。この理由の幅と高さは絶対値が編集してくれてありがとう@andreabogazzi

var canvas = new fabric.Canvas('c',{ 
 
backgroundColor:'#555',selection:false 
 
}); 
 
canvas.requestRenderAll(); 
 

 
var crop = { 
 
    enable: false 
 
}; 
 

 
var rectangle = new fabric.Rect({ 
 
    originX: 'left', 
 
    originY: 'top', 
 
    fill: 'fill', 
 
    stroke: '#ccc', 
 
    strokeDashArray: [2, 2], 
 
    width: 1, 
 
    height: 1, 
 
    visible: false 
 
}); 
 
canvas.add(rectangle); 
 

 
canvas.on("mouse:down", function(o) { 
 
    var point = canvas.getPointer(o.e); 
 
    originLeft = point.x; 
 
    originTop = point.y; 
 
    rectangle.set({ 
 
    left: point.x, 
 
    top: point.y, 
 
    width:1, 
 
    height:1 
 
    }) 
 
    crop.enable = true; 
 
    rectangle.visible = true; 
 
    canvas.bringToFront(rectangle); 
 
    canvas.requestRenderAll(); 
 
}); 
 

 
canvas.on("mouse:move", function(o) { 
 
    if (crop.enable) { 
 
    var point = canvas.getPointer(o.e); 
 
    if (originLeft > point.x) { 
 
     rectangle.set({ 
 
     left: Math.abs(point.x) 
 
     }); 
 
    } 
 
    if (originTop > point.y) { 
 
     rectangle.set({ 
 
     top: Math.abs(point.y) 
 
     }); 
 
    } 
 
    rectangle.set({ 
 
     width: Math.abs(originLeft - point.x), 
 
     height: Math.abs(originTop - point.y) 
 
    }); 
 
    canvas.requestRenderAll(); 
 
    } 
 
}); 
 

 
canvas.on("mouse:up", function(options) { 
 
    crop.enable = false; 
 
});

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script> 
 
<canvas width="400" height="400" id="c"></canvas>