|
@@ -1,6 +1,6 @@
|
|
<template>
|
|
<template>
|
|
<div>
|
|
<div>
|
|
-<canvas ref="canvasRef" width="800" height="600"></canvas>
|
|
|
|
|
|
+ <canvas ref="canvasRef" :width="clientObj.width" :height="clientObj.height"></canvas>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -20,9 +20,10 @@ const data = reactive<any>({
|
|
againNum: 0,//再次启动次数
|
|
againNum: 0,//再次启动次数
|
|
againTimer: null,//定时状态
|
|
againTimer: null,//定时状态
|
|
wsState: false,//WS状态
|
|
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') {
|
|
if (e?.type == 'bodyposecontroller_result') {
|
|
- clearCanvas();
|
|
|
|
let arr = e.data.result.keypoints;
|
|
let arr = e.data.result.keypoints;
|
|
let result = [];
|
|
let result = [];
|
|
for (let i = 0; i < arr.length; i += 3) {
|
|
for (let i = 0; i < arr.length; i += 3) {
|
|
@@ -112,7 +112,7 @@ const getInit = async () => {
|
|
}
|
|
}
|
|
console.log("result", result)
|
|
console.log("result", result)
|
|
bodyposeData.value = result;
|
|
bodyposeData.value = result;
|
|
- huitu();
|
|
|
|
|
|
+ getCanvas();
|
|
}
|
|
}
|
|
if (e?.cmd == 'terminate_bodyposecontroller') {
|
|
if (e?.cmd == 'terminate_bodyposecontroller') {
|
|
if (e?.code == 0) {
|
|
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');
|
|
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;
|
|
const [x, y] = point;
|
|
ctx.beginPath();
|
|
ctx.beginPath();
|
|
ctx.arc(x, y, 5, 0, Math.PI * 2); // 绘制半径为5的圆点
|
|
ctx.arc(x, y, 5, 0, Math.PI * 2); // 绘制半径为5的圆点
|
|
ctx.fillStyle = 'red';
|
|
ctx.fillStyle = 'red';
|
|
ctx.fill();
|
|
ctx.fill();
|
|
|
|
+ ctx.lineWidth = 1;
|
|
ctx.stroke();
|
|
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(() => {
|
|
onBeforeMount(() => {
|
|
|
|
+ clientObj.value = {
|
|
|
|
+ width: document.documentElement.clientWidth,
|
|
|
|
+ height: document.documentElement.clientHeight,
|
|
|
|
+ }
|
|
getInit();
|
|
getInit();
|
|
});
|
|
});
|
|
|
|
|