错误的元素选择行为

Question

我想知道为什么在下面提供的两个矩形的例子中，黄色的一个通过点击该元素正确显示选择边界，但RED一个不是？它通过单击画布的空左上区域来选择元素。如何解决这个问题？

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。

一个解决方案是在setCoords()之后调用setPositionByOrigin()，如下所示：

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>