zhangchao/Visualize-electronic-fences
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat drawArea

Browse Source
This commit is contained in:
Ironsp
2026-05-22 08:27:46 +08:00
parent 12a8ee4991
commit 8a8e2b0c65
1 changed files with 13 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/views/equipmentList/list.vue
View File

@@ -404,30 +404,19 @@ const onMonitorDrawClick = (e: MouseEvent) => {
monitorDrawCollecting.value = false; monitorDrawCollecting.value = false;
monitorDrawPoints.value = []; monitorDrawPoints.value = [];
const minVx = Math.min(v1.vx, v2.vx); // 计算两个点相对于video的千分比坐标
const maxVx = Math.max(v1.vx, v2.vx); const point1RightPctOfWidth = ((VW - v1.vx) / VW) * 1000;
const minVy = Math.min(v1.vy, v2.vy); const point1TopPctOfHeight = (v1.vy / VH) * 1000;
const maxVy = Math.max(v1.vy, v2.vy); const point2RightPctOfWidth = ((VW - v2.vx) / VW) * 1000;
const rw = Math.max(maxVx - minVx, 1); const point2TopPctOfHeight = (v2.vy / VH) * 1000;
const rh = Math.max(maxVy - minVy, 1);
const firstTopPctOfHeight = (v1.vy / VH) * 100;
const firstRightPctOfWidth = ((VW - v1.vx) / VW) * 100;
const rectWidthPctOfWidth = (rw / VW) * 100;
const rectHeightPctOfHeight = (rh / VH) * 100;
payload.value = { payload.value = {
// videoIntrinsicSize: { width: VW, height: VH }, x1: Number(point1RightPctOfWidth.toFixed(4)),
// firstPointTopOffset_pctOfVideoHeight: Number(firstTopPctOfHeight.toFixed(4)), y1: Number(point1TopPctOfHeight.toFixed(4)),
// firstPointDistanceToRight_pctOfVideoWidth: Number(firstRightPctOfWidth.toFixed(4)), x2: Number(point2RightPctOfWidth.toFixed(4)),
// rectWidth_pctOfVideoWidth: Number(rectWidthPctOfWidth.toFixed(4)), y2: Number(point2TopPctOfHeight.toFixed(4))
// rectHeight_pctOfVideoHeight: Number(rectHeightPctOfHeight.toFixed(4))
x: Number(firstRightPctOfWidth.toFixed(4)),
y: Number(firstTopPctOfHeight.toFixed(4)),
w: Number(rectWidthPctOfWidth.toFixed(4)),
h: Number(rectHeightPctOfHeight.toFixed(4))
}; };
console.log('[监控区域] 四点百分比', payload.value); console.log('[监控区域] 两点千分比坐标', payload.value);
//proxy?.$modal.msgSuccess(`已采集(相对原视频)：x右距${payload.value.x}% y顶距${payload.value.y}% w框宽${payload.value.w}% h框高${payload.value.h}%`); //proxy?.$modal.msgSuccess(`已采集(相对原视频)：x右距${payload.value.x}% y顶距${payload.value.y}% w框宽${payload.value.w}% h框高${payload.value.h}%`);
seeSee.value = 1; seeSee.value = 1;
}; };
@@ -437,6 +426,9 @@ const clearImage = () => {
console.log(payload.value); console.log(payload.value);
drawStart.value = false; drawStart.value = false;
seeSee.value = 0; seeSee.value = 0;
// 清除绘制的矩形图案
monitorRectPx.value = null;
monitorDrawPoints.value = [];
}; };
const saveImage = async () => { const saveImage = async () => {