fix(zhst/meta): 修改圈选重新渲染,透出重新绘制方法

packages/meta/src/cropperImage/CropperImage.tsx

@@ -99,6 +99,7 @@ const CropperImage = forwardRef<CropperImageRefProps, CropperImageProps>((props,
   const currentShapeRef = useRef<any>(null)
   const imageRef = useRef<HTMLDivElement>(null)
   const viewerRef = useRef<any>(null)
+  const currentFabricRef = useRef<CanvasPro>(null)
 
   // 自定义弹框
   const alginContainerRef: any = useRef(null);
@@ -116,16 +117,16 @@ const CropperImage = forwardRef<CropperImageRefProps, CropperImageProps>((props,
     // 监听形状选择事件
     addEventListenerWrapper(imageRef.current, EVENT_SHAPE_SELECT, (e: { detail: any; }) => {
       // 选中的od
-        const id = e.detail;
-        if (id) {
-          const selectRectData = odList!.filter(_od => _od.id === id)?.[0]
-          const _data = percentToLength(selectRectData, viewerRef.current.canvas)
-          const imageRect = getImageDataByPosition(
-            { x: _data.x, y: _data.y, w: _data.w, h: _data.h },
-            { canvas: viewerRef.current.canvas }
-          )
-          id && onShapeSelected?.(id, { ..._data, imageRect, originData: selectRectData })
-        }
+      const id = e.detail;
+      if (id) {
+        const selectRectData = odList!.filter(_od => _od.id === id)?.[0]
+        const _data = percentToLength(selectRectData, viewerRef.current.canvas)
+        const imageRect = getImageDataByPosition(
+          { x: _data.x, y: _data.y, w: _data.w, h: _data.h },
+          { canvas: viewerRef.current.canvas }
+        )
+        id && onShapeSelected?.(id, { ..._data, imageRect, originData: selectRectData })
+      }
     })
 
     return () => {
@@ -141,18 +142,20 @@ const CropperImage = forwardRef<CropperImageRefProps, CropperImageProps>((props,
   // 初始化 - 编辑器
   useEffect(() => {
     const _viewer = viewerRef?.current || {}
-    // 判断是否可编辑
+    // 判断是否可编辑  - 非编辑态
     if (!editAble) {
+      _viewer.clearShape()
       // 判定是否存在od框
       odList && odList.forEach(_od => {
         _viewer?.addShape?.(_od);
       })
       return
     } else {
-      _viewer?.clearShape?.();
+      // 编辑态
       const { targetTransform = {} } = _viewer
 
       if (type === 'rect') {
+        _viewer.clearShape()
         currentShapeRef.current = initRect()
         // 矩形 - 开始绘制实践
         cropStartRef.current = addEventListenerWrapper(imageRef.current, EVENT_CROP_START, () => {
@@ -198,7 +201,7 @@ const CropperImage = forwardRef<CropperImageRefProps, CropperImageProps>((props,
     const { containerData = {}, targetTransform = {} } = viewer
     const imageSize = viewer.getImgSize()
 
-    let currentFabric: CanvasPro = new fabric.Canvas(
+    currentFabricRef.current = new fabric.Canvas(
       canvasRef.current,
       {
         backgroundColor: 'transparent',
@@ -207,6 +210,7 @@ const CropperImage = forwardRef<CropperImageRefProps, CropperImageProps>((props,
         selection: false,
       }
     )
+    const currentFabric = currentFabricRef.current
 
     // 事件监听: 鼠标抬起事件
     currentFabric.on('mouse:down', function(options) {
@@ -306,6 +310,10 @@ const CropperImage = forwardRef<CropperImageRefProps, CropperImageProps>((props,
     viewerRef,
     rotateTo: (val) => {
       viewerRef.current.rotateTo((pre: any) => pre + val)
+    },
+    clearShape: () => {
+      viewerRef.current?.clearShape?.();
+      currentFabricRef.current?.clear()
     }
   }));
 

packages/meta/src/cropperImage/demo/basic.tsx

@@ -8,6 +8,23 @@ export default () => {
   const [editAble, setEditAble] = useState(false)
   const cropperRef = useRef(null)
   const [imgUrl, setImgUrl] = useState('')
+  const [odList, setOdList] = useState([
+    {
+      "id": "123",
+      "x": 0.5519352,
+      "y": 0.2965385,
+      "w": 0.05185461,
+      "h": 0.24698898,
+      selectAble: false,
+    },
+    {
+      "id": "456",
+      "x": 0.58543766,
+      "y": 0.3203356,
+      "w": 0.052037954,
+      "h": 0.2664015
+    }
+  ])
   const [selectedItem, setSelectedItem] = useState<any>()
 
   return (
@@ -15,27 +32,8 @@ export default () => {
       <Space>
         <Button onClick={() => setType('line')}>箭头模式</Button>
         <Button onClick={() => setType('rect')}>矩形框选</Button>
-        <Button onClick={() => setEditAble(pre => !pre)}>{!editAble ? '不可编辑' : '可编辑'}</Button>
-        <Button
-          onClick={() => {
-            console.log('cropperRef?.current', cropperRef?.current.rotateTo(90))
-            console.log('cropper', cropperRef?.current)
-          }}
-        >旋转</Button>
-      </Space>
-      <div style={{ width: 800, height: 600 }}>
-        <CropperImage
-          ref={cropperRef}
-          type={type}
-          odList={[
-            {
-              "id": "123",
-              "x": 0.5519352,
-              "y": 0.2965385,
-              "w": 0.05185461,
-              "h": 0.24698898,
-              selectAble: false,
-            },
+        <Button onClick={() => {
+          setOdList([
             {
               "id": "456",
               "x": 0.58543766,
@@ -43,7 +41,25 @@ export default () => {
               "w": 0.052037954,
               "h": 0.2664015
             }
-          ]}
+          ])
+        }}>修改坐标</Button>
+        <Button onClick={() => setEditAble(pre => !pre)}>{!editAble ? '不可编辑' : '可编辑'}</Button>
+        <Button
+          onClick={() => {
+            cropperRef?.current.rotateTo(90)
+          }}
+        >旋转</Button>
+        <Button
+          onClick={() => {
+            cropperRef?.current.clearShape()
+          }}
+        >清空</Button>
+      </Space>
+      <div style={{ width: 800, height: 600 }}>
+        <CropperImage
+          ref={cropperRef}
+          type={type}
+          odList={odList}
           editAble={editAble}
           url="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
           onMouseUp={data => console.log('箭头绘制结束：', data)}