日常开发

src/views/game/humanBody.vue

@@ -23,10 +23,9 @@ const data = reactive<any>({
   clientObj: {},//浏览器对象
   boxes: [],//四个点坐标
   proportion: null,//人框和屏幕比例
-  proportion1: null,//人框和屏幕比例
 });
 
-const { bodyposeData, bodyposeState, parameter, deviceInfo, againNum, againTimer, wsState, clientObj, boxes, proportion,proportion1 } = toRefs(data);
+const { bodyposeData, bodyposeState, parameter, deviceInfo, againNum, againTimer, wsState, clientObj, boxes, proportion } = toRefs(data);
 
 /**
  * 初始化
@@ -47,6 +46,7 @@ const getInit = async () => {
     return false;
   }
   speckText("正在姿态识别");
+  proxy?.$modal.msgWarning(`正在姿态识别`);
   bodyposeWs((e: any) => {
     console.log("bodyposeWS", e)
     if (e?.wksid) {
@@ -116,13 +116,13 @@ const getInit = async () => {
       console.log("result", result)
       bodyposeData.value = result;
       if (boxes.value.length == 0) {
-        speckText("识别成功！");
+        speckText("识别成功");
+        proxy?.$modal.msgWarning(`识别成功`);
         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') {
@@ -170,37 +170,37 @@ const getCanvas = () => {
   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
-  // 控制倍数
-  //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); // 恢复原点（若之前移动过）
+  // 保存当前状态 
+  ctx.save();
+  function calculateOffset(a: any, b: any) {
+    return {
+      x: b.x - a.x,
+      y: b.y - a.y
+    };
+  }
+  const pointA = { x: clientObj.value.width / 2, y: clientObj.value.height / 2 };
+  const pointB = { x: (boxes.value[2].x + boxes.value[0].x) / 2, y: (boxes.value[3].y + boxes.value[1].y) / 2 };
+  const offset = calculateOffset(pointA, pointB);
+  ctx.translate(-offset.x, -offset.y);
+  // console.log("Canvas分辨率", clientObj.value);
+  // console.log("人体图片四点坐标", boxes.value)
+  // console.log("Canvas中心", pointA);
+  // console.log("人体中心", pointB);
+  // console.log("offset", offset)
+  // console.log("proportion.value",proportion.value)
+  const originalPoints = bodyposeData.value;
+  // 计算缩放后坐标
+  const postData = originalPoints.map((point: any) => {
+    const newX = (point[0] - pointB.x) * proportion.value + pointB.x;
+    const newY = (point[1] - pointB.y) * proportion.value + pointB.y;
+    return [newX, newY];
+  });
+  // console.log("原始坐标：", originalPoints);
+  // console.log("缩放后坐标：", postData);
 
-  // 画面位置
-  // const targetX = bodyposeData.value[0][0];
-  // const targetY = bodyposeData.value[0][1];
-  // ctx.translate(targetX, targetY);
-  // 应用缩放
-  // const scaleFactor = 1.2;
-  // ctx.scale(scaleFactor, scaleFactor);
   //绘制头部
-  const point1 = { x: bodyposeData.value[4][0], y: bodyposeData.value[4][1] };
-  const point2 = { x: bodyposeData.value[3][0], y: bodyposeData.value[3][1] };
+  const point1 = { x: postData[4][0], y: postData[4][1] };
+  const point2 = { x: postData[3][0], y: postData[3][1] };
   // 计算椭圆参数
   const centerX = (point1.x + point2.x) / 2; // 椭圆中心X
   const centerY = (point1.y + point2.y) / 2; // 椭圆中心Y
@@ -215,13 +215,12 @@ const getCanvas = () => {
   ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, Math.PI * 2);
   ctx.fillStyle = 'red'; // 填充颜色
   ctx.fill(); // 填充
-
   // 2. 绘制边框
   ctx.strokeStyle = 'red';
   ctx.lineWidth = 5;
   ctx.stroke();
   // 绘制每个点
-  bodyposeData.value.forEach((point: any) => {
+  postData.forEach((point: any) => {
     const [x, y] = point;
     ctx.beginPath();
     ctx.arc(x, y, 5, 0, Math.PI * 2); // 绘制半径为5的圆点
@@ -236,8 +235,8 @@ const getCanvas = () => {
     let index1 = point[0];
     let index2 = point[1];
     //连线
-    const dian1 = { x: bodyposeData.value[index1][0], y: bodyposeData.value[index1][1] };
-    const dian2 = { x: bodyposeData.value[index2][0], y: bodyposeData.value[index2][1] };
+    const dian1 = { x: postData[index1][0], y: postData[index1][1] };
+    const dian2 = { x: postData[index2][0], y: postData[index2][1] };
     // 绘制连线
     ctx.beginPath();
     ctx.moveTo(dian1.x, dian1.y); // 起点