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();