重构：ROI选区界面改造 — 全图+自定义选区+可收起面板
RoiCanvas.vue: - 移除矩形绘制模式，保留多边形+鼠标跟随线+闭合预览 - 键盘事件：Esc取消、Ctrl+Z撤销上一顶点 - 支持 fullscreen 类型渲染和点击检测 - 绘制中底部浮动提示条 index.vue: - 工具栏：默认[全图][自定义选区]，绘制中[完成][撤销][取消] - 全图按钮一键创建覆盖整张图的ROI - 初始Canvas全宽，点击ROI后右侧面板滑出(60%/40%) - 面板关闭按钮+删除最后ROI时自动收起 - ROI标签显示全图/自定义/矩形
This commit is contained in:
@@ -18,9 +18,10 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
'draw-cancelled': [];
|
||||
'roi-deleted': [roiId: string];
|
||||
'roi-drawn': [data: { roi_type: string; coordinates: string }];
|
||||
'roi-selected': [roiId: string | null];
|
||||
'roi-deleted': [roiId: string];
|
||||
'snap-status': [ok: boolean];
|
||||
}>();
|
||||
|
||||
@@ -31,19 +32,20 @@ let ctx: CanvasRenderingContext2D | null = null;
|
||||
let canvasWidth = 0;
|
||||
let canvasHeight = 0;
|
||||
|
||||
const isDrawing = ref(false);
|
||||
let startPoint: { x: number; y: number } | null = null;
|
||||
let currentPoint: { x: number; y: number } | null = null;
|
||||
const polygonPoints = ref<{ x: number; y: number }[]>([]);
|
||||
let mouseMovePoint: { x: number; y: number } | null = null;
|
||||
const loading = ref(true);
|
||||
const errorMsg = ref('');
|
||||
|
||||
watch(() => props.rois, () => redraw(), { deep: true });
|
||||
watch(() => props.selectedRoiId, () => redraw());
|
||||
watch(() => props.drawMode, () => {
|
||||
watch(() => props.drawMode, (newVal) => {
|
||||
polygonPoints.value = [];
|
||||
isDrawing.value = false;
|
||||
mouseMovePoint = null;
|
||||
redraw();
|
||||
if (newVal && wrapper.value) {
|
||||
wrapper.value.focus();
|
||||
}
|
||||
});
|
||||
watch(() => props.snapUrl, () => {
|
||||
loading.value = true;
|
||||
@@ -86,7 +88,6 @@ function onImageError() {
|
||||
loading.value = false;
|
||||
errorMsg.value = '截图加载失败，请确认摄像头拉流地址是否有效';
|
||||
emit('snap-status', false);
|
||||
// 关键：截图失败也初始化 canvas，使 ROI 区域可见可操作
|
||||
nextTick(() => initCanvas());
|
||||
}
|
||||
|
||||
@@ -143,72 +144,88 @@ function getCanvasPoint(e: MouseEvent) {
|
||||
};
|
||||
}
|
||||
|
||||
// ---- 鼠标事件 ----
|
||||
|
||||
function onMouseDown(e: MouseEvent) {
|
||||
if (e.button !== 0) return;
|
||||
const pt = getCanvasPoint(e);
|
||||
|
||||
if (props.drawMode === 'rectangle') {
|
||||
isDrawing.value = true;
|
||||
startPoint = pt;
|
||||
currentPoint = pt;
|
||||
} else if (props.drawMode === 'polygon') {
|
||||
if (props.drawMode === 'polygon') {
|
||||
polygonPoints.value.push(pt);
|
||||
redraw();
|
||||
drawPolygonInProgress();
|
||||
} else {
|
||||
} else if (!props.drawMode) {
|
||||
const clickedRoi = findRoiAtPoint(pt);
|
||||
emit('roi-selected', clickedRoi?.roiId ?? null);
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseMove(e: MouseEvent) {
|
||||
if (!isDrawing.value || props.drawMode !== 'rectangle') return;
|
||||
currentPoint = getCanvasPoint(e);
|
||||
redraw();
|
||||
drawRectInProgress();
|
||||
}
|
||||
|
||||
function onMouseUp(e: MouseEvent) {
|
||||
if (!isDrawing.value || props.drawMode !== 'rectangle') return;
|
||||
isDrawing.value = false;
|
||||
const endPoint = getCanvasPoint(e);
|
||||
const x = Math.min(startPoint!.x, endPoint.x);
|
||||
const y = Math.min(startPoint!.y, endPoint.y);
|
||||
const w = Math.abs(endPoint.x - startPoint!.x);
|
||||
const h = Math.abs(endPoint.y - startPoint!.y);
|
||||
if (w > 0.01 && h > 0.01) {
|
||||
emit('roi-drawn', {
|
||||
roi_type: 'rectangle',
|
||||
coordinates: JSON.stringify({ x, y, w, h }),
|
||||
});
|
||||
}
|
||||
startPoint = null;
|
||||
currentPoint = null;
|
||||
if (props.drawMode !== 'polygon' || polygonPoints.value.length === 0) return;
|
||||
mouseMovePoint = getCanvasPoint(e);
|
||||
redraw();
|
||||
drawPolygonInProgress();
|
||||
}
|
||||
|
||||
function onDoubleClick() {
|
||||
if (props.drawMode === 'polygon' && polygonPoints.value.length >= 3) {
|
||||
emit('roi-drawn', {
|
||||
roi_type: 'polygon',
|
||||
coordinates: JSON.stringify(
|
||||
polygonPoints.value.map((p) => ({ x: p.x, y: p.y })),
|
||||
),
|
||||
});
|
||||
polygonPoints.value = [];
|
||||
redraw();
|
||||
finishPolygon();
|
||||
}
|
||||
}
|
||||
|
||||
function onContextMenu(e: MouseEvent) {
|
||||
e.preventDefault();
|
||||
const pt = getCanvasPoint(e);
|
||||
const roi = findRoiAtPoint(pt);
|
||||
if (roi?.roiId) {
|
||||
emit('roi-deleted', roi.roiId);
|
||||
if (props.drawMode === 'polygon' && polygonPoints.value.length >= 3) {
|
||||
finishPolygon();
|
||||
return;
|
||||
}
|
||||
if (!props.drawMode) {
|
||||
const pt = getCanvasPoint(e);
|
||||
const roi = findRoiAtPoint(pt);
|
||||
if (roi?.roiId) {
|
||||
emit('roi-deleted', roi.roiId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 键盘事件 ----
|
||||
|
||||
function onKeyDown(e: KeyboardEvent) {
|
||||
if (props.drawMode === 'polygon') {
|
||||
if (e.key === 'Escape') {
|
||||
polygonPoints.value = [];
|
||||
mouseMovePoint = null;
|
||||
emit('draw-cancelled');
|
||||
redraw();
|
||||
} else if ((e.ctrlKey && e.key === 'z') || e.key === 'Backspace') {
|
||||
e.preventDefault();
|
||||
if (polygonPoints.value.length > 0) {
|
||||
polygonPoints.value.pop();
|
||||
redraw();
|
||||
if (polygonPoints.value.length > 0) {
|
||||
drawPolygonInProgress();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 多边形完成（公开方法，供父组件调用） ----
|
||||
|
||||
function finishPolygon() {
|
||||
if (polygonPoints.value.length < 3) return;
|
||||
const points = polygonPoints.value.map((p) => ({ x: p.x, y: p.y }));
|
||||
emit('roi-drawn', {
|
||||
roi_type: 'polygon',
|
||||
coordinates: JSON.stringify(points),
|
||||
});
|
||||
polygonPoints.value = [];
|
||||
mouseMovePoint = null;
|
||||
redraw();
|
||||
}
|
||||
|
||||
// ---- ROI 查找 ----
|
||||
|
||||
function findRoiAtPoint(pt: { x: number; y: number }) {
|
||||
for (let i = props.rois.length - 1; i >= 0; i--) {
|
||||
const roi = props.rois[i]!;
|
||||
@@ -217,7 +234,8 @@ function findRoiAtPoint(pt: { x: number; y: number }) {
|
||||
typeof roi.coordinates === 'string'
|
||||
? JSON.parse(roi.coordinates)
|
||||
: roi.coordinates;
|
||||
if (roi.roiType === 'rectangle') {
|
||||
const type = roi.roiType;
|
||||
if (type === 'rectangle' || type === 'fullscreen') {
|
||||
if (
|
||||
pt.x >= coords.x &&
|
||||
pt.x <= coords.x + coords.w &&
|
||||
@@ -226,7 +244,7 @@ function findRoiAtPoint(pt: { x: number; y: number }) {
|
||||
) {
|
||||
return roi;
|
||||
}
|
||||
} else if (roi.roiType === 'polygon') {
|
||||
} else if (type === 'polygon') {
|
||||
if (isPointInPolygon(pt, coords)) return roi;
|
||||
}
|
||||
} catch {
|
||||
@@ -254,6 +272,8 @@ function isPointInPolygon(
|
||||
return inside;
|
||||
}
|
||||
|
||||
// ---- 绘制 ----
|
||||
|
||||
function redraw() {
|
||||
if (!ctx) return;
|
||||
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
||||
@@ -266,12 +286,13 @@ function redraw() {
|
||||
: roi.coordinates;
|
||||
const color = roi.color || '#FF0000';
|
||||
const isSelected = roi.roiId === props.selectedRoiId;
|
||||
const type = roi.roiType;
|
||||
|
||||
ctx!.strokeStyle = color;
|
||||
ctx!.lineWidth = isSelected ? 3 : 2;
|
||||
ctx!.fillStyle = `${color}33`;
|
||||
|
||||
if (roi.roiType === 'rectangle') {
|
||||
if (type === 'rectangle' || type === 'fullscreen') {
|
||||
const rx = coords.x * canvasWidth;
|
||||
const ry = coords.y * canvasHeight;
|
||||
const rw = coords.w * canvasWidth;
|
||||
@@ -283,7 +304,7 @@ function redraw() {
|
||||
ctx!.font = '12px Arial';
|
||||
ctx!.fillText(roi.name, rx + 4, ry + 14);
|
||||
}
|
||||
} else if (roi.roiType === 'polygon') {
|
||||
} else if (type === 'polygon') {
|
||||
ctx!.beginPath();
|
||||
coords.forEach((p: { x: number; y: number }, idx: number) => {
|
||||
const px = p.x * canvasWidth;
|
||||
@@ -310,19 +331,6 @@ function redraw() {
|
||||
});
|
||||
}
|
||||
|
||||
function drawRectInProgress() {
|
||||
if (!startPoint || !currentPoint || !ctx) return;
|
||||
const x = Math.min(startPoint.x, currentPoint.x) * canvasWidth;
|
||||
const y = Math.min(startPoint.y, currentPoint.y) * canvasHeight;
|
||||
const w = Math.abs(currentPoint.x - startPoint.x) * canvasWidth;
|
||||
const h = Math.abs(currentPoint.y - startPoint.y) * canvasHeight;
|
||||
ctx.strokeStyle = '#00FF00';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.setLineDash([5, 5]);
|
||||
ctx.strokeRect(x, y, w, h);
|
||||
ctx.setLineDash([]);
|
||||
}
|
||||
|
||||
function drawPolygonInProgress() {
|
||||
if (polygonPoints.value.length < 1 || !ctx) return;
|
||||
ctx.strokeStyle = '#00FF00';
|
||||
@@ -335,15 +343,31 @@ function drawPolygonInProgress() {
|
||||
if (idx === 0) ctx!.moveTo(px, py);
|
||||
else ctx!.lineTo(px, py);
|
||||
ctx!.fillStyle = '#00FF00';
|
||||
ctx!.fillRect(px - 3, py - 3, 6, 6);
|
||||
ctx!.fillRect(px - 4, py - 4, 8, 8);
|
||||
});
|
||||
// 鼠标跟随线
|
||||
if (mouseMovePoint) {
|
||||
ctx.lineTo(
|
||||
mouseMovePoint.x * canvasWidth,
|
||||
mouseMovePoint.y * canvasHeight,
|
||||
);
|
||||
}
|
||||
// 首尾闭合预览线
|
||||
if (polygonPoints.value.length >= 3) {
|
||||
const first = polygonPoints.value[0]!;
|
||||
const last = mouseMovePoint || polygonPoints.value[polygonPoints.value.length - 1]!;
|
||||
ctx.moveTo(last.x * canvasWidth, last.y * canvasHeight);
|
||||
ctx.lineTo(first.x * canvasWidth, first.y * canvasHeight);
|
||||
}
|
||||
ctx.stroke();
|
||||
ctx.setLineDash([]);
|
||||
}
|
||||
|
||||
defineExpose({ polygonPoints, finishPolygon, redraw, drawPolygonInProgress });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="wrapper" class="roi-canvas-wrapper">
|
||||
<div ref="wrapper" class="roi-canvas-wrapper" tabindex="0" @keydown="onKeyDown">
|
||||
<img
|
||||
v-if="snapUrl"
|
||||
:src="snapUrl"
|
||||
@@ -358,12 +382,16 @@ function drawPolygonInProgress() {
|
||||
<canvas
|
||||
ref="canvas"
|
||||
class="roi-overlay"
|
||||
:class="{ drawing: drawMode === 'polygon' }"
|
||||
@mousedown="onMouseDown"
|
||||
@mousemove="onMouseMove"
|
||||
@mouseup="onMouseUp"
|
||||
@dblclick="onDoubleClick"
|
||||
@contextmenu="onContextMenu"
|
||||
/>
|
||||
<!-- 绘制中浮动提示条 -->
|
||||
<div v-if="drawMode === 'polygon'" class="draw-hint-bar">
|
||||
单击添加顶点 | 双击或右键完成选区 | Esc取消 | Ctrl+Z撤销
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -374,6 +402,7 @@ function drawPolygonInProgress() {
|
||||
height: 100%;
|
||||
min-height: 400px;
|
||||
background: #000;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.bg-image {
|
||||
@@ -396,6 +425,24 @@ function drawPolygonInProgress() {
|
||||
|
||||
.roi-overlay {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.roi-overlay.drawing {
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.draw-hint-bar {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
color: #fff;
|
||||
padding: 6px 16px;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user