日常开发

src/components/OnlineFaceWindow/index.vue

@@ -140,6 +140,8 @@ const getInit = async () => {
     }
     if (e?.cmd == 'terminate_facecontroller') {
       if (e?.code == 0) {
+        let handcontroller_id = deviceInfo.value.handcontroller_id;
+        terminateFace(handcontroller_id);
         closeWS();
         faceState.value = false;
       }

src/views/game/fruit.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-<canvas ref="canvasRef" width="800" height="600"></canvas>
+    <canvas ref="canvasRef" :width="clientObj.width" :height="clientObj.height"></canvas>
   </div>
 </template>
 
@@ -20,9 +20,10 @@ const data = reactive<any>({
   againNum: 0,//再次启动次数
   againTimer: null,//定时状态
   wsState: false,//WS状态
+  clientObj: {},//浏览器对象
 });
 
-const { bodyposeData, bodyposeState, parameter, deviceInfo, againNum, againTimer, wsState } = toRefs(data);
+const { bodyposeData, bodyposeState, parameter, deviceInfo, againNum, againTimer, wsState, clientObj } = toRefs(data);
 
 /**
  * 初始化
@@ -104,7 +105,6 @@ const getInit = async () => {
       }
     }
     if (e?.type == 'bodyposecontroller_result') {
-      clearCanvas();
       let arr = e.data.result.keypoints;
       let result = [];
       for (let i = 0; i < arr.length; i += 3) {
@@ -112,7 +112,7 @@ const getInit = async () => {
       }
       console.log("result", result)
       bodyposeData.value = result;
-      huitu();
+      getCanvas();
     }
     if (e?.cmd == 'terminate_bodyposecontroller') {
       if (e?.code == 0) {
@@ -154,28 +154,86 @@ const getCloseBodypose = () => {
 /**
  * 绘图
 */
-const huitu = () => {
-  const canvas = canvasRef.value;
+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(); // 保存当前状态
 
+  // 控制倍数
+  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); // 恢复原点（若之前移动过）
+
+  // 画面位置
+  // 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 centerX = (point1.x + point2.x) / 2; // 椭圆中心X
+  const centerY = (point1.y + point2.y) / 2; // 椭圆中心Y
+  const distance = Math.sqrt(
+    Math.pow(point2.x - point1.x, 2) +
+    Math.pow(point2.y - point1.y, 2)
+  ); // 两个焦点之间的距离
+  const radiusX = distance * 0.5; // 水平半径（可调整）
+  const radiusY = distance * 0.6; // 垂直半径（可调整）
+  // 1. 绘制填充椭圆
+  ctx.beginPath();
+  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 => {
+  bodyposeData.value.forEach((point: any) => {
     const [x, y] = point;
     ctx.beginPath();
     ctx.arc(x, y, 5, 0, Math.PI * 2); // 绘制半径为5的圆点
     ctx.fillStyle = 'red';
     ctx.fill();
+    ctx.lineWidth = 1;
     ctx.stroke();
   });
+  // 根据点关系连线
+  const arr = [[10, 8], [8, 6], [6, 5], [5, 7], [7, 9], [6, 12], [5, 11], [12, 11], [12, 14], [14, 16], [11, 13], [13, 15]]
+  arr.forEach((point: any) => {
+    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] };
+    // 绘制连线
+    ctx.beginPath();
+    ctx.moveTo(dian1.x, dian1.y); // 起点
+    ctx.lineTo(dian2.x, dian2.y); // 终点
+    ctx.strokeStyle = 'red'; // 线条颜色
+    ctx.lineWidth = 3; // 线条宽度
+    ctx.stroke(); // 描边
+  });
+  ctx.restore(); // 恢复状态
 };
 
-    const clearCanvas = () => {
-      const canvas = canvasRef.value;
-      const ctx = canvas.getContext('2d');
-      ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空整个画布
-    };
-
 onBeforeMount(() => {
+  clientObj.value = {
+    width: document.documentElement.clientWidth,
+    height: document.documentElement.clientHeight,
+  }
   getInit();
 });