桌面分屏指示器添加临界条件判断是否显示

hanbaoshan

2020-12-07 17b3cf1889304ae7f861ef05e7735d61f9c18e74

 src/components/player/index.vue

@@ -79,22 +79,6 @@
    };
  },
  watch: {
    // "TreeDataPool.selectedNode": async function(node){
    //   if(node){
    //     console.log('TreeDataPool.selectedNode')
    //     console.log(node)
    //     //this.Camera.cameraId = node.id;
    //     const res = await getAllPolygon({cameraId: node.id});

    //     this.canvasData.line = res.data.line;
    //     this.canvasData.rect = res.data.rect;
    //     this.canvasData.arrow = res.data.arrow;
    //     this.canvasData.polygon = res.data.polygon;
    //     console.log(this.canvasData)
    //     this.clickSelect(this.canvasData);
    //   }
    // },
 
    rtspUrl: function (newVal, oldVal) {
      if (newVal !== oldVal) {
        if (this.wfs.config) {
@@ -112,7 +96,7 @@
      if (id !== this.wfsId) {
        return
      }

      
      if (this.wfs.websocketLoader && this.wfs.websocketLoader.client) {
        if (this.wfs.websocketLoader.client.disconnected) {
          this.clickStart();
@@ -135,7 +119,6 @@
      if (cameraId == "") {
        cameraId = this.getUuid();
      }

      if (Wfs.isSupported()) {
        let wsAddr = this.wsAddr;
        let cameraInfo = {
@@ -181,11 +164,6 @@
        _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion);
        _this.ctx.lineTo(v.location[1].x / _this.showProportion, v.location[1].y / _this.showProportion);
        _this.ctx.stroke();
        // _this.showRemarks(
        //   v.location[0].x / _this.showProportion,
        //   v.location[0].y / _this.showProportion,
        //   v.name
        // );
        _this.canvas.style.cursor = "default";
      });
      _this.canvasData.rect.forEach(function (v, i) {
@@ -197,11 +175,6 @@
        _this.ctx.lineTo(v.location[3].x / _this.showProportion, v.location[3].y / _this.showProportion);
        _this.ctx.lineTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion);
        _this.ctx.stroke();
        // _this.showRemarks(
        //   v.location[0].x / _this.showProportion,
        //   v.location[0].y / _this.showProportion,
        //   v.name
        // );
        _this.canvas.style.cursor = "default";
        
      });
@@ -217,12 +190,6 @@
          30,
          "yellow"
        ); 
        // 绘制方法
        // _this.showRemarks(
        //   v.location[0].x / _this.showProportion,
        //   v.location[0].y / _this.showProportion,
        //   v.name
        // );
        _this.canvas.style.cursor = "default";
        
      });
@@ -238,11 +205,6 @@
        }
        _this.ctx.closePath();
        _this.ctx.stroke();
        // _this.showRemarks(
        //   v.location[v.location.length - 1].x / _this.showProportion,
        //   v.location[v.location.length - 1].y / _this.showProportionY,
        //   v.name
        // );
        _this.canvas.style.cursor = "default";
        
      });
@@ -320,30 +282,15 @@
      this.canvasData.arrow = res.data.arrow;
      this.canvasData.polygon = res.data.polygon;
      console.log(this.canvasData)
      // this.canvasData = {
      //     line: [],
      //     arrow: [],
      //     polygon: [{id:'uuid', name: '多边形1', location: [{ x: 735, y: 155 }, { x: 830, y: 156 }, { x: 809, y: 351 }, { x: 809, y: 364 }, { x: 753, y: 396 }, { x: 755, y: 520 },{ x: 706, y: 524 },{ x: 722, y: 392 },{x:758,y:280},{ x: 735, y: 155 }] }],
      //     //rect: rsp.data.rect
      //     rect: []
      //   };
      this.clickSelect(this.canvasData);
    }
  },
  mounted() {
    //获取video宽高并给区域canvas赋值
    //this.setWidthHeight();
    this.clickStart();
    
    window.addEventListener('resize',()=>{
      //this.setWidthHeight();
      //this.initArea();
    });
    this.$nextTick(()=>{
      this.canvas = this.$refs.areaCanvas;
      this.ctx = this.canvas.getContext("2d");
      this.ctx.lineWidth = 1;

      this.initArea();

    })