14 changed files with 320 additions and 31 deletions
@ -0,0 +1,283 @@ |
|||||
|
<!-- |
||||
|
测试页面 |
||||
|
|
||||
|
目录位置：无 |
||||
|
功能概述：用于测试2d数据标注插件canvas-select的相关功能,包括基础图形绘制.编辑,数据保存.回显 |
||||
|
同时结合rtsp视频播放功能,完成基于视频资源的图形标注 |
||||
|
--> |
||||
|
<template> |
||||
|
<div class="box"> |
||||
|
<div class="left"> |
||||
|
<div> |
||||
|
<canvas ref="canvas" class="container" @mouseup="handleMouseUp" @mousedown="handleMouseDown" @mousemove="handleMouseMove"></canvas> |
||||
|
<!-- <video width="500" height="280" autoplay muted loop> |
||||
|
<source src="./assets/big_buck_bunny.mp4" type="video/mp4" /> |
||||
|
</video> --> |
||||
|
<div class="mpegPlayer" ref="mpegPlayer"></div> |
||||
|
</div> |
||||
|
<div> |
||||
|
<div class="flexBox"> |
||||
|
<label>rtsp流地址：</label> |
||||
|
<a-input type="text" v-model:value="rtspUrl"></a-input> |
||||
|
<a-button @click="open">打开rtsp</a-button> |
||||
|
<a-button @click="close">关闭rtsp</a-button> |
||||
|
</div> |
||||
|
<div v-if="msg">消息：rtsp流{{ msg }}</div> |
||||
|
<a-button type="primary" @click="change(0)"><ApiOutlined />关闭创建</a-button> |
||||
|
<a-button type="primary" @click="change(1)">创建矩形</a-button> |
||||
|
<a-button type="primary" @click="change(2)">创建多边形</a-button> |
||||
|
<a-button type="primary" @click="change(3)">创建标记点</a-button> |
||||
|
<a-button type="primary" @click="change(4)">创建线</a-button> |
||||
|
<a-button type="primary" @click="change(5)">创建圆</a-button> |
||||
|
<!-- <a-button type="primary" @click="toggleLineType()">切换线型-测试</a-button> --> |
||||
|
<br /> |
||||
|
<br /> |
||||
|
<a-button type="primary" @click="zoom(true)"><PlusOutlined />放大</a-button> |
||||
|
<a-button type="primary" @click="zoom(false)"><MinusOutlined />缩小</a-button> |
||||
|
<!-- <a-button type="primary" @click="fitting()">最佳适配比</a-button> --> |
||||
|
<a-button type="primary" @click="onFocus()"><AimOutlined />专注模式</a-button> |
||||
|
<br /> |
||||
|
<br /> |
||||
|
<a-button type="primary" danger @click="clear()"><FormatPainterOutlined />清除绘制</a-button> |
||||
|
<a-button type="primary" danger @click="lock()"><LinkOutlined />锁定/解锁</a-button> |
||||
|
<br /> |
||||
|
<br /> |
||||
|
<a-button type="primary" @click="save()"><FileDoneOutlined />保存</a-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="right"> |
||||
|
<pre> |
||||
|
1.设置 instance.createType 指定需要创建形状类型。 |
||||
|
|
||||
|
2.创建矩形时，按住鼠标左键拖动完成创建。 |
||||
|
|
||||
|
3.创建多边形时，鼠标左键单击添加点，双击闭合完成创建，Backspace退出创建，Escape退一步删除选择点。 |
||||
|
|
||||
|
4.创建折线时，鼠标左键单击添加点，双击完成创建，Backspace退出创建，Escape退一步删除选择点。 |
||||
|
|
||||
|
5.按住鼠标右键拖动画布。 |
||||
|
|
||||
|
6.鼠标滚轮缩放画布。 |
||||
|
|
||||
|
7.选中形状，Backspace删除。 |
||||
|
</pre |
||||
|
> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
import { onMounted, ref } from 'vue'; |
||||
|
import { |
||||
|
FileDoneOutlined, |
||||
|
FormatPainterOutlined, |
||||
|
LinkOutlined, |
||||
|
PlusOutlined, |
||||
|
MinusOutlined, |
||||
|
ApiOutlined, |
||||
|
AimOutlined, |
||||
|
} from '@ant-design/icons-vue'; |
||||
|
// 标注相关 |
||||
|
import CanvasSelect from 'canvas-select'; |
||||
|
// rtsp视频播放相关 |
||||
|
import MpegPlayer from 'jsmpeg-player'; |
||||
|
const { ipcRenderer } = require('electron'); |
||||
|
// rtsp流地址 |
||||
|
const rtspUrl = ref('rtsp://admin:hk123456@192.168.1.71:554/'); |
||||
|
const mpegPlayer = ref(); |
||||
|
// 消息 |
||||
|
const msg = ref(''); |
||||
|
// 播放容器 |
||||
|
let player: any = null; |
||||
|
//当前canvas实例 |
||||
|
const canvas = ref(null); |
||||
|
// 鼠标位置 |
||||
|
const mouseX = ref(0); |
||||
|
const mouseY = ref(0); |
||||
|
const isRightMouseDown = ref(false); |
||||
|
// |
||||
|
// 开启rtsp播放 |
||||
|
const open = () => { |
||||
|
const res = ipcRenderer.sendSync('openRtsp', rtspUrl.value); |
||||
|
if (res.code === 200) { |
||||
|
player = new MpegPlayer.VideoElement(mpegPlayer.value, res.ws); |
||||
|
} |
||||
|
msg.value = res.msg; |
||||
|
}; |
||||
|
// 关闭rtsp播放 |
||||
|
const close = () => { |
||||
|
const res = ipcRenderer.sendSync('closeRtsp', rtspUrl.value); |
||||
|
msg.value = res.msg; |
||||
|
}; |
||||
|
|
||||
|
// 导入静态图片 |
||||
|
const hideUrl = new URL('./assets/hide.png', import.meta.url).href; |
||||
|
//标注实例 |
||||
|
let instance: any = ref(null); |
||||
|
//图形标注列表 |
||||
|
const option: any = ref([]); |
||||
|
onMounted(() => { |
||||
|
// 载入绘图数据 |
||||
|
option.value = JSON.parse(localStorage.getItem('canvasData')!); |
||||
|
// 创建实例 |
||||
|
instance = new CanvasSelect('.container', hideUrl); |
||||
|
// 标签最大长度 |
||||
|
instance.labelMaxLen = 10; |
||||
|
// 禁用滚动缩放 |
||||
|
instance.scrollZoom = false; |
||||
|
// 图形数据赋值到实例 |
||||
|
instance.setData(option.value); |
||||
|
// 形状边线宽度 |
||||
|
instance.lineWidth = 2; |
||||
|
// 标签字体 |
||||
|
instance.labelFont = '12px Arial'; |
||||
|
// 标签填充颜色 |
||||
|
instance.labelFillStyle = '#fa4545'; |
||||
|
// 标签文字颜色 |
||||
|
instance.textFillStyle = '#fff'; |
||||
|
// 控制点半径 |
||||
|
instance.ctrlRadius = 4; |
||||
|
// 图片加载完成 |
||||
|
instance.on('load', (src: any) => { |
||||
|
console.log('image load', src); |
||||
|
}); |
||||
|
|
||||
|
// 添加 |
||||
|
instance.on('add', (info: any) => { |
||||
|
// 添加默认标签 |
||||
|
switch (instance.createType) { |
||||
|
case 1: |
||||
|
info.label = '矩形防区'; |
||||
|
break; |
||||
|
case 2: |
||||
|
info.label = '多边形防区'; |
||||
|
break; |
||||
|
case 3: |
||||
|
info.label = '标记点位'; |
||||
|
break; |
||||
|
case 4: |
||||
|
info.label = '报警界线'; |
||||
|
break; |
||||
|
case 5: |
||||
|
info.label = '圆形防区'; |
||||
|
break; |
||||
|
default: |
||||
|
info.label = '未定义'; |
||||
|
} |
||||
|
// 更新画布 |
||||
|
instance.update(); |
||||
|
}); |
||||
|
// 删除 |
||||
|
instance.on('delete', (info: any) => { |
||||
|
console.log('delete', info); |
||||
|
}); |
||||
|
// 选中 |
||||
|
instance.on('select', (shape: any) => { |
||||
|
console.log('select', shape); |
||||
|
}); |
||||
|
// 更新 |
||||
|
instance.on('updated', (result: any) => { |
||||
|
// console.log('标注结果', result); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
// 获取当前鼠标在画布上的位置 |
||||
|
function handleMouseMove(e) { |
||||
|
const rect = canvas.value.getBoundingClientRect(); |
||||
|
mouseX.value = e.clientX - rect.left; |
||||
|
mouseY.value = e.clientY - rect.top; |
||||
|
if (isRightMouseDown.value) { |
||||
|
// 在这里处理鼠标右键按住移动的逻辑 |
||||
|
// console.log('鼠标右键按住移动'); |
||||
|
// 可以根据需要执行其他操作 |
||||
|
console.log(instance); |
||||
|
} |
||||
|
} |
||||
|
// 鼠标抬起 |
||||
|
function handleMouseUp(e) { |
||||
|
if (e.button === 2) { |
||||
|
isRightMouseDown.value = false; |
||||
|
} |
||||
|
} |
||||
|
// 鼠标按下 |
||||
|
function handleMouseDown(e) { |
||||
|
if (e.button === 2) { |
||||
|
isRightMouseDown.value = true; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 选择绘制工具 |
||||
|
function change(num: any) { |
||||
|
instance.createType = num; |
||||
|
} |
||||
|
// 放大缩小画布 |
||||
|
function zoom(type: any) { |
||||
|
instance.setScale(type); |
||||
|
} |
||||
|
// 适配 |
||||
|
// function fitting() { |
||||
|
// instance.fitZoom(); |
||||
|
// } |
||||
|
// 专注模式 |
||||
|
function onFocus() { |
||||
|
instance.setFocusMode(!instance.focusMode); |
||||
|
} |
||||
|
//清除标注数据 |
||||
|
function clear() { |
||||
|
instance.setData([]); |
||||
|
} |
||||
|
// 锁定/解锁画布 |
||||
|
function lock() { |
||||
|
instance.lock = !instance.lock; |
||||
|
} |
||||
|
// 保存数据 |
||||
|
function save() { |
||||
|
// 保存绘制数据，用于回显 |
||||
|
// 清除所有激活状态 |
||||
|
instance.dataset.forEach((item) => { |
||||
|
item.active = false; |
||||
|
}); |
||||
|
console.log(JSON.stringify(instance.dataset)); |
||||
|
// 暂存数据到本地 |
||||
|
localStorage.setItem('canvasData', JSON.stringify(instance.dataset)); |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.box { |
||||
|
display: flex; |
||||
|
margin: 10px; |
||||
|
position: relative; |
||||
|
} |
||||
|
.container { |
||||
|
width: 800px; |
||||
|
height: 480px; |
||||
|
position: absolute; |
||||
|
z-index: 999; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
} |
||||
|
button { |
||||
|
margin-right: 3px; |
||||
|
} |
||||
|
|
||||
|
.flexBox { |
||||
|
display: flex; |
||||
|
height: 50px; |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
.flexBox input { |
||||
|
height: 30px; |
||||
|
width: 400px; |
||||
|
box-sizing: border-box; |
||||
|
padding-left: 8px; |
||||
|
} |
||||
|
.flexBox button { |
||||
|
height: 30px; |
||||
|
padding: 0 12px; |
||||
|
} |
||||
|
.mpegPlayer { |
||||
|
width: 800px; |
||||
|
height: 480px; |
||||
|
background: #000; |
||||
|
} |
||||
|
</style> |
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Loading…
Reference in new issue