image-改

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

 <template>
   <div class="layout" :style="{ height : height_res+'px'}">
-<!--    工具栏-->
-<!--    <div class="toolBar">-->
-<!--      <el-button-group id="start">-->
-<!--        <el-button class="tool-button" type="primary" >保存</el-button>-->
-<!--        <el-button class="tool-button" type="primary" >退出</el-button>-->
-<!--      </el-button-group>-->
-<!--      <el-button-group id="tool">-->
-<!--&lt;!&ndash;        <el-button class="tool-button" type="primary" icon="el-icon-arrow-left" >上一张</el-button>&ndash;&gt;-->
-<!--&lt;!&ndash;        <el-button class="tool-button" type="primary" >下一张<i class="el-icon-arrow-right el-icon&#45;&#45;right"></i></el-button>&ndash;&gt;-->
-<!--        <el-button class="tool-button" type="primary"  >多边形标注</el-button>-->
-<!--        <el-button class="tool-button" type="primary"  >矩形标注</el-button>-->
-<!--        <el-button class="tool-button" type="primary"  @click="deleteAnnotation">删除标注</el-button>-->
-<!--      </el-button-group>-->
-<!--    </div>-->
     <el-container style="margin-top: 40px" :style="{ height : height_res-40+'px'}">
 <!--      侧边栏-->
       <el-aside class="sidebar" style="height: 130px;background-color: rgba(255,255,255,0);box-shadow: 0px 0px 0px rgba(255,255,255,0);padding: 0px">
         <div class="sidebar-box">
           <div class="tool-button-left">
-            <el-button-group id="start">
-              <el-button class="tool-button" type="primary" @click="save">保存</el-button>
-              <el-button class="tool-button" type="primary" >退出</el-button>
-            </el-button-group>
             <div style="margin-top: 10px"></div>
-            <el-button-group id="tool">
-              <!--        <el-button class="tool-button" type="primary" icon="el-icon-arrow-left" >上一张</el-button>-->
-              <!--        <el-button class="tool-button" type="primary" >下一张<i class="el-icon-arrow-right el-icon--right"></i></el-button>-->
-              <el-button class="tool-button" type="primary"  >多边形标注</el-button>
-              <el-button class="tool-button" type="primary"  >矩形标注</el-button>
-              <!--测试用 添加标注区域-->
-              <el-button class="tool-button" type="primary"  @click="addLabel">添加标注区域</el-button>
-<!--              <el-button class="tool-button" type="primary"  @click="deleteAnnotation">删除</el-button>-->
-            </el-button-group>
+            <el-radio-group v-model="radio1">
+              <el-radio-button label="矩形标注"></el-radio-button>
+              <el-radio-button label="多边形标注"></el-radio-button>
+            </el-radio-group>
           </div>
         </div>
       </el-aside>
 
-      <el-aside class="sidebar" style="position: absolute;margin-top: 120px" :style="{ height : height_res*0.97-155+'px'}">
+      <el-aside class="sidebar" style="position: absolute;margin-top: 60px" :style="{ height : 185 +'px'}">
         <div class="sidebar-box">
           <div>
-            <div class="img-list-title">图片列表</div>
+            <div class="img-list-title" style="height: 30px;line-height: 30px;font-size: 15px">图片列表</div>
+            <div class="img-title-list-box">
+              <div v-for="(item, index) in data" :key="item.id" style="text-align: left"  class="listLeft" @click="jumpToImage(index)">
+                {{index+1}}. &nbsp; {{item.label}}
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </el-aside>
+
+      <el-aside class="sidebar" style="position: absolute;margin-top: 260px" :style="{ height : height_res*0.97-300+'px'}">
+        <div class="sidebar-box">
+          <div>
+            <div class="img-list-title" style="height: 30px;line-height: 30px;font-size: 15px">标注列表</div>
             <div class="img-title-list-box">
               <div id="img-title-list" style="user-select:none">
-                <el-tree
-                  :data="data"
-                  :props="defaultProps"
-                  node-key="id"
-                  @node-click="handleNodeClick">
-                </el-tree>
+
+                <div v-for="(item, index) in data[pictureId].children" :key="item.id" class="listLeft" style="text-align: left" @dblclick="deleteLabelInList(index)" @mouseenter="labelEnter(index)" @mouseleave="labelLeave()">
+                  {{index+1}}. &nbsp; {{item.label}}
+                </div>
+<!--                <el-tree-->
+<!--                  :data="data"-->
+<!--                  :props="defaultProps"-->
+<!--                  node-key="id"-->
+<!--                  @node-click="handleNodeClick">-->
+<!--                </el-tree>-->
               </div>
             </div>
           </div>
@@ -127,6 +122,7 @@ export default {
   name: 'imageAnnotation',
   data () {
     return {
+      radio1: '矩形标注',
       pictureId: 1,
       scaleSize: 1,
       height_res: 0,
@@ -141,6 +137,7 @@ export default {
         width: null,
         height: null
       },
+      // 所有标记历史记录
       canvasAll: [],
 
       // 这个大概就是数据库会存的数据，从后端拿来的应该也就是这样的
@@ -203,8 +200,10 @@ export default {
   mounted () {
     this.getLabelList()
 
+    console.log('input')
     console.log(this.$store.state.imageData)
     this.formExchange(this.$store.state.imageData)
+    console.log('output')
     console.log(this.data)
 
     // 加载第一张图片
@@ -251,6 +250,7 @@ export default {
       _this.canvas.style.height = img.height + 'px'
       _this.canvas.style.postion = 'absolute'
       _this.canvas.style.zIndex = '500'
+      _this.canvas.style.cursor = 'crosshair'
       _this.canvas.style.flex = '0 0 ' + img.width + 'px'
       _this.canvas.style.marginLeft = '-' + img.width + 'px';
 
@@ -258,6 +258,44 @@ export default {
       _this.ctx.fillStyle = 'rgba(51,135,255,0)';
       _this.ctx.fillRect(0, 0, img.width, img.height);
       myParent.appendChild(_this.canvas)
+
+      // 还原数据库里的标注记录
+      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 r1 = element.pointList[0].X
+          var r2 = element.pointList[0].Y
+          var rx = element.pointList[1].X - element.pointList[0].X
+          var ry = element.pointList[1].Y - element.pointList[0].Y
+          var num = [r1, r2, rx, ry]
+          _this.canvasAll[indexPic].push(num)
+        })
+      })
+      //
+      // _this.data[id].children.forEach(function (element) {
+      //   // console.log('还原记录start')
+      //   // console.log(element)
+      //   var r1 = element.pointList[0].X
+      //   var r2 = element.pointList[0].Y
+      //   var rx = element.pointList[1].X - element.pointList[0].X
+      //   var ry = element.pointList[1].Y - element.pointList[0].Y
+      //   var num = [r1,r2,rx,ry]
+      //   _this.canvasAll[id].push(num)
+      // })
+
+      // 还原标注
+      _this.ctx.beginPath();
+      _this.ctx.fillStyle = 'rgba(51,135,255,0.54)';
+      _this.canvasAll[id].forEach(function (element) {
+        _this.ctx.fillRect(element[0],element[1],element[2],element[3]);
+        // console.log(element)
+      })
+      _this.ctx.stroke();
+
       _this.brush_Listener()
     }
 
@@ -276,6 +314,19 @@ export default {
   created () {
 
   },
+  watch: {
+    radio1: function f () {
+      if (this.radio1 == '矩形标注'){
+        console.log('RR')
+        this.canvas.style.cursor = 'crosshair'
+      } else if (this.radio1 == '多边形标注') {
+        console.log('pp')
+        this.canvas.style.cursor = 'auto'
+      } else {
+        this.canvas.style.cursor = 'auto'
+      }
+    }
+  },
   methods: {
     goBigger () {
       var scale = this.scaleSize
@@ -298,12 +349,120 @@ export default {
       } else {
         this.scaleSize = 0.5
       }
+    },
+    labelEnter(index){
+      // console.log('enter!')
+      var indexLabel = index
+      var _this = this
+      _this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
+      _this.ctx.beginPath()
+      let id = _this.pictureId;
+      _this.canvasAll[id].forEach(function (element, index1) {
+        if(index1 == indexLabel){
+          _this.ctx.fillStyle = 'rgba(255,0,0,0.35)';
+        } else {
+          _this.ctx.fillStyle = 'rgba(51,135,255,0.54)';
+        }
+        _this.ctx.fillRect(element[0],element[1],element[2],element[3]);
+        // console.log(index)
+      })
+      _this.ctx.stroke();
+    },
+    labelLeave(){
+      var _this = this
+      _this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
+      _this.ctx.beginPath()
+      let id = _this.pictureId;
+      _this.canvasAll[id].forEach(function (element, index1) {
+        _this.ctx.fillStyle = 'rgba(51,135,255,0.54)';
+        _this.ctx.fillRect(element[0],element[1],element[2],element[3]);
+        // console.log(index)
+      })
+      _this.ctx.stroke();
+    },
+    jumpToImage (index) {
+      this.scaleSize = 1
+      this.pictureId = index
+      var imgUrl = this.data[this.pictureId].imageUrl
+      var img = new Image()
+      img.src = imgUrl
+      var _this = this
 
-      // var temp = document.getElementById('pic_now');
-      // temp.style.width = this.imgNow.width * this.scaleSize + 'px';
-      // temp.style.height = this.imgNow.height * this.scaleSize + 'px';
-      // temp.style.flex = '0 0 ' + this.imgNow.width * this.scaleSize + 'px'
-      // alert(this.scaleSize)
+      img.onload = function () {
+        _this.imgNow.height = img.height
+        _this.imgNow.width = img.width
+        // 打印
+        // alert('width:' + img.width + ',height:' + img.height)
+        var myParent = document.getElementById('center_pic')
+        // myParent.removeChild(myParent.childNodes[0])
+        // myParent.removeChild(myParent.childNodes[1])
+
+        for (var i = myParent.childNodes.length - 1; i >= 0; i--) {
+          myParent.removeChild(myParent.childNodes[i]);
+        }
+
+        var myImage = document.createElement('div')
+        myImage.style.backgroundImage = 'url(' + imgUrl + ')'
+        myImage.style.backgroundSize = '100% 100%'
+
+        // myImage.src = this.data[0].imageUrl
+        myImage.style.pointerEvents = 'none'
+        myImage.style.height = img.height + 'px'
+        myImage.style.width = img.width + 'px'
+        myImage.style.zIndex = '250'
+        myImage.style.flex = '0 0 ' + img.width + 'px'
+        myImage.id = 'pic_now'
+        // myImage.style.alignItems = 'center';
+        myParent.appendChild(myImage)
+
+        _this.canvas = document.createElement('canvas')
+
+        _this.canvas.width = img.width
+        _this.canvas.height = img.height
+        _this.canvas.style.width = img.width + 'px'
+        _this.canvas.style.height = img.height + 'px'
+        _this.canvas.style.postion = 'absolute'
+        _this.canvas.style.zIndex = '500'
+        _this.canvas.style.cursor = 'crosshair'
+        _this.canvas.style.flex = '0 0 ' + img.width + 'px'
+        _this.canvas.style.marginLeft = '-' + img.width + 'px';
+
+        _this.ctx = _this.canvas.getContext('2d')
+        _this.ctx.fillStyle = 'rgba(51,135,255,0)';
+        _this.ctx.fillRect(0, 0, img.width, img.height);
+        myParent.appendChild(_this.canvas)
+
+        // 还原标注
+        let id = _this.pictureId;
+        _this.ctx.beginPath();
+        _this.ctx.fillStyle = 'rgba(51,135,255,0.54)';
+        _this.canvasAll[id].forEach(function (element) {
+          _this.ctx.fillRect(element[0],element[1],element[2],element[3]);
+          // console.log(element)
+        })
+        _this.ctx.stroke();
+
+        _this.brush_Listener()
+      }
+    },
+    deleteLabelInList (index) {
+      let id = this.pictureId;
+      var children = this.data[this.pictureId].children
+      // 从节点里删
+      children.splice(index, 1)
+      // 从历史记录里删
+      this.canvasAll[id].splice(index, 1)
+
+      // 重画标注
+      var _this = this
+      _this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
+      _this.ctx.beginPath()
+      _this.canvasAll[id].forEach(function (element, index1) {
+        _this.ctx.fillStyle = 'rgba(51,135,255,0.54)';
+        _this.ctx.fillRect(element[0],element[1],element[2],element[3]);
+        // console.log(index)
+      })
+      _this.ctx.stroke();
     },
     handleNodeClick (data, node) {
       console.log(node)
@@ -396,6 +555,7 @@ export default {
           _this.canvas.style.height = img.height + 'px'
           _this.canvas.style.postion = 'absolute'
           _this.canvas.style.zIndex = '500'
+          _this.canvas.style.cursor = 'crosshair'
           _this.canvas.style.flex = '0 0 ' + img.width + 'px'
           _this.canvas.style.marginLeft = '-' + img.width + 'px';
 
@@ -470,6 +630,7 @@ export default {
           _this.canvas.style.height = img.height + 'px'
           _this.canvas.style.postion = 'absolute'
           _this.canvas.style.zIndex = '500'
+          _this.canvas.style.cursor = 'crosshair'
           _this.canvas.style.flex = '0 0 ' + img.width + 'px'
           _this.canvas.style.marginLeft = '-' + img.width + 'px';
 
@@ -621,15 +782,30 @@ export default {
       let _this = this;
       this.canvas.onmousedown = function (e) {
         console.log('onmousedown');
+        if (_this.radio1 == '矩形标注'){
+          _this.canvas.style.cursor = 'crosshair'
           r1 = e.layerX;
           r2 = e.layerY;
           _this.createR(e, 'begin', r1, r2);
+        } else if (_this.radio1 == '多边形标注') {
+          _this.canvas.style.cursor = 'auto'
+        } else {
+          _this.canvas.style.cursor = 'auto'
+        }
+
       }
       this.canvas.onmouseup = function(e) {
         console.log('onmouseup');
+        if (_this.radio1 == '矩形标注'){
+          _this.canvas.style.cursor = 'crosshair'
           _this.createR(e, 'end', r1, r2);
           r1 = null;
           r2 = null;
+        } else if (_this.radio1 == '多边形标注') {
+          _this.canvas.style.cursor = 'auto'
+        } else {
+          _this.canvas.style.cursor = 'auto'
+        }
       }
     },
     // 画矩形
@@ -802,6 +978,18 @@ export default {
 #buttonBar::selection{
   background-color: rgba(255, 255, 255, 0);
 }
+.listLeft{
+  background-color: white;
+  /*padding-top: 5px;*/
+  height: 24px;
+  padding-left: 5px;
+  font-size: 14px;
+  line-height: 24px;
+  vertical-align: middle;
+}
+.listLeft:hover{
+  background-color: #cbd8ea;
+}
 .sidebar {
   height: 97%;
   margin-left: 50px;

DAPlatform-front/src/mock/api.js

@@ -19,24 +19,24 @@ Mock.mock('http://localhost:9100/api/image', {
       label: 'label1',
       pointList: [{
         pointId: '1-1',
-        X: 1.1,
-        Y: 2.2
+        X: 500,
+        Y: 300
       }, {
         pointId: '1-2',
-        X: 1.2,
-        Y: 2.3
+        X: 600,
+        Y: 400
       }]
     }, {
       labelId: 1,
       label: 'label2',
       pointList: [{
         pointId: '2-1',
-        X: 1.1,
-        Y: 2.2
+        X: 100,
+        Y: 100
       }, {
         pointId: '2-2',
-        X: 1.2,
-        Y: 2.3
+        X: 200,
+        Y: 200
       }]
     }]
   }, {
@@ -47,12 +47,12 @@ Mock.mock('http://localhost:9100/api/image', {
       label: 'label1',
       pointList: [{
         pointId: '1-1',
-        X: 1.1,
-        Y: 2.2
+        X: 100,
+        Y: 100
       }, {
         pointId: '1-2',
-        X: 1.2,
-        Y: 2.3
+        X: 300,
+        Y: 300
       }]
     }]
   }]