Canvas 错误的元素选择行为

我想知道为什么在下面提供的两个矩形的示例中，黄色的一个通过单击该元素正确显示选择边界，而红色的一个不正确？它通过单击画布左上方的空白区域来选择元素。 如何使用此场景修复此问题

var canvas=newfabric.canvas（'paper'）；
const red=new fabric.Rect({
x:100，
y:50，
填充：“红色”，
宽度：200，
身高：100，
原文：“中心”，
原创：“中心”
});
const yellow=new fabric.Rect({
左:100,，
排名：150，
填充：“黄色”，
宽度：200，
身高：100，
原文：“左”，
原创：“顶级”
});
canvas.add（红色）；
canvas.add（黄色）；
canvas.renderAll（）；
红色。setPositionByOrigin（{x:100，y:50}，'左'，'顶'）；
canvas.renderAll（）；
log（'Red Left应该是100，但是get'，Red.getLeft（））

它出现了

一种解决方案是在
setPositionByOrigin（）
之后调用
setCoords（）
，如下所示：


var canvas=newfabric.canvas（'paper'）；
const red=new fabric.Rect({
x:100，
y:50，
填充：“红色”，
宽度：200，
身高：100，
原文：“中心”，
原创：“中心”
});
const yellow=new fabric.Rect({
左:100,，
排名：150，
填充：“黄色”，
宽度：200，
身高：100，
原文：“左”，
原创：“顶级”
});
canvas.add（红色）；
canvas.add（黄色）；
canvas.renderAll（）；
红色。setPositionByOrigin（{x:100，y:50}，'左'，'顶'）；
red.setCoords（）；
canvas.renderAll（）；
log（'Red Left应该是100，但是get'，Red.getLeft（））
谢谢你，布雷特。真的帮助了我。