間違った要素選択の動作

Question

下の2つの矩形の例で、黄色の要素が選択罫線を正しく表示するのはなぜですか？赤は1つではありませんか？キャンバスの空の左上の領域をクリックして要素を選択します。 このシナリオを使用して修正するにはどうすればよいですか？

http://jsfiddle.net/201y9s3m/5/

var canvas = new fabric.Canvas('paper'); 
 

 
const red = new fabric.Rect({ 
 
    x: 100, 
 
    y: 50, 
 
    fill: 'red', 
 
    width: 200, 
 
    height: 100, 
 
    originX: 'center', 
 
    originY: 'center' 
 
}); 
 

 
const yellow = new fabric.Rect({ 
 
    left: 100, 
 
    top: 150, 
 
    fill: 'yellow', 
 
    width: 200, 
 
    height: 100, 
 
    originX: 'left', 
 
    originY: 'top' 
 
}); 
 
canvas.add(red); 
 
canvas.add(yellow); 
 
canvas.renderAll(); 
 

 
red.setPositionByOrigin({x:100, y:50}, 'left', 'top'); 
 
canvas.renderAll(); 
 

 
console.log('Red Left should be 100 but gets ', red.getLeft());

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script> 
 
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>

Answer 1

それはthis issue was raised a few years backを表示されます。

一つの解決策は、このように、setPositionByOrigin()後setCoords()を呼び出すことです：

var canvas = new fabric.Canvas('paper'); 
 

 
const red = new fabric.Rect({ 
 
    x: 100, 
 
    y: 50, 
 
    fill: 'red', 
 
    width: 200, 
 
    height: 100, 
 
    originX: 'center', 
 
    originY: 'center' 
 
}); 
 

 
const yellow = new fabric.Rect({ 
 
    left: 100, 
 
    top: 150, 
 
    fill: 'yellow', 
 
    width: 200, 
 
    height: 100, 
 
    originX: 'left', 
 
    originY: 'top' 
 
}); 
 
canvas.add(red); 
 
canvas.add(yellow); 
 
canvas.renderAll(); 
 

 
red.setPositionByOrigin({x:100, y:50}, 'left', 'top'); 
 
red.setCoords(); 
 
canvas.renderAll(); 
 

 
console.log('Red Left should be 100 but gets ', red.getLeft());

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script> 
 
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>