AlpineJS+FabricJS新增对象无法调整大小编辑，需分组后取消分组才正常

问题根源 #

该异常由AlpineJS的响应式代理机制和fabric.js的实例上下文逻辑冲突导致：你将fabric的Canvas实例挂载到了Alpine组件的响应式实例上，Alpine会自动给该Canvas实例套一层Proxy代理，fabric内部处理控件缩放、文本编辑等交互时，无法从代理对象中读取到正确的内部状态，导致交互失效。
分组操作触发了fabric内部的临时实例创建逻辑，该流程绕过了代理对象的状态读取限制，因此分组解散后单个对象的交互能力恢复正常。

解决方案 #

有三种可行的修复方案，按优先级推荐：

• 最高优先级：将Canvas实例标记为Alpine的非响应式属性，避免被代理包裹。Alpine 3+ 可使用Alpine.reactive.raw()方法包裹实例，代码示例如下：

// 初始化Canvas时用raw标记非响应式
this.canvas = Alpine.reactive.raw(new fabric.Canvas('c'))

• 次优先级：不将Canvas实例挂载到Alpine组件的this上，改为存储在全局变量、闭包变量等非响应式空间中，从根源避免被代理。
• 临时补救方案：每次添加新对象后，手动调用对象的setCoords()方法刷新交互坐标，再触发画布重绘：

var text = new fabric.Textbox('hello world', {
  left: 100,
  top: 100,
  fontSize: 20
});
this.canvas.add(text);
// 追加以下两行代码修复交互
text.setCoords();
this.canvas.requestRenderAll();

内容的提问来源于stack exchange，提问作者TardisX