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;
        }
    },
}