TUI Image Editor添加图片后无法编辑问题求助

问题现象 #

• 向TUI Image Editor添加单张图片后，图片可激活、可移动，但缩放/旋转等控制点完全失效，强制开启控制点也无作用；
• 画布中添加多张图片后，鼠标选中任意图片，控制点恢复正常功能。

已尝试方案 #

• 使用TUI官方addImageObject方法添加图片；
• 使用fabric.js原生fabric.Image.fromURL方法添加图片；
• 加载保存的JSON画布数据后，问题仍未解决。

相关代码 #

fabric.Image.fromURL(imagepath, (img) => {
  // 设置图片参数：位置、缩放等
  img.set({
    left: 100, // X坐标
    top: 100, // Y坐标
    scaleX: 1, // X轴缩放
    scaleY: 1, // Y轴缩放
    selectable: true // 设为可选择、可编辑
  })
  console.log(img)
  // 添加图片到画布
  canvas.add(img)

  // 设置图片为激活状态
  canvas.setActiveObject(img)

  // 重绘画布
  canvas.renderAll()
})

解决方案 #

1. 使用TUI Editor的API而非直接操作fabric底层 #

TUI Image Editor基于fabric.js封装，维护了自身的状态管理，直接操作fabric的canvas会导致TUI的UI控件（如控制点）不同步。改用TUI提供的方法添加并激活对象：

fabric.Image.fromURL(imagepath, (img) => {
  img.set({
    left: 100,
    top: 100,
    scaleX: 1,
    scaleY: 1,
    selectable: true
  })
  // 获取TUI Editor实例（假设已初始化editor变量）
  const editor = tui.ImageEditor.getInstance();
  // 使用TUI方法添加图片
  editor.addImageObject(img);
  // 使用TUI方法设置激活对象
  editor.setActiveObject(img);
  // 触发TUI重绘
  editor.renderAll();
})

2. 手动触发TUI的对象选中事件 #

如果必须使用fabric原生方法添加图片，添加后手动触发TUI的objectSelected事件，同步状态：

fabric.Image.fromURL(imagepath, (img) => {
  img.set({
    left: 100,
    top: 100,
    scaleX: 1,
    scaleY: 1,
    selectable: true
  })
  const editor = tui.ImageEditor.getInstance();
  const canvas = editor.getCanvas();
  
  canvas.add(img);
  canvas.setActiveObject(img);
  // 手动触发TUI的对象选中事件
  editor.fire('objectSelected', {target: img});
  editor.renderAll();
})

3. 检查初始化配置 #

确认TUI Editor初始化时开启了对象编辑相关配置：

const editor = new tui.ImageEditor('#tui-image-editor-container', {
  includeUI: {
    menuBarPosition: 'bottom',
    initMenu: 'crop',
    uiSize: {
      width: '1000px',
      height: '700px'
    }
  },
  // 开启选择功能
  selection: true,
  // 关闭对象缓存避免状态不同步
  objectCaching: false
});

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