在我对它们进行分组/取消分组之前无法调整大小/编辑对象 - AlpineJS + FabricJS

Question

问题在这里重现：

https://jsfiddle.net/gtkjmuqb/10/

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

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

根据 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）使用代理对象。 使用 Alpine.raw() 连接到您的画布

在你的情况下：

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

应该为你工作:)