Fabric.js - 对象不更新缓存位置？

Question

这是一个很难写的标题，因为我不完全确定问题出在哪里，但我认为这与 Fabric.js 如何缓存对象属性有关。

假设我创建了一个矩形：

let foo = new fabric.Rect({
    left: 10,
    top: 10,
    height: 50,
    width: 50,
    fill: 'green'
});
canvas.add(foo);
canvas.renderAll();

我想在悬停时改变它的填充：

canvas.on('mouse:hover', evt => {
    if (!evt.target) return;
    evt.target.set('fill', 'green');
});

一切都很好。

但是，如果我以编程方式更改对象的位置或大小：

foo.set({left: 500});
canvas.renderAll();

...只有当我将鼠标悬停在其 OLD 位置上时才会触发该事件，即 tl=10,10 / tr=60,10 / br = 60,60 / bl = 10 之间的空间,60，如果我将其新位置悬停在 tl=500,10 / tr = 560,10 / br = 560,60 / bl = 510,60，则不会。

所以它就像一个缓存没有得到更新。尽管在每次此类更改后都调用 .renderAll()，但仍会发生这种情况。

我做错了什么？

Answer 1

根据我找到的文件here 看起来set 只是移动了它的图像。

如果您想更新事件触发区域，您也需要致电setCoords。

这似乎工作正常：

foo.set({left: 500});
foo.setCoords();
canvas.renderAll();