自定义Tui Image Editor切换矩形/圆形绘图模式异常求助

自定义TUI Image Editor时，仅需提供矩形和圆形两种绘图形状。目前单个形状绘图功能正常，但切换形状时，始终只会绘制首次选择的形状——比如先选圆形绘图，之后再选矩形，画出来的还是圆形。

试过编写onAddCircle与onAddRectangle函数及对应触发按钮，尝试过用不存在的clearDrawingShape方法，也试过会清除已绘图形的clearObjects方法，都没解决问题。查官方文档没找到清除形状缓存的方法，特此求助。

相关代码 #

圆形绘图函数 #

const onAddCircle = () => {
  imageEditorRef.current.startDrawingMode('SHAPE');
  if (imageEditorRef.current.getDrawingMode() !== 'SHAPE') {
    const { height } = imageEditorRef.current.getCanvasSize();
    imageEditorRef.current.startDrawingMode('SHAPE');
    imageEditorRef.current.setDrawingShape('circle', {
      fill: 'transparent',
      stroke: COLOR_STATUS_ORANGE,
      strokeWidth: height / 100,
      isRegular: true,
    });
  }
};

矩形绘图函数 #

const onAddRectangle = () => {
  if (imageEditorRef.current.getDrawingMode() !== 'SHAPE') {
    const { height } = imageEditorRef.current.getCanvasSize();
    imageEditorRef.current.startDrawingMode('SHAPE');
    imageEditorRef.current.clearObjects();
    imageEditorRef.current.setDrawingShape('rect', {
      fill: 'transparent',
      stroke: COLOR_STATUS_ORANGE,
      strokeWidth: height / 100,
      isRegular: true,
    });
  }
};

触发按钮 #

<button onClick={onAddCircle} color="green" />
<button onClick={onAddRectangle} color="red" />

解决方案 #

问题出在函数的判断逻辑上：当已处于SHAPE绘图模式时，原代码不会执行setDrawingShape更新形状类型，导致切换失效；同时onAddCircle存在冗余的startDrawingMode调用，onAddRectangle的clearObjects会误删已绘图形。

修改后的函数如下：

const onAddCircle = () => {
  const { height } = imageEditorRef.current.getCanvasSize();
  // 启动绘图模式（已启动时调用无副作用）
  imageEditorRef.current.startDrawingMode('SHAPE');
  // 直接设置圆形参数，覆盖原有形状配置
  imageEditorRef.current.setDrawingShape('circle', {
    fill: 'transparent',
    stroke: COLOR_STATUS_ORANGE,
    strokeWidth: height / 100,
    isRegular: true,
  });
};

const onAddRectangle = () => {
  const { height } = imageEditorRef.current.getCanvasSize();
  imageEditorRef.current.startDrawingMode('SHAPE');
  // 移除clearObjects，保留已绘图形
  imageEditorRef.current.setDrawingShape('rect', {
    fill: 'transparent',
    stroke: COLOR_STATUS_ORANGE,
    strokeWidth: height / 100,
    isRegular: true,
  });
};

核心逻辑：TUI Image Editor的setDrawingShape支持直接覆盖当前形状配置，无需先退出绘图模式。删除多余的判断条件后，每次点击按钮都会强制更新形状参数，解决切换失效问题。

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