web-图片标注的实现

一 ：图片标注功能的实现简介

1：需要标注的图片放在底层

2：svg层正好覆盖需要标注的图片

3：由svg来画出相应的轨迹

注释： svg的坐标系：

1：以左上角为坐标系的原点(0,0)

2：X 轴的正方向向右，从 0,0 点开始向右， x 逐渐增大。Y 轴的正方向向下，从 0,0 点开始向下， y 逐 渐增大

3：坐标以像素为单位

二：标注的效果图

三： 核心代码

HTML:

<div class="Labeling-canvas">
　　<div class="image">
　　　　<img src="@/assets/404.png" ref="imgLabel" id="labelValue"/><!-- 需要标注的图片 -->
　　</div>
　　<svg class="svglabel" ref="svglabel" @mousedown="mouseDown($event)" @mousemove="mouseMove($event)" @mouseup="onmouseup($event)" :style="{width: 100 + '%', height: 100 + '%' }">
　　　　<g v-for="(rectData, index) in svgLabelShow" :key="index">
　　　　　　<rect v-if="rectData" :x="getXPostion(rectData,27,1)" :y="rectData.ulY" :width="27" :height="26"
                style="fill: #00FFFF; stroke-opacity: 1; stroke: #00FFFF; stroke-dasharray: none; stroke-width: 1;">
　　　　　　</rect>
          <text v-if="rectData" :x='getXPostion(rectData,18,8)' :y='parseFloat(rectData.ulY)+16'font-size='16'>
　　　　　　　　{{index+1}}
　　　　　　</text>
　　　　　　<rect v-if="rectData" :x="getXPostion(rectData,27,1)" :y="parseFloat(rectData.ulY)+26" :width="27" :height="24"
                                  style="fill: #FFFFFF; stroke-opacity: 1; stroke: #00FFFF; stroke-dasharray: none; stroke-width: 1;"></rect>
         　<image v-if="rectData" @click="deleteLabel(svgLabelShow,index)" :x='getXPostion(rectData,19,7)' :y='parseFloat(rectData.ulY)+29' width='13'
                                   height='14' xlink:href='@/assets/delete.svg'></image>
           <rect v-if="rectData" :x="rectData.ulX" :y="rectData.ulY" :width="rectData.width" :height="rectData.height"
                                  style="fill: none; stroke-opacity: 1; stroke: #00FFFF; stroke-dasharray: none; stroke-width: 1;"></rect>
      　　</g>
　　</svg>
</div>

VUE: 

data () {
    return {
        isclick: true,
        drawColor: '#00FFFF',
        drawElement: null, //当前移动的对象
        svgLabelShow: [],//显示数据，需按比例转换
    }
},
methods: {
    //mouseDown,mouseMove,onmouseup 新建标注核心代码
    mouseDown (e) {
        if (!this.isclick) {//防止点击过快
            return false;
        } else {
            this.clickQuick();
        }
        //e.button==0  没有按键或者是没有初始化
        if (e.button == 0) {//当前为画图操作
            const currentX = e.offsetX;//offsetX,offsetY相对于带有定位的父盒子的x,y坐标
            const currentY = e.offsetY;
            this.drawElement = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
            this.drawElement.setAttribute('x', currentX);
            this.drawElement.setAttribute('y', currentY);
            this.drawElement.setAttribute('width', 0);
            this.drawElement.setAttribute('height', 0);
            this.drawElement.dataset.dataType = 'markRect';
            this.$refs.svglabel.appendChild(this.drawElement);
            this.drawElementStyle(this.drawElement);
        }
    },
    mouseMove (e) {
        if (this.drawElement == null || this.corpusActionType != 'label') {
            return false;
        }
        if (e.button == 0) {//当前为画图操作
            const currentX = e.offsetX;
            const currentY = e.offsetY;
            const startX = this.drawElement.getAttribute('x');
            const startY = this.drawElement.getAttribute('y');
            const rectX =startX;
            const rectY =startY;
            const rectWith = Math.abs(currentX - startX);
            const rectHeight = Math.abs(currentY - startY);
            this.drawElement.setAttribute('x', rectX);
            this.drawElement.setAttribute('y', rectY);
            this.drawElement.setAttribute('width', rectWith);
            this.drawElement.setAttribute('height', rectHeight);
        }
    },
    onmouseup (e) {
        if (this.drawElement == null) {
            return;
        }
        if (e.button == 0) {
            const rectX = this.drawElement.getAttribute('x');
            const rectY = this.drawElement.getAttribute('y');
            const rectWidth = this.drawElement.getAttribute('width');
            const rectHeight = this.drawElement.getAttribute('height');
            if (rectWidth == 0 || rectHeight == 0 || !rectX || !rectY) {//不符合条件的矩形取消
                this.drawElement.parentNode.removeChild(this.drawElement);
                this.drawElement = null;
            } else {
                this.svgLabelShow.push({ulX: rectX, ulY: rectY, width: rectWidth, height: rectHeight, labelName: 'table'});
                console.log('this.svgLabelShow', this.svgLabelShow);
                this.drawElementStyle(e.target);
                this.drawElement.parentNode.removeChild(this.drawElement);
                this.drawElement = null;
            }
        }
    },
    //设置标注框的样式  0：正常状态  1： 高亮状态   2： 可编辑状态
    drawElementStyle (drawElement) {
        drawElement.style.fill = 'none';
        drawElement.style.strokeOpacity = 1;
        drawElement.style.stroke = this.drawColor;
        drawElement.style.strokeDasharray = 'none';
        drawElement.style.strokeWidth = 1;
    },
    clickQuick () {
        if (this.isclick) {
            this.isclick = false;
            setTimeout(() => {
                this.isclick = true;
            }, 500);
        }
    },
    getXPostion (labelData, xPostion, left) {
        if (parseFloat(labelData.ulX) < 27) {
            return parseFloat(labelData.ulX) + parseFloat(labelData.width) + left;
        } else {
            return parseFloat(labelData.ulX) - xPostion;
        }
    },
}