日常开发

src/views/game/humanBody.vue

@@ -21,9 +21,12 @@ const data = reactive<any>({
   againTimer: null,//定时状态
   wsState: false,//WS状态
   clientObj: {},//浏览器对象
+  boxes: [],//四个点坐标
+  proportion: null,//人框和屏幕比例
+  proportion1: null,//人框和屏幕比例
 });
 
-const { bodyposeData, bodyposeState, parameter, deviceInfo, againNum, againTimer, wsState, clientObj } = toRefs(data);
+const { bodyposeData, bodyposeState, parameter, deviceInfo, againNum, againTimer, wsState, clientObj, boxes, proportion,proportion1 } = toRefs(data);
 
 /**
  * 初始化
@@ -112,6 +115,14 @@ const getInit = async () => {
       }
       console.log("result", result)
       bodyposeData.value = result;
+      if (boxes.value.length == 0) {
+        speckText("识别成功！");
+        let arr = e.data.result.boxes;
+        boxes.value = [{ x: arr[0], y: arr[3] }, { x: arr[0], y: arr[1] }, { x: arr[2], y: arr[1] }, { x: arr[2], y: arr[3] }]
+        proportion.value = (clientObj.value.height / (arr[3] - arr[1])).toFixed(2);
+        proportion1.value = (clientObj.value.width / (arr[0] - arr[2])).toFixed(2);
+        console.log("proportion.value", proportion.value)
+      }
       getCanvas();
     }
     if (e?.cmd == 'terminate_bodyposecontroller') {
@@ -155,21 +166,30 @@ const getCloseBodypose = () => {
  * 绘图
 */
 const getCanvas = () => {
-  const width = document.documentElement.clientWidth;
-  const height = document.documentElement.clientHeight;
   const canvas: any = canvasRef.value;
   const ctx = canvas.getContext('2d');
   // 清空整个画布
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   ctx.save(); // 保存当前状态
-
+  console.log("中心", boxes.value)
+  console.log("中心", (boxes.value[2].x + boxes.value[0].x) / 2, (boxes.value[3].y + boxes.value[1].y) / 2);
+  console.log("22222", (clientObj.value.height - ((boxes.value[3].y + boxes.value[1].y) / 2)))
+  console.log("1111", -((boxes.value[3].y + boxes.value[1].y) / 2) + (clientObj.value.height - ((boxes.value[3].y + boxes.value[1].y) / 2)))
+  console.log("2222",  -(boxes.value[3].y - boxes.value[1].y) / 2)
+  // 中心坐标点 (boxes.value[2] - boxes.value[0])/2, (boxes.value[3] - boxes.value[1])/2
+  // 屏幕中心点 clientObj.value.width / 2, clientObj.value.height / 2
   // 控制倍数
-  const scaleFactor = 3;
-  const bizi1 = bodyposeData.value[0][0];
-  const bizi2 = bodyposeData.value[1][0];
-  ctx.translate(bizi1 / 1.4, bizi2 / 4); // 可选：以中心为缩放原点
-  ctx.scale(scaleFactor, scaleFactor); // 缩放
-  ctx.translate(-bizi1 / 1.4, -bizi2 / 4); // 恢复原点（若之前移动过）
+  //ctx.translate(-(boxes.value[2] - boxes.value[0])/2, -(boxes.value[3] - boxes.value[1])/2); 
+  const scaleFactor = proportion.value;
+  ctx.scale(scaleFactor, scaleFactor); // 缩放，中心坐标点(boxes.value[2] - boxes.value[0])/2, (boxes.value[3] - boxes.value[1])/2
+  
+  //ctx.translate(-(clientObj.value.width / proportion1.value) + ((boxes.value[2].x + boxes.value[1].x) / proportion1.value/ 2), - (boxes.value[3].y - boxes.value[1].y) / 2);
+  // ctx.translate(-(boxes.value[2] - boxes.value[0])/2, -(boxes.value[3] - boxes.value[1])/2); 
+  // const bizi1 = bodyposeData.value[0][0];
+  // const bizi2 = bodyposeData.value[0][1];
+  // ctx.translate(bizi1 / 1.4, bizi2 / 4); // 可选：以中心为缩放原点
+  // ctx.scale(scaleFactor, scaleFactor); // 缩放
+  // ctx.translate(-bizi1 / 1.4, -bizi2 / 4); // 恢复原点（若之前移动过）
 
   // 画面位置
   // const targetX = bodyposeData.value[0][0];