Tui 图像编辑器，添加两个可绘制形状答案

【问题标题】：Tui image editor, adding two drawable shapesTui 图像编辑器，添加两个可绘制形状
【发布时间】：2023-02-14 12:57:52
【问题描述】：

我只需要在我的自定义 Tui 图像编辑器中显示两个形状，一个矩形和一个圆形，仅此而已。

我添加了矩形并且它工作得很好但是如果我添加另一个函数来添加一个圆并绘制其中一个或首先绘制然后选择另一个，它仍然绘制第一个项目。（如果你点击一个圆圈并绘制，然后点击矩形并绘制然后它绘制一个圆圈）

我不确定如何让它正常运行。

这是我的圆形和矩形的两个功能。


  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"
  />

我试过将 imageEditorRef.current.clearDrawingShape(); 添加到函数的开头，但它说它不是函数，因为它不存在。然后我尝试添加 imageEditorRef.current.clearObjects(); 但这会清除它按该形状绘制的所有内容。

我也看过他们的文档，没有关于如何在绘制或选择其他形状之前实际清除 shape cache 的内容。

有人可以帮忙吗？

【问题讨论】：

你能分享一个 github 链接或像 stackblitz 这样的在线代码 sn-p 以便我们提供帮助吗？

标签： reactjs toast-ui-image-editor

【解决方案1】：

我修好了它！

我将这两个功能合并为一个，添加了一个名为 shape 的道具，它检查道具是否设置为 or ，如果是，则使用该逻辑，否则它会清除绘图板。

  const drawShape = (Shape) => {
    const { height } = imageEditorRef.current.getCanvasSize();
    imageEditorRef.current.startDrawingMode('SHAPE');
    if (Shape === 'circle') {
      imageEditorRef.current.setDrawingShape('circle', {
        fill: 'transparent',
        stroke: COLOR_STATUS_ORANGE,
        strokeWidth: height / 100,
        isRegular: true,
      });
    } else if (Shape === 'rectangle') {
      imageEditorRef.current.setDrawingShape('rect', {
        fill: 'transparent',
        stroke: COLOR_STATUS_ORANGE,
        strokeWidth: height / 100,
        isRegular: true,
      });
    } else {
      imageEditorRef.current.stopDrawingMode();
    }
  };

【讨论】：