标注问题

src/assets/styles/manage.scss

@@ -31,7 +31,7 @@
 }
 
 .venue-left{
-  width: calc(100% / 2);
+  width: calc(100% / 2 - 20px);
   margin-right: 20px;
   @include bg_color;
   @include box_padding;
@@ -46,7 +46,7 @@
   }
 }
 .venue-right{
-  flex: 1;
+  width: calc(100% / 2);
   @include bg_color;
   @include box_padding;
   .head-container{

src/views/components/mark.vue

@@ -88,64 +88,78 @@ export default {
     height() {
       this.canvas.setHeight(this.height)
     },
-    currentMarkData(newVal) {
-      if (newVal) {
-        // console.log(newVal.signPoint)
-        // if (newVal.signPoint !== null) {
-        //   this.drawinfo = JSON.parse(newVal.signPoint)
-        // } else {
-        //   this.drawinfo = null
-        // }
-        this.initCanvas()
-      }
+    currentMarkData: {
+      handler(newVal, oldVal) {
+        if (newVal.id !== oldVal.id) {
+          console.log('id has changed')
+          console.log('handler')
+          this.canvas.clear()
+          this.canvas.dispose()
+          if (newVal.signPoint !== '' || newVal.signPoint !== null) {
+            this.drawinfo = JSON.parse(newVal.signPoint)
+          } else {
+            this.drawinfo = null
+          }
+          this.initCanvas()
+        }
+      },
+      deep: true
     },
-    imageFloorUrl(newVal) {
-      if (newVal) {
-        console.log('newVal', newVal)
-        this.isDrawing = false
-        this.bgImgFlag = true
-        const imgElement = document.getElementById('expImg')
-        imgElement.src = this.imageFloorUrl
+    imageFloorUrl(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        console.log('imageFloorUrl')
       }
     }
   },
   created() {
+
   },
   mounted() {
-    this.initCanvas()
+    this.$nextTick(() => {
+      console.log('mounted')
+      this.drawinfo = this.currentMarkData && this.currentMarkData.signPoint ? JSON.parse(this.currentMarkData.signPoint) : null
+      this.initCanvas()
+    })
+  },
+  beforeDestroy() {
+    if (this.canvas) {
+      this.canvas.clear()
+      this.canvas.dispose()
+    }
   },
   methods: {
     initCanvas() {
-      if (this.currentMarkData && (this.currentMarkData.signPoint !== '' || this.currentMarkData.signPoint !== null)) {
-        this.drawinfo = JSON.parse(this.currentMarkData.signPoint)
-      } else {
-        this.drawinfo = null
-      }
       this.canvas = new fabric.Canvas('canvas', {
         skipTargetFind: false, // 当为真时，跳过目标检测。目标检测将返回始终未定义。点击选择将无效
         selectable: false, // 为false时，不能选择对象进行修改
         selection: false // 是否可以多个对象为一组
       })
       this.canvas.selectionColor = 'rgba(0,0,0,0.05)'
-      this.canvas.on('mouse:down', this.mousedown)
-      this.canvas.on('mouse:move', this.mousemove)
-      this.canvas.on('object:moving', this.objectMoving)
-      // this.canvas.on('mouse:wheel', this.mouse)
-      // this.$nextTick(() => {
-      // console.log(this.drawinfo)
+      // this.canvas.on('mouse:down', this.mousedown)
+      // this.canvas.on('mouse:move', this.mousemove)
+      // this.canvas.on('object:moving', this.objectMoving)
+      console.log('this.drawinfo', this.drawinfo)
+      console.log('this.canvas', this.canvas)
       if (this.drawinfo) {
+        console.log('444')
         this.loadDraw()
-        this.canvas.on('mouse:wheel', this.mouse)
       } else {
+        console.log('555')
+        this.isDrawing = false
+        this.bgImgFlag = true
+        const imgElement = document.getElementById('expImg')
+        imgElement.src = this.imageFloorUrl
         this.loadExpImg()
       }
-      // })
     },
     // 从已渲染的DOM元素加载图片至canvas
     loadExpImg() {
+      console.log('loadExpImg')
       const imgElement = document.getElementById('expImg')
       const newWidth = this.canvas.width
+      console.log('newWidth', newWidth)
       imgElement.onload = () => {
+        // console.log('imgElement.src', imgElement.src)
         const newHeight = newWidth / (imgElement.width / imgElement.height)
         new fabric.Image.fromURL(
           imgElement.src,
@@ -255,13 +269,13 @@ export default {
 
       this.canvas.skipTargetFind = false
       try {
+        console.log('this.pointArray', this.pointArray)
         // 判断是否闭合多边形，点击红点时闭合多边形
         if (this.pointArray.length > 1) {
           // e.target.id == this.pointArray[0].id 表示点击了初始红点
           if (e.target && e.target.id === this.pointArray[0].id) {
             this.generatePolygon()
             console.log('画完')
-            console.log('this.pointArray', this.pointArray)
             this.isDrawing = true
             return
           } else {
@@ -547,14 +561,16 @@ export default {
     },
     // 回显详情信息
     loadDraw() {
+      this.canvas.clear()
       const self = this
-      if (this.drawinfo.id === '') return
+      // if (this.drawinfo.id === '') return
       // const pointGroup = JSON.parse(self.drawinfo.pointInfo);
       // const imgInfo = JSON.parse(self.drawinfo.imgInfo);
       const pointGroup = self.drawinfo.pointInfo
       const imgInfo = self.drawinfo.imgInfo
       // self.imageFloorUrl = self.drawinfo.img
       imgInfo.src = self.imageFloorUrl
+      this.isDrawing = true
 
       // 加载底图
       fabric.util.enlivenObjects([imgInfo], objects => {
@@ -610,24 +626,22 @@ export default {
               this.canvas.renderAll()
             })
 
-            // if (!self.readstate) {
-            // fabric.Image.fromURL(self.deleteIconURL, async img => {
-            //   const _self = this;
-            //   img.index = index;
-            //   const oImg = await img.set({
-            //     name: 'delete-btn',
-            //     left: item.pointInfo[0].x - 20,
-            //     top: item.pointInfo[0].y - 20,
-            //     width: 40,
-            //     height: 40,
-            //     angle: 0
-            //   }).scale(0.8);
-            //   this.canvas.add(oImg);
-            //   oImg.on('mousedown', function() {
-            //     _self.deleteObject();
-            //   });
-            // });
-            // }
+            fabric.Image.fromURL(self.deleteIconURL, async img => {
+              const _self = this
+              img.index = index
+              const oImg = await img.set({
+                name: 'delete-btn',
+                left: item.pointInfo[0].x - 20,
+                top: item.pointInfo[0].y - 20,
+                width: 40,
+                height: 40,
+                angle: 0
+              }).scale(0.8)
+              this.canvas.add(oImg)
+              oImg.on('mousedown', function() {
+                _self.deleteObject()
+              })
+            })
           }
         })
       })
@@ -641,12 +655,6 @@ export default {
         type: 'warning'
       }).then(() => {
         this.canvas.clear()
-        // 移除所有非背景图对象和删除按钮
-        // this.canvas._objects = this.canvas._objects.filter((item) => {
-        //   return item.isBgImg;
-        // });
-        // 重新渲染画布
-        // this.canvas.renderAll();
         this.isDrawing = false
         this.bgImgFlag = true
         const imgElement = document.getElementById('expImg')

src/views/visualCheck/venueDevice/area/index.vue

@@ -70,8 +70,12 @@
               区域标注
             </el-button>
           </ul>
-          <div v-if="activeIndex == 0" class="venue-preview">
-            <img :src="imageFloorUrl" :onerror="defaultImg" alt="">
+          <div v-show="activeIndex == 0" class="venue-preview">
+            <!-- <MarkCover v-if="currentMarkData && currentMarkData.signPoint" ref="markRefs2" :is-canvas-show="true" :current-mark-data="currentMarkData" :image-floor-url="imageFloorUrl" /> -->
+            <div v-show="currentMarkData && currentMarkData.signPoint">
+              <canvas id="canvasPreview" :width="width" :height="height" />
+            </div>
+            <img v-if="currentMarkData && !currentMarkData.signPoint" :src="imageFloorUrl" :onerror="defaultImg" alt="">
           </div>
           <div v-if="activeIndex == 1" class="venue-preview">
             <img :src="imageRegionUrl" :onerror="defaultImg" alt="">
@@ -135,11 +139,11 @@
     </el-dialog>
 
     <!-- 标注 -->
-    <el-dialog class="mark-dialog" :close-on-click-modal="false" :append-to-body="true" :title="titleMark" :visible.sync="markVisible">
+    <el-dialog class="mark-dialog" :close-on-click-modal="false" :append-to-body="true" :title="titleMark" :visible.sync="markVisible" :before-close="handleCloseDialog">
       <span class="dialog-right-top" />
       <span class="dialog-left-bottom" />
       <div class="setting-dialog">
-        <MarkCover :current-mark-data="currentMarkData" :image-floor-url="imageFloorUrl" />
+        <MarkCover ref="markRefs" :current-mark-data="currentMarkData" :image-floor-url="imageFloorUrl" />
       </div>
     </el-dialog>
   </div>
@@ -157,6 +161,7 @@ import MarkCover from '@/views/components/mark.vue'
 import Sortable from 'sortablejs'
 import { mapGetters } from 'vuex'
 import defaultImg from '@/assets/images/system/default-img.jpg'
+import { fabric } from 'fabric'
 
 const defaultForm = { id: null, floorId: null, regionName: null, regionCode: null, regionDescription: null, regionMap: null, signPoint: null }
 export default {
@@ -175,6 +180,7 @@ export default {
   mixins: [presenter(), header(), form(defaultForm), crud()],
   data() {
     return {
+      canvasPreview: {},
       floorOptions: [],
       labelName: '区域地图',
       permission: {
@@ -201,7 +207,11 @@ export default {
       sortVisible: false, // 排序dialog
       markVisible: false, // 区域标注
       titleMark: '区域标注',
-      currentMarkData: null
+      currentMarkData: null,
+
+      width: 900,
+      height: 600,
+      drawWidth: 2 // 笔触宽度
     }
   },
   computed: {
@@ -210,6 +220,14 @@ export default {
       'baseApi'
     ])
   },
+  watch: {
+    width() {
+      this.canvasPreview.setWidth(this.width)
+    },
+    height() {
+      this.canvasPreview.setHeight(this.height)
+    }
+  },
   methods: {
     [CRUD.HOOK.beforeRefresh]() {
       this.getLibraryFloorListAll()
@@ -237,12 +255,15 @@ export default {
     clickRowHandler(row) {
       this.$refs.table.clearSelection()
       this.$refs.table.toggleRowSelection(row)
-
       // http://192.168.99.67:12010/api/fileRelevant/getImg?imgId=f6d3ecea-0456-4429-ba77-1a4921d5c806
-
+      this.currentMarkData = row
       if (this.activeIndex === 0) {
         if (row.floorMap) {
           this.imageFloorUrl = this.baseApi + '/api/fileRelevant/getImg?imgId=' + row.floorMap
+          if (row.signPoint) {
+            const drawinfo = JSON.parse(row.signPoint)
+            this.initCanvasPreview(drawinfo)
+          }
         } else {
           this.imageFloorUrl = this.defaultImg
         }
@@ -256,9 +277,13 @@ export default {
     },
     changeActiveTab(data) {
       this.activeIndex = data
-      console.log(this.crud.selections)
       if (this.crud.selections.length === 1) {
+        // if (this.canvasPreview) {
+        //   this.canvasPreview.clear()
+        //   this.canvasPreview.dispose()
+        // }
         if (this.crud.selections[0].floorMap) {
+          this.currentMarkData = this.crud.selections[0]
           this.imageFloorUrl = this.baseApi + '/api/fileRelevant/getImg?imgId=' + this.crud.selections[0].floorMap
         } else {
           this.imageFloorUrl = this.defaultImg
@@ -268,6 +293,14 @@ export default {
         } else {
           this.imageRegionUrl = this.defaultImg
         }
+
+        if (this.activeIndex === 0) {
+          if (this.crud.selections[0].signPoint) {
+            console.log('1111')
+            const drawinfo = JSON.parse(this.crud.selections[0].signPoint)
+            this.initCanvasPreview(drawinfo)
+          }
+        }
       }
     },
     async handleMark() {
@@ -339,6 +372,88 @@ export default {
         this.$message({ message: '保存成功', type: 'success', offset: 8 })
         this.crud.refresh()
       })
+    },
+    handleCloseDialog() {
+      // this.$refs.markRefs.canvas.clear()
+      // this.$refs.markRefs.canvas.dispose()
+      this.markVisible = false
+    },
+    initCanvasPreview(drawinfo) {
+      this.canvasPreview = new fabric.Canvas('canvasPreview', {
+        skipTargetFind: false,
+        selectable: false,
+        selection: false
+      })
+
+      this.canvasPreview.selectionColor = 'rgba(0,0,0,0.05)'
+      this.loadDrawPreview(drawinfo)
+      this.canvasPreview.on('mouse:wheel', this.mouse)
+    },
+    // 鼠标滚轮放大缩小
+    mouse(e) {
+      if (undefined === e) return
+      let zoom = (e.e.deltaY > 0 ? -0.1 : 0.1) + this.canvasPreview.getZoom()
+      zoom = Math.max(0.8, zoom)
+      // 最小为原来的1/10
+      zoom = Math.min(3, zoom)
+      // 最大是原来的3倍
+      const zoomPoint = new fabric.Point(e.e.pageX, e.e.pageY)
+      this.canvasPreview.zoomToPoint(zoomPoint, zoom)
+    },
+    // 回显详情信息
+    loadDrawPreview(drawinfo) {
+      const self = this
+      const pointGroup = drawinfo.pointInfo
+      const imgInfo = drawinfo.imgInfo
+      imgInfo.src = self.imageFloorUrl
+      // 加载底图
+      fabric.util.enlivenObjects([imgInfo], objects => {
+        objects.forEach(o => {
+          o.selectable = false
+          o.hasControls = false
+          o.centeredScaling = false
+          self.canvasPreview.add(o)
+        })
+        // 处理多边形绘制回显操作
+        pointGroup.forEach(async(item, index) => {
+          if (item.pointInfo !== '') {
+            const polygon = new fabric.Polygon(item.pointInfo, {
+              name: item.name,
+              stroke: 'rgba(196,43, 1, 1)',
+              strokeWidth: self.drawWidth,
+              fill: 'rgba(196,43, 1, 0.3)',
+              opacity: 1,
+              selectable: false,
+              hasBorders: false,
+              hasControls: false,
+              originX: 'left', // 设置原点为左上角
+              originY: 'top' // 设置原点为左上角
+            })
+            polygon.index = index
+            self.canvasPreview.add(polygon)
+
+            polygon.on('mousedown', function(e) {
+              console.log('Rect ' + (index + 1) + ' clicked', e)
+              console.log('e.target.name', e.target.name)
+            })
+
+            polygon.on('mouseover', function(e) {
+              console.log('e', e)
+              console.log('e.target', e.target)
+              console.log('e.target.name', e.target.name)
+              this.set({ opacity: 0.3, hoverCursor: 'pointer' })
+              self.canvasPreview.renderAll()
+            })
+
+            // 监听鼠标移出事件
+            polygon.on('mouseout', function() {
+              this.set({ opacity: 1 })
+              self.canvasPreview.renderAll()
+            })
+          }
+        })
+      })
+      self.canvasPreview.renderAll()
     }
   }
 }