image解决了放大缩小的一些bug

DAPlatform-front/src/components/imageAnnotation/imageAnnotiation.vue

@@ -127,7 +127,7 @@
              user-select: none;
              display: flex;
              justify-content:flex-start;
-             overflow: auto"
+             overflow: auto;"
              id = "center_pic">
 <!--        <div style="zoom: 2;text-align：center;user-select: none" id = "center_pic">-->
 <!--          <img src="https://juanmdbucket.oss-cn-beijing.aliyuncs.com/20200301231737.png" style="pointer-events: none">-->
@@ -178,7 +178,7 @@ export default {
     }
   },
   async mounted () {
-    //获取图片列表并转换格式
+    // 获取图片列表并转换格式
     let imageList = await this.getLabelList()
     console.log(imageList)
     this.imageList = imageList.imageList
@@ -243,27 +243,27 @@ export default {
       let id = _this.pictureId
       console.log('id = ' + id)
       _this.data.forEach(function (element, index) {
-          var indexPic = index
-
-          element.children.forEach(function (element) {
-            // console.log('还原记录start')
-            // console.log(element)
-            var num = []
-            element.pointList.forEach(function (element1) {
-              console.log('pointlist')
-              console.log(element1)
-              num.push(element1.X)
-              num.push(element1.Y)
-            })
-            // var r1 = element.pointList[0].X
-            // var r2 = element.pointList[0].Y
-            // var rx = element.pointList[1].X
-            // var ry = element.pointList[1].Y
-            // var num = [r1, r2, rx, ry]
-            console.log(num)
-            _this.canvasAll[indexPic].push(num)
+        var indexPic = index
+
+        element.children.forEach(function (element) {
+          // console.log('还原记录start')
+          // console.log(element)
+          var num = []
+          element.pointList.forEach(function (element1) {
+            console.log('pointlist')
+            console.log(element1)
+            num.push(element1.X)
+            num.push(element1.Y)
           })
+          // var r1 = element.pointList[0].X
+          // var r2 = element.pointList[0].Y
+          // var rx = element.pointList[1].X
+          // var ry = element.pointList[1].Y
+          // var num = [r1, r2, rx, ry]
+          console.log(num)
+          _this.canvasAll[indexPic].push(num)
         })
+      })
       // 还原标注
       _this.restoreCanvas()
 
@@ -282,7 +282,7 @@ export default {
     }
   },
   created () {
-    
+
   },
   watch: {
     radio1: function f () {
@@ -319,11 +319,23 @@ export default {
         _this.ctx.fill()
       })
     },
+    mathAdd (a, b) {
+      return this.$math.add(this.$math.bignumber(a), this.$math.bignumber(b))
+    },
+    mathSub (a, b) {
+      return this.$math.subtract(this.$math.bignumber(a), this.$math.bignumber(b))
+    },
+    mathMul (a, b) {
+      return this.$math.multiply(this.$math.bignumber(a), this.$math.bignumber(b))
+    },
+    mathDiv (a, b) {
+      return this.$math.divide(this.$math.bignumber(a), this.$math.bignumber(b))
+    },
     goBigger () {
       var scale = this.scaleSize
       if (scale < 2) {
         // this.scaleSize = scale + 0.1
-        this.scaleSize = this.$math.add(this.$math.bignumber(scale), this.$math.bignumber(0.1))
+        this.scaleSize = this.mathAdd(scale, 0.1)
       } else {
         this.scaleSize = 2
       }
@@ -337,7 +349,7 @@ export default {
     goSmaller () {
       var scale = this.scaleSize
       if (scale > 0.5) {
-        this.scaleSize = this.$math.subtract(this.$math.bignumber(scale), this.$math.bignumber(0.1))
+        this.scaleSize = this.mathSub(scale, 0.1)
       } else {
         this.scaleSize = 0.5
       }
@@ -474,15 +486,14 @@ export default {
 
       this.labelName = children[index].labelName
       this.labelPosition = ''
-      var lenTmp = tmp[index].length / 2;
-      var i = 0;
-
+      var lenTmp = tmp[index].length / 2
+      var i = 0
 
       for (i = 0; i < lenTmp; i++) {
         this.labelPosition += '坐标' + (i + 1) + '： （'
-        this.labelPosition += tmp[index][2*i]
+        this.labelPosition += tmp[index][2 * i]
         this.labelPosition += ','
-        this.labelPosition += tmp[index][2*i+1]
+        this.labelPosition += tmp[index][2 * i + 1]
         this.labelPosition += '）\n'
       }
 
@@ -540,7 +551,7 @@ export default {
     changeToolBar (val) {
       this.activeIndex1 = val
     },
-   
+
     loadPicture () {
       var len = this.data.length
       var count = this.pictureId
@@ -701,15 +712,13 @@ export default {
       }
     },
     async getLabelList () {
-
       /**
        * 这是一个大致的格式转换
       //  */
       try {
-
         this.data = []
         let params = {
-          "relationList" : [
+          'relationList': [
             123,
             11
           ]
@@ -721,18 +730,16 @@ export default {
           data: params
         })
 
-          if (res.code === 1) {
-            let imageList = res.data
-            // console.log(imageList.imageList[0].imageUrl)
-            // self.$store.commit('setImageData', imageList.imageList)
-            console.log(imageList)
-            return imageList
-          }
-          else {
-            // self.$store.commit('clearImageData')
-            alert('请求出错！')
-          }
-        
+        if (res.code === 1) {
+          let imageList = res.data
+          // console.log(imageList.imageList[0].imageUrl)
+          // self.$store.commit('setImageData', imageList.imageList)
+          console.log(imageList)
+          return imageList
+        } else {
+          // self.$store.commit('clearImageData')
+          alert('请求出错！')
+        }
       } catch (err) {
         // self.$store.commit('clearImageData')
         console.log(err)
@@ -762,8 +769,7 @@ export default {
         confirmButtonText: '确定',
         cancelButtonText: '取消'
       }).then(({ value }) => {
-        if (value == null)
-          value = 'iss'
+        if (value == null) { value = 'iss' }
         labelName = value
         this.makeLabel(labelName)
       }).catch(() => {
@@ -771,23 +777,23 @@ export default {
         this.makeLabel(labelName)
       })
     },
-    //创建储存用的标签数据
-    makeLabel(labelName) {
+    // 创建储存用的标签数据
+    makeLabel (labelName) {
       let currentImageId = this.pictureId
       let currentLabelId = this.data[currentImageId].children.length
-      //以下部分创建PointList
+      // 以下部分创建PointList
       var tmpPointList = this.canvasAll[currentImageId]
       var lenTmp = tmpPointList[currentLabelId].length / 2
       let pointList = []
-      for (var i = 0; i < lenTmp; i ++) {
+      for (var i = 0; i < lenTmp; i++) {
         let tmp = {
-          pointId : i,
-          X : tmpPointList[currentLabelId][2*i],
-          Y : tmpPointList[currentLabelId][2*i + 1]
+          pointId: i,
+          X: tmpPointList[currentLabelId][2 * i],
+          Y: tmpPointList[currentLabelId][2 * i + 1]
         }
         pointList.push(tmp)
       }
-      //pointList完成
+      // pointList完成
       const newLabel = {
         labelId: currentLabelId,
         labelName: labelName,
@@ -839,13 +845,13 @@ export default {
         console.log('onmousedown')
         if (_this.radio1 == '矩形标注') {
           _this.canvas.style.cursor = 'crosshair'
-          r1 = e.layerX
-          r2 = e.layerY
+          r1 = _this.mathDiv(e.layerX, _this.scaleSize)
+          r2 = _this.mathDiv(e.layerY, _this.scaleSize)
           _this.createR(e, 'begin', r1, r2)
         } else if (_this.radio1 == '多边形标注') {
           _this.canvas.style.cursor = 'crosshair'
-          r1 = e.layerX
-          r2 = e.layerY
+          r1 = _this.mathDiv(e.layerX, _this.scaleSize)
+          r2 = _this.mathDiv(e.layerY, _this.scaleSize)
           _this.createPTmp.push(r1)
           _this.createPTmp.push(r2)
           _this.createP(e, 'begin', r1, r2)
@@ -862,8 +868,8 @@ export default {
           r2 = null
         } else if (_this.radio1 == '多边形标注') {
           _this.canvas.style.cursor = 'crosshair'
-          r1 = e.layerX
-          r2 = e.layerY
+          r1 = _this.mathDiv(e.layerX, _this.scaleSize)
+          r2 = _this.mathDiv(e.layerY, _this.scaleSize)
         } else {
           _this.canvas.style.cursor = 'auto'
         }
@@ -894,9 +900,8 @@ export default {
         _this.canvas.onmousemove = function (e) {
           _this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height)
 
-          let rx = e.layerX - r1
-          let ry = e.layerY - r2
-          // console.log(r1 + ' ' + r2 + ' ' + rx + ' ' + ry)
+          let rx = _this.mathDiv(e.layerX, _this.scaleSize) - r1
+          let ry = _this.mathDiv(e.layerY, _this.scaleSize) - r2
 
           // 把每个标注画出来
           _this.restoreCanvas()
@@ -921,21 +926,28 @@ export default {
         }
 
         _this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height)
-        let rx = e.layerX - r1
-        let ry = e.layerY - r2
+        console.log('X:' + e.layerX + 'Y:' + e.layerY)
+        console.log('r1:' + r1 + 'r2:' + r2)
+        let layerX = _this.mathDiv(e.layerX, _this.scaleSize)
+        let layerY = _this.mathDiv(e.layerY, _this.scaleSize)
+        let rx = layerX - r1
+        let ry = layerY - r2
 
         // 排除点击就添加标签的可能
         if ((rx >= 1 || rx <= -1) && (ry >= 1 || ry <= -1)) {
           _this.ctx.beginPath()
           _this.ctx.fillStyle = 'rgba(51,135,255,0.54)'
           _this.ctx.fillRect(r1, r2, rx, ry)
+          console.log(r1+' '+r2+' '+rx+' '+ry)
           // _this.ctx.stroke()
 
           // 把每个标注画出来
 
           let id = _this.pictureId
           // 存到记录里
-          var num = [r1, r2, r1 + rx, r2, r1 + rx, r2 + ry, r1, r2 + ry]
+          var num = [r1, r2, _this.mathAdd(r1, rx), r2, _this.mathAdd(r1, rx), _this.mathAdd(r2, ry), r1, _this.mathAdd(r2, ry)]
+          console.log('num')
+          console.log(num)
           _this.canvasAll[id].push(num)
           _this.addLabel()
 
@@ -958,11 +970,13 @@ export default {
 
           // 把每个标注画出来
           _this.restoreCanvas()
-
-          if(_this.createPTmp.length == 2){
+          // 第一条线
+          if (_this.createPTmp.length == 2) {
             _this.ctx.beginPath()
             _this.ctx.moveTo(r1, r2)
-            _this.ctx.lineTo(e.layerX, e.layerY)
+            r1 = _this.mathDiv(e.layerX, _this.scaleSize)
+            r2 = _this.mathDiv(e.layerY, _this.scaleSize)
+            _this.ctx.lineTo(r1, r2)
             _this.ctx.closePath()
             _this.ctx.strokeStyle = 'black'
             _this.ctx.stroke()
@@ -973,7 +987,9 @@ export default {
             for (i = 1; i < _this.createPTmp.length / 2; i++) {
               _this.ctx.lineTo(_this.createPTmp[2 * i], _this.createPTmp[2 * i + 1])
             }
-            _this.ctx.lineTo(e.layerX, e.layerY)
+            r1 = _this.mathDiv(e.layerX, _this.scaleSize)
+            r2 = _this.mathDiv(e.layerY, _this.scaleSize)
+            _this.ctx.lineTo(r1, r2)
             _this.ctx.closePath()
             _this.ctx.strokeStyle = 'black'
             _this.ctx.stroke()
@@ -997,7 +1013,7 @@ export default {
         outputData.push(newData)
       })
 
-      console.log("outputdata")
+      console.log('outputdata')
       console.log(outputData)
       this.imageNum = this.data.len
       this.axios({
@@ -1014,20 +1030,20 @@ export default {
             callback: action => {
               this.$message({
                 type: 'info',
-                message: `action: ${ action }`
-              });
+                message: `action: ${action}`
+              })
             }
-          });
+          })
         } else {
           this.$alert('保存失败', '保存失败', {
             confirmButtonText: '确定',
             callback: action => {
               this.$message({
                 type: 'info',
-                message: `action: ${ action }`
-              });
+                message: `action: ${action}`
+              })
             }
-          });
+          })
         }
       }).catch(err => {
         this.$alert('保存失败', '保存失败', {
@@ -1035,10 +1051,10 @@ export default {
           callback: action => {
             this.$message({
               type: 'info',
-              message: `action: ${ action }`
-            });
+              message: `action: ${action}`
+            })
           }
-        });
+        })
       })
     }
   }