不能 resize/edit 对象，直到我 group/ungroup 它们 - AlpineJS + FabricJS

Question

问题重现于此：

我完全不知道发生了什么。这是一个非常简单的设置。 AlpineJS 触发将文本对象添加到 canvas。这些新对象不能 resized/edited - 只能移动。调整大小控件出现但不起作用（移动对象除外）。

但是如果我创建另一个对象（再次单击该按钮，它表现出相同的不可调整大小的行为）然后将这两个对象组合在一起（单击+拖动），这两个对象现在都可以调整大小 - 都作为组的一部分，而且一旦我再次取消选择并取消组合它们。

根据 jsfiddle，我在页面加载时进行了以下设置：

 this.canvas = new fabric.Canvas('c');

像这样添加文本对象：

var text = new fabric.Textbox('hello world', {
  left: 100,
  top: 100,
  fontSize: 20
});
this.canvas.add(text);

如果我添加第三个文本对象，它会遇到同样的问题，直到我将它添加到一个组然后将其删除。

Answer 1

我遇到了同样的问题。环顾四周，我发现 Vue+FabricJS 也有类似的问题。

这基本上是由于 AlpineJS（如 Vue）使用 Proxy 对象。使用 Alpine.raw()

连接到您的 canvas

你的情况：

var text = new fabric.Textbox('hello world', {
left: 100,
top: 100,
fontSize: 20
});
Alpine.raw(this.canvas).add(text);

应该适合你:)

Cannot resize/edit objects until I group/ungroup them - AlpineJS + FabricJS