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

效果：

页面描述：

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

实现思路：

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

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

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

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

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

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

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

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

  1. <template>
  2. <div class="allbody">
  3.       <div class="body-top">
  4.         <button class="top-item2" @click="clearAnnotations">清空button>
  5.       div>
  6.       <div class="body-btn">
  7.         <div class="btn-content">
  8.           <div class="image-container">
  9.             
  10.             <img :src="state.imageUrls[state.currentPage - 1]" @mousedown="startAnnotation" @mousemove="updateAnnotation" @mouseup="endAnnotation" />
  11.             
  12.             <canvas ref="annotationCanvas">canvas>
  13.             <div v-for="annotation in annotations[state.currentPage - 1]" :key="annotation.id" class="annotation" :style="annotationStyle(annotation)">
  14.               <div class="label">{{ annotation.label }}div>
  15.             div>
  16.           div>
  17.           <Pagination
  18.             v-model:current="state.currentPage"
  19.             v-model:page-size="state.pageSize"
  20.             show-quick-jumper
  21.             :total="state.imageUrls.length"
  22.             :showSizeChanger="false"
  23.             :show-total="total => `共 ${total} 张`" />
  24.         div>
  25.         <div class="sidebar">
  26.           <div class="sidebar-title">标签div>
  27.           <div class="tags">
  28.             <div class="tags-item" v-for="(tags, index2) in state.tagsList" :key="index2" @click="checkTag(index2)">
  29.               <div class="tags-checkbox">
  30.                 <div :class="tags.check === true ? 'checkbox-two' : 'notcheckbox-two'">div>
  31.               div>
  32.               <div class="tags-right">
  33.                 <input class="tags-color" type="color" v-model="tags.color" />
  34.                 <input type="type" class="tags-input" v-model="tags.name" />
  35.                 <button class="tags-not" @click="deleteTag(index2)"><DeleteOutlined style="color: #ff0202" />button>
  36.               div>
  37.             div>
  38.           div>
  39.           <div class="sidebar-btn">
  40.             <button class="btn-left" @click="addTags()">添加button>
  41.           div>
  42.           <div class="sidebar-title">数据div>
  43.           <div class="sidebars">
  44.             <div class="sidebar-item" v-for="(annotation, index) in annotations[state.currentPage - 1]" :key="annotation.id">
  45.               <div class="sidebar-item-font">{{ index + 1 }}.{{ annotation.name }}div>
  46.               <button class="sidebar-item-icon" @click="removeAnnotation(annotation.id)"><DeleteOutlined style="color: #ff0202" />button> 
  47.           >div>
  48.         div>
  49.       div>
  50.     div>
  51. template>
  52. <script lang="ts" setup>
  53.   import { DeleteOutlined } from '@ant-design/icons-vue';
  54.   import { Pagination } from 'ant-design-vue';
  55.  
  56.   interface State {
  57.     tagsList: any;
  58.     canvasX: number;
  59.     canvasY: number;
  60.     currentPage: number;
  61.     pageSize: number;
  62.     imageUrls: string[];
  63.   };
  64.  
  65.   const state = reactive<State>({
  66.     tagsList: [], // 标签列表
  67.     canvasX: 0,
  68.     canvasY: 0,
  69.     currentPage: 1,
  70.     pageSize: 1,
  71.     imageUrls: [apiUrl.value + '/api/File/Image/annexpic/20241203Q9NHJ.jpg', apiUrl.value + '/api/file/Image/document/20241225QBYXZ.jpg'],
  72.   });
  73.  
  74.   interface Annotation {
  75.     id: string;
  76.     name: string;
  77.     x: number;
  78.     y: number;
  79.     width: number;
  80.     height: number;
  81.     color: string;
  82.     label: string;
  83.     border: string;
  84.   };
  85.  
  86.   const annotations = reactive<Array<Annotation[]>>([[]]);
  87.   let currentAnnotation: Annotation | null = null;
  88.  
  89.   //开始标注
  90.   function startAnnotation(event: MouseEvent) {
  91.     // 获取当前选中的标签
  92.     var tagsCon = { id: 1, check: true, color: '#000000', name: '安全帽' };
  93.     // 遍历标签列表，获取当前选中的标签
  94.     for (var i = 0; i < state.tagsList.length; i++) {
  95.       if (state.tagsList[i].check) {
  96.         tagsCon.id = state.tagsList[i].id;
  97.         tagsCon.check = state.tagsList[i].check;
  98.         tagsCon.color = state.tagsList[i].color;
  99.         tagsCon.name = state.tagsList[i].name;
  100.       }
  101.     }
  102.     // 创建新的标注
  103.     currentAnnotation = {
  104.       id: crypto.randomUUID(),
  105.       name: tagsCon.name,
  106.       x: event.offsetX,
  107.       y: event.offsetY,
  108.       width: 0,
  109.       height: 0,
  110.       color: '#000000',
  111.       label: (annotations[state.currentPage - 1].length || 0) + 1 + tagsCon.name,
  112.       border: tagsCon.color,
  113.     };
  114.     annotations[state.currentPage - 1].push(currentAnnotation);
  115.  
  116.     //记录鼠标按下的位置
  117.     state.canvasX = event.offsetX;
  118.     state.canvasY = event.offsetY;
  119.  
  120.     //监听鼠标如果是按下后马上抬起，结束标注
  121.     const mouseupHandler = () => {
  122.       endAnnotation();
  123.       window.removeEventListener('mouseup', mouseupHandler);
  124.     };
  125.     window.addEventListener('mouseup', mouseupHandler);
  126.   }
  127.  
  128.   //更新标注
  129.   function updateAnnotation(event: MouseEvent) {
  130.     if (currentAnnotation) {
  131.       //更新当前标注的宽高,为负数时，鼠标向左或向上移动
  132.       currentAnnotation.width = event.offsetX - currentAnnotation.x;
  133.       currentAnnotation.height = event.offsetY - currentAnnotation.y;
  134.     }
  135.  
  136.     //如果正在绘制中，更新临时矩形的位置
  137.     if (annotationCanvas.value) {
  138.       const canvas = annotationCanvas.value;
  139.       //取得类名为image-container的div的宽高
  140.       const imageContainer = document.querySelector('.image-container');
  141.       canvas.width = imageContainer?.clientWidth || 800;
  142.       canvas.height = imageContainer?.clientHeight || 534;
  143.       const context = canvas.getContext('2d');
  144.       if (context) {
  145.         context.clearRect(0, 0, canvas.width, canvas.height);
  146.         context.strokeStyle = currentAnnotation?.border || '#000000';
  147.         context.lineWidth = 2;
  148.         context.strokeRect(state.canvasX, state.canvasY, currentAnnotation?.width || 0, currentAnnotation?.height || 0);
  149.       }
  150.     }
  151.   }
  152.  
  153.   function endAnnotation() {
  154.     //刷新annotations[state.currentPage - 1]，触发重新渲染
  155.     annotations[state.currentPage - 1] = annotations[state.currentPage - 1].slice();
  156.     currentAnnotation = null;
  157.   }
  158.  
  159.   function annotationStyle(annotation: Annotation) {
  160.     //如果宽高为负数，需要调整left和top的位置
  161.     const left = annotation.width < 0 ? annotation.x + annotation.width : annotation.x;
  162.     const top = annotation.height < 0 ? annotation.y + annotation.height : annotation.y;
  163.     return {
  164.       left: `${left}px`,
  165.       top: `${top}px`,
  166.       width: `${Math.abs(annotation.width)}px`,
  167.       height: `${Math.abs(annotation.height)}px`,
  168.       border: `2px solid ${annotation.border}`,
  169.     };
  170.   }
  171.  
  172.   // 选择标签
  173.   function checkTag(index2: number) {
  174.     state.tagsList.forEach((item, index) => {
  175.       if (index === index2) {
  176.         item.check = true;
  177.       } else {
  178.         item.check = false;
  179.       }
  180.     });
  181.   }
  182.  
  183.   // 删除标签
  184.   function deleteTag(index: number) {
  185.     state.tagsList.splice(index, 1);
  186.   }
  187.  
  188.   function addTags() {
  189.     state.tagsList.push({ id: state.tagsList.length + 1, check: false, color: '#000000', name: '' });
  190.   }
  191.  
  192.   // 移除某个标注
  193.   function removeAnnotation(id: string) {
  194.     const index = annotations[state.currentPage - 1].findIndex(a => a.id === id);
  195.     if (index !== -1) {
  196.       annotations[state.currentPage - 1].splice(index, 1);
  197.     }
  198.   }
  199.  
  200.   // 清空所有标注
  201.   function clearAnnotations() {
  202.     annotations[state.currentPage - 1].splice(0, annotations[state.currentPage - 1].length);
  203.   }
  204.  
  205.   onMounted(() => {
  206.     for (let i = 0; i < state.imageUrls.length; i++) {
  207.       annotations.push([]);
  208.     }
  209.   });
  210.  
  211. script>
  212. <style>
  213.   .body-top {
  214.     display: flex;
  215.     flex-direction: row;
  216.     align-items: center;
  217.     justify-content: center;
  218.     margin-bottom: 10px;
  219.     width: 85%;
  220.   }
  221.   .top-item1 {
  222.     width: 70px;
  223.     height: 28px;
  224.     line-height: 26px;
  225.     text-align: center;
  226.     background-color: #028dff;
  227.     border: 1px solid #028dff;
  228.     border-radius: 5px;
  229.     font-size: 14px;
  230.     color: #fff;
  231.     margin-left: 20px;
  232.   }
  233.   .top-item2 {
  234.     width: 70px;
  235.     height: 28px;
  236.     line-height: 26px;
  237.     text-align: center;
  238.     background-color: rgb(255, 2, 2);
  239.     border: 1px solid rgb(255, 2, 2);
  240.     border-radius: 5px;
  241.     font-size: 14px;
  242.     color: #fff;
  243.     margin-left: 20px;
  244.   }
  245.   .body-btn {
  246.     margin: 0;
  247.     padding: 10px 13px 0 0;
  248.     min-height: 630px;
  249.     display: flex;
  250.     background-color: #f5f5f5;
  251.   }
  252.   .btn-content {
  253.     flex-grow: 1;
  254.     padding: 10px;
  255.     box-sizing: border-box;
  256.     display: flex;
  257.     flex-direction: column;
  258.     align-items: center;
  259.   }
  260.   .image-container {
  261.     height: 500px;
  262.     margin: 40px;
  263.   }
  264.   .image-container img {
  265.     height: 500px !important;
  266.   }
  267.   .ant-pagination {
  268.     margin-bottom: 18px;
  269.   }
  270.   .number-input {
  271.     width: 70px;
  272.     border: 1px solid #ccc;
  273.     border-radius: 4px;
  274.     text-align: center;
  275.     font-size: 16px;
  276.     background-color: #f9f9f9;
  277.     outline: none;
  278.     color: #66afe9;
  279.   }
  280.   .sidebar {
  281.     display: flex;
  282.     flex-direction: column;
  283.     width: 280px;
  284.     height: 640px;
  285.     background-color: #fff;
  286.     padding: 10px;
  287.     border-radius: 7px;
  288.   }
  289.   .sidebar-title {
  290.     font-size: 16px;
  291.     font-weight: 600;
  292.     margin-bottom: 10px;
  293.   }
  294.   .sidebars {
  295.     overflow: auto;
  296.   }
  297.   .sidebar .tags {
  298.     margin-bottom: 10px;
  299.   }
  300.   .tags-item {
  301.     display: flex;
  302.     flex-direction: row;
  303.     align-items: center;
  304.   }
  305.   .tags-checkbox {
  306.     width: 24px;
  307.     height: 24px;
  308.     border-radius: 50px;
  309.     border: 1px solid #028dff;
  310.     display: flex;
  311.     flex-direction: column;
  312.     align-items: center;
  313.     justify-content: center;
  314.     margin-right: 7px;
  315.   }
  316.   .checkbox-two {
  317.     background-color: #028dff;
  318.     width: 14px;
  319.     height: 14px;
  320.     border-radius: 50px;
  321.   }
  322.   .notcheckbox-two {
  323.     width: 14px;
  324.     height: 14px;
  325.     border-radius: 50px;
  326.     border: 1px solid #028dff;
  327.   }
  328.   .tags-right {
  329.     display: flex;
  330.     flex-direction: row;
  331.     align-items: center;
  332.     background-color: #f5f5f5;
  333.     border-radius: 5px;
  334.     padding: 5px;
  335.     width: 90%;
  336.   }
  337.   .tags-color {
  338.     width: 26px;
  339.     height: 26px;
  340.     border-radius: 5px;
  341.   }
  342.   .tags-input {
  343.     border: 1px solid #fff;
  344.     width: 153px;
  345.     margin: 0 10px;
  346.   }
  347.   .tags-not {
  348.     border: 1px solid #f5f5f5;
  349.     font-size: 12px;
  350.   }
  351.   .sidebar-btn {
  352.     display: flex;
  353.     flex-direction: row;
  354.     align-items: center;
  355.     justify-content: right;
  356.   }
  357.   .btn-left {
  358.     width: 60px;
  359.     height: 28px;
  360.     line-height: 26px;
  361.     text-align: center;
  362.     border: 1px solid #028dff;
  363.     border-radius: 5px;
  364.     font-size: 14px;
  365.     color: #028dff;
  366.   }
  367.   .btn-right {
  368.     width: 60px;
  369.     height: 28px;
  370.     line-height: 26px;
  371.     text-align: center;
  372.     background-color: #028dff;
  373.     border: 1px solid #028dff;
  374.     border-radius: 5px;
  375.     font-size: 14px;
  376.     color: #fff;
  377.     margin-left: 10px;
  378.   }
  379.   .sidebar-item {
  380.     display: flex;
  381.     justify-content: space-between;
  382.     align-items: center;
  383.     padding-right: 2px;
  384.   }
  385.   .sidebar-item-font {
  386.     margin-right: 10px;
  387.   }
  388.   .sidebar-item-icon {
  389.     font-size: 12px;
  390.     border: 1px solid #fff;
  391.   }
  392.  
  393.   .image-annotator {
  394.     display: flex;
  395.     height: 100%;
  396.   }
  397.  
  398.   .image-container {
  399.     flex: 1;
  400.     position: relative;
  401.     overflow: auto;
  402.   }
  403.  
  404.   .image-container img {
  405.     max-width: 100%;
  406.     height: auto;
  407.   }
  408.  
  409.   .annotation {
  410.     position: absolute;
  411.  
  412.     box-sizing: border-box;
  413.   }
  414.  
  415.   canvas {
  416.     position: absolute;
  417.     top: 0;
  418.     left: 0;
  419.     width: 100%;
  420.     height: 100%;
  421.     pointer-events: none; /* 防止遮挡鼠标事件 */
  422.   }
  423. style>

注：本文转载自blog.csdn.net的悠悠：）的文章"https://blog.csdn.net/weixin_66549669/article/details/144984878"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！