From 93f0670deda5500d854fa9b1ef5b695cb7eb0c11 Mon Sep 17 00:00:00 2001
From: YuanHongbo <782242184@qq.com>
Date: Sun, 21 Apr 2024 15:43:25 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E9=A2=84=E8=AD=A6?=
 =?UTF-8?q?=E8=AE=B0=E5=BD=95=20od?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/ViewLargerImageModal/demo/base.tsx    |  7 +++++
 .../WarningRecordCard/WarningRecordCard.tsx   | 29 ++++++++-----------
 2 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/packages/biz/src/ViewLargerImageModal/demo/base.tsx b/packages/biz/src/ViewLargerImageModal/demo/base.tsx
index a016286..8330c85 100644
--- a/packages/biz/src/ViewLargerImageModal/demo/base.tsx
+++ b/packages/biz/src/ViewLargerImageModal/demo/base.tsx
@@ -16,6 +16,9 @@ const backEndData = [
     // warningTime: "2023-03-01 ",
     warningTimestamp: Date.now(),
     // warningTimeFormat:"YYYY-MM-DD"
+    odRect:{
+      "x": 0.553125, "y": 0.29722223, "w": 0.048958335, "h": 0.2462963
+    }
   },
   {
     imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
@@ -27,6 +30,9 @@ const backEndData = [
     // warningTime: "2023-03-01 ",
     warningTimestamp: Date.now(),
     // warningTimeFormat:"YYYY-MM-DD"
+    odRect:{
+      "x": 0.553125, "y": 0.29722223, "w": 0.048958335, "h": 0.2462963
+    }
   }
 ]
 
@@ -43,6 +49,7 @@ const dataSource = backEndData.map(o => {
     warningInfo: [`盒子${o.boxId}`, `位置${o.position}`],
     cabietText: `柜子ID: ${o.cabietId}`,
     warningTimestamp: o.warningTimestamp,
+    odRect: o.odRect
   }
 })
 
diff --git a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx
index 5ff9cb6..f56bd99 100644
--- a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx
+++ b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx
@@ -95,47 +95,42 @@ export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
 
   // 显示 od
   // 定义图片和canvas的引用
-  const imgRef = useRef<HTMLImageElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
   useEffect(() => {
-    // 获取图片和canvas元素
-    const img = imgRef.current;
     const canvas = canvasRef.current;
     const ctx = canvas?.getContext('2d');
-    if (!canvas || !ctx) return
+    const img = new Image();
+    img.width = imgStyle?.width ? parseInt(imgStyle?.width as string) : 336
+    img.height = imgStyle?.height ? parseInt(imgStyle?.height as string) : 203
+    debugger
+    if (!canvas || !ctx || !imageKey) return;
+    img.src = imageKey;
 
-    // 确保图片已经加载完成
-    if (img?.complete) {
+    img.onload = () => {
 
-      // 设置canvas的尺寸与图片相同
+      // 确保在图片加载完成后设置画布尺寸
       canvas.width = img.width;
       canvas.height = img.height;
 
-      // const odRect = {
-      //   "x": 0.553125, "y": 0.29722223, "w": 0.048958335, "h": 0.2462963
-      // }
-      // 根据odRect对象计算矩形的起始坐标和尺寸
-
       const x = get(odRect, 'x', 0) * img.width;
       const y = get(odRect, 'y', 0) * img.height;
       const width = get(odRect, 'w', 0) * img.width;
       const height = get(odRect, 'h', 0) * img.height;
 
-      // 绘制矩形
+      // 绘制图片和矩形应在图片加载完成后进行
+      ctx.drawImage(img, 0, 0, img.width, img.height);
       ctx.strokeStyle = '#FFF566';
       ctx.strokeRect(x, y, width, height);
-    }
+    };
   }, []);
 
 
   return (
     <div className={componentName} key={id} onClick={handleClick} style={style}>
       <Card
-        //<img alt="预警图" src={imageKey} style={{ borderRadius: 0, ...imgStyle }} />
         cover={<div className={`${componentName}-cover-img`} >
-          <img ref={imgRef} alt="预警图" src={imageKey} style={{ borderRadius: 0, ...imgStyle }} />
-          <canvas ref={canvasRef} style={{ position: 'absolute', top: 10, left: 10 }} />
+          <canvas ref={canvasRef} />
         </div>}
         style={{ width: 356, height: 302, padding: 10, borderRadius: 4, ...selectedCardStyle, ...cardStyle }}
         {...cardProps}