实时监控区域画布宽高及比例固定,添加区域图标,默认隐藏区域展示

hanbaoshan

2020-09-09 34353ebeaf2186198168d6a85ee1eb07688070d2

 src/components/player/index.vue

@@ -1,6 +1,6 @@
<template>
  <div class="video-player">
    <canvas v-show="showArea" id="area-canvas" ref="areaCanvas" :width="canvasWidth" :height="canvasHeight"></canvas>
    <canvas v-show="showArea" id="area-canvas" ref="areaCanvas"  width="960" height="540"></canvas>
    <video ref="videoPlayer" :poster="poster" preload="auto" muted></video>
    <div class="controls">
      <!-- 全屏 -->
@@ -44,7 +44,7 @@
    },
    showArea: {
      type: Boolean,
      default: true
      default: false
    }
  },
 
@@ -70,6 +70,8 @@
      //showProportionY: 3.58,
      showProportion: 1.036,
      showProportionY: 1.039,
      // showProportion: 1.666,
      // showProportionY: 1.666,
      canvas: null,
      ctx: null,
      canvasWidth: 0,
@@ -360,6 +362,7 @@
    setWidthHeight(){
      this.canvasWidth = this.$refs.videoPlayer.offsetWidth;
      this.canvasHeight = this.$refs.videoPlayer.offsetHeight;
      console.log(this.canvasWidth,this.canvasHeight)
    },
    async initArea(){
      console.log('init')
@@ -380,9 +383,10 @@
    }
  },
  mounted() {
    this.clickStart();
    //获取video宽高并给区域canvas赋值
    this.setWidthHeight();
    //this.setWidthHeight();
    this.clickStart();
    
    window.addEventListener('resize',()=>{
      //this.setWidthHeight();
      //this.initArea();