前端 图片上鼠标画矩形框，标注文字，任意删除

效果：

页面描述：

对给定的几张图片，每张能用鼠标在图上画框，标注相关文字，框的颜色和文字内容能自定义改变，能删除任意画过的框。

实现思路：

1、对给定的这几张图片，用分页器绑定展示，能选择图片；

2、图片上绑定事件@mousedown鼠标按下——开始画矩形、@mousemove鼠标移动——绘制中临时画矩形、@mouseup鼠标抬起——结束画矩形重新渲染；

开始画矩形：鼠标按下，记录鼠标按下的位置。遍历标签数组，找到check值为true的标签，用其样式和名字创建新的标签，加入该图片的矩形框们的数组。注意，监听鼠标如果是按下后马上抬起，结束标注。

更新矩形：识别到新的标签存在，鼠标移动时监听移动距离,更新当前矩形宽高，用canvas绘制实时临时矩形。

结束画矩形：刷新该图片的矩形框们的数组，触发重新渲染。

3、在图片上v-for遍历渲染矩形框，盒子绑定动态样式改变宽高；

4、右侧能添加、修改矩形框颜色和文字；

5、列举出每个矩形框名称，能选择进行删除，还能一次清空；

<template>
<div class="allbody"><div class="body-top"><button class="top-item2" @click="clearAnnotations">清空</button></div><div class="body-btn"><div class="btn-content"><div class="image-container"><!-- <img :src="imageUrl" alt="Character Image" /> --><img :src="state.imageUrls[state.currentPage - 1]" @mousedown="startAnnotation" @mousemove="updateAnnotation" @mouseup="endAnnotation" /><!-- 使用canvas覆盖在图片上方，用于绘制临时矩形 --><canvas ref="annotationCanvas"></canvas><div v-for="annotation in annotations[state.currentPage - 1]" :key="annotation.id" class="annotation" :style="annotationStyle(annotation)"><div class="label">{{ annotation.label }}</div></div></div><Paginationv-model:current="state.currentPage"v-model:page-size="state.pageSize"show-quick-jumper:total="state.imageUrls.length":showSizeChanger="false":show-total="total => `共 ${total} 张`" /></div><div class="sidebar"><div class="sidebar-title">标签</div><div class="tags"><div class="tags-item" v-for="(tags, index2) in state.tagsList" :key="index2" @click="checkTag(index2)"><div class="tags-checkbox"><div :class="tags.check === true ? 'checkbox-two' : 'notcheckbox-two'"></div></div><div class="tags-right"><input class="tags-color" type="color" v-model="tags.color" /><input type="type" class="tags-input" v-model="tags.name" /><button class="tags-not" @click="deleteTag(index2)"><DeleteOutlined style="color: #ff0202" /></button></div></div></div><div class="sidebar-btn"><button class="btn-left" @click="addTags()">添加</button></div><div class="sidebar-title">数据</div><div class="sidebars"><div class="sidebar-item" v-for="(annotation, index) in annotations[state.currentPage - 1]" :key="annotation.id"><div class="sidebar-item-font">{{ index + 1 }}.{{ annotation.name }}</div><button class="sidebar-item-icon" @click="removeAnnotation(annotation.id)"><DeleteOutlined style="color: #ff0202" /></button> </div></div></div></div></div>
</template>
<script lang="ts" setup>import { DeleteOutlined } from '@ant-design/icons-vue';import { Pagination } from 'ant-design-vue';interface State {tagsList: any;canvasX: number;canvasY: number;currentPage: number;pageSize: number;imageUrls: string[];};const state = reactive<State>({tagsList: [], // 标签列表canvasX: 0,canvasY: 0,currentPage: 1,pageSize: 1,imageUrls: [apiUrl.value + '/api/File/Image/annexpic/20241203Q9NHJ.jpg', apiUrl.value + '/api/file/Image/document/20241225QBYXZ.jpg'],});interface Annotation {id: string;name: string;x: number;y: number;width: number;height: number;color: string;label: string;border: string;};const annotations = reactive<Array<Annotation[]>>([[]]);let currentAnnotation: Annotation | null = null;//开始标注function startAnnotation(event: MouseEvent) {// 获取当前选中的标签var tagsCon = { id: 1, check: true, color: '#000000', name: '安全帽' };// 遍历标签列表，获取当前选中的标签for (var i = 0; i < state.tagsList.length; i++) {if (state.tagsList[i].check) {tagsCon.id = state.tagsList[i].id;tagsCon.check = state.tagsList[i].check;tagsCon.color = state.tagsList[i].color;tagsCon.name = state.tagsList[i].name;}}// 创建新的标注currentAnnotation = {id: crypto.randomUUID(),name: tagsCon.name,x: event.offsetX,y: event.offsetY,width: 0,height: 0,color: '#000000',label: (annotations[state.currentPage - 1].length || 0) + 1 + tagsCon.name,border: tagsCon.color,};annotations[state.currentPage - 1].push(currentAnnotation);//记录鼠标按下的位置state.canvasX = event.offsetX;state.canvasY = event.offsetY;//监听鼠标如果是按下后马上抬起，结束标注const mouseupHandler = () => {endAnnotation();window.removeEventListener('mouseup', mouseupHandler);};window.addEventListener('mouseup', mouseupHandler);}//更新标注function updateAnnotation(event: MouseEvent) {if (currentAnnotation) {//更新当前标注的宽高,为负数时，鼠标向左或向上移动currentAnnotation.width = event.offsetX - currentAnnotation.x;currentAnnotation.height = event.offsetY - currentAnnotation.y;}//如果正在绘制中，更新临时矩形的位置if (annotationCanvas.value) {const canvas = annotationCanvas.value;//取得类名为image-container的div的宽高const imageContainer = document.querySelector('.image-container');canvas.width = imageContainer?.clientWidth || 800;canvas.height = imageContainer?.clientHeight || 534;const context = canvas.getContext('2d');if (context) {context.clearRect(0, 0, canvas.width, canvas.height);context.strokeStyle = currentAnnotation?.border || '#000000';context.lineWidth = 2;context.strokeRect(state.canvasX, state.canvasY, currentAnnotation?.width || 0, currentAnnotation?.height || 0);}}}function endAnnotation() {//刷新annotations[state.currentPage - 1]，触发重新渲染annotations[state.currentPage - 1] = annotations[state.currentPage - 1].slice();currentAnnotation = null;}function annotationStyle(annotation: Annotation) {//如果宽高为负数，需要调整left和top的位置const left = annotation.width < 0 ? annotation.x + annotation.width : annotation.x;const top = annotation.height < 0 ? annotation.y + annotation.height : annotation.y;return {left: `${left}px`,top: `${top}px`,width: `${Math.abs(annotation.width)}px`,height: `${Math.abs(annotation.height)}px`,border: `2px solid ${annotation.border}`,};}// 选择标签function checkTag(index2: number) {state.tagsList.forEach((item, index) => {if (index === index2) {item.check = true;} else {item.check = false;}});}// 删除标签function deleteTag(index: number) {state.tagsList.splice(index, 1);}function addTags() {state.tagsList.push({ id: state.tagsList.length + 1, check: false, color: '#000000', name: '' });}// 移除某个标注function removeAnnotation(id: string) {const index = annotations[state.currentPage - 1].findIndex(a => a.id === id);if (index !== -1) {annotations[state.currentPage - 1].splice(index, 1);}}// 清空所有标注function clearAnnotations() {annotations[state.currentPage - 1].splice(0, annotations[state.currentPage - 1].length);}onMounted(() => {for (let i = 0; i < state.imageUrls.length; i++) {annotations.push([]);}});</script>
<style>.body-top {display: flex;flex-direction: row;align-items: center;justify-content: center;margin-bottom: 10px;width: 85%;}.top-item1 {width: 70px;height: 28px;line-height: 26px;text-align: center;background-color: #028dff;border: 1px solid #028dff;border-radius: 5px;font-size: 14px;color: #fff;margin-left: 20px;}.top-item2 {width: 70px;height: 28px;line-height: 26px;text-align: center;background-color: rgb(255, 2, 2);border: 1px solid rgb(255, 2, 2);border-radius: 5px;font-size: 14px;color: #fff;margin-left: 20px;}.body-btn {margin: 0;padding: 10px 13px 0 0;min-height: 630px;display: flex;background-color: #f5f5f5;}.btn-content {flex-grow: 1;padding: 10px;box-sizing: border-box;display: flex;flex-direction: column;align-items: center;}.image-container {height: 500px;margin: 40px;}.image-container img {height: 500px !important;}.ant-pagination {margin-bottom: 18px;}.number-input {width: 70px;border: 1px solid #ccc;border-radius: 4px;text-align: center;font-size: 16px;background-color: #f9f9f9;outline: none;color: #66afe9;}.sidebar {display: flex;flex-direction: column;width: 280px;height: 640px;background-color: #fff;padding: 10px;border-radius: 7px;}.sidebar-title {font-size: 16px;font-weight: 600;margin-bottom: 10px;}.sidebars {overflow: auto;}.sidebar .tags {margin-bottom: 10px;}.tags-item {display: flex;flex-direction: row;align-items: center;}.tags-checkbox {width: 24px;height: 24px;border-radius: 50px;border: 1px solid #028dff;display: flex;flex-direction: column;align-items: center;justify-content: center;margin-right: 7px;}.checkbox-two {background-color: #028dff;width: 14px;height: 14px;border-radius: 50px;}.notcheckbox-two {width: 14px;height: 14px;border-radius: 50px;border: 1px solid #028dff;}.tags-right {display: flex;flex-direction: row;align-items: center;background-color: #f5f5f5;border-radius: 5px;padding: 5px;width: 90%;}.tags-color {width: 26px;height: 26px;border-radius: 5px;}.tags-input {border: 1px solid #fff;width: 153px;margin: 0 10px;}.tags-not {border: 1px solid #f5f5f5;font-size: 12px;}.sidebar-btn {display: flex;flex-direction: row;align-items: center;justify-content: right;}.btn-left {width: 60px;height: 28px;line-height: 26px;text-align: center;border: 1px solid #028dff;border-radius: 5px;font-size: 14px;color: #028dff;}.btn-right {width: 60px;height: 28px;line-height: 26px;text-align: center;background-color: #028dff;border: 1px solid #028dff;border-radius: 5px;font-size: 14px;color: #fff;margin-left: 10px;}.sidebar-item {display: flex;justify-content: space-between;align-items: center;padding-right: 2px;}.sidebar-item-font {margin-right: 10px;}.sidebar-item-icon {font-size: 12px;border: 1px solid #fff;}.image-annotator {display: flex;height: 100%;}.image-container {flex: 1;position: relative;overflow: auto;}.image-container img {max-width: 100%;height: auto;}.annotation {position: absolute;box-sizing: border-box;}canvas {position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none; /* 防止遮挡鼠标事件 */}
</style>