日常开发

src/views/game/fruit.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-
+<canvas ref="canvasRef" width="800" height="600"></canvas>
   </div>
 </template>
 
@@ -10,6 +10,7 @@ import { useWebSocket } from '@/utils/bodyposeWs';
 const { proxy } = getCurrentInstance() as any;
 const router = useRouter();
 const { bodyposeWs, startDevice, checkBodypose, openBodypose, terminateBodypose, suspendBodypose, resumeBodypose, getBodyposeState, closeWS } = useWebSocket();
+const canvasRef = ref(null);
 
 const data = reactive<any>({
   bodyposeData: {},//姿态信息
@@ -103,8 +104,15 @@ const getInit = async () => {
       }
     }
     if (e?.type == 'bodyposecontroller_result') {
-      console.log("data", e.data)
-      bodyposeData.value = e.data;
+      clearCanvas();
+      let arr = e.data.result.keypoints;
+      let result = [];
+      for (let i = 0; i < arr.length; i += 3) {
+        result.push(arr.slice(i, i + 2));
+      }
+      console.log("result", result)
+      bodyposeData.value = result;
+      huitu();
     }
     if (e?.cmd == 'terminate_bodyposecontroller') {
       if (e?.code == 0) {
@@ -143,6 +151,30 @@ const getCloseBodypose = () => {
   }, 3000)
 };
 
+/**
+ * 绘图
+*/
+const huitu = () => {
+  const canvas = canvasRef.value;
+  const ctx = canvas.getContext('2d');
+
+  // 绘制每个点
+  bodyposeData.value.forEach(point => {
+    const [x, y] = point;
+    ctx.beginPath();
+    ctx.arc(x, y, 5, 0, Math.PI * 2); // 绘制半径为5的圆点
+    ctx.fillStyle = 'red';
+    ctx.fill();
+    ctx.stroke();
+  });
+};
+
+    const clearCanvas = () => {
+      const canvas = canvasRef.value;
+      const ctx = canvas.getContext('2d');
+      ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空整个画布
+    };
+
 onBeforeMount(() => {
   getInit();
 });