实景图等比缩放适应在固定宽高内

hanbaoshan

2020-12-24 b92fdd535cf66641422ba84fe2d86952f0318248

 src/pages/panoramicView/components/TracePlot.vue

@@ -14,11 +14,17 @@
      <el-button @click="searchData" size="small" type="primary" class="btn-search">查 询</el-button>
    </div>

    <canvas
    <!-- <canvas
      ref="trackArea"
      :width="cW"
      :height="cH"
      :style="{backgroundImage:`url(${panoramaPath})`}"
    ></canvas> -->
    <canvas
      ref="trackArea"
      width="960"
      height="540"
      :style="{backgroundImage:`url(${panoramaPath})`,backgroundSize:`${bgW}px ${bgH}px`}"
    ></canvas>
  </div>
</template>
@@ -44,6 +50,10 @@
      colorArr: ['#F4DA40', '#0092BC', '#97D700', '#D0006F', '#D86018', '#653279', '#A45A2A', '#004B87', '#008C95', '#AA0061'],
      searchStartTimeStamp: 0,
      searchEndTimeStamp: 0,
      fixedW: 960,
      fixedH: 540,
      bgW: 0,
      bgH: 0
    }
  },
  mounted () {
@@ -62,10 +72,18 @@
      let _this = this;
      getPanoramaPic().then(res => {
        let { panoramaPath, width, height } = res.data;
        _this.panoramaPath = panoramaPath;
        _this.cW = width;
        _this.cH = height;

        _this.panoramaPath = panoramaPath + '?' + Math.random();
        //_this.cW = width;
        //_this.cH = height;
        //判断长宽比
        let ratio = res.data.width/res.data.height;
        if(ratio > (_this.fixedW/_this.fixedH)){
          _this.bgW = _this.fixedW;
          _this.bgH = _this.bgW*res.data.height/res.data.width;
        }else{
          _this.bgH = _this.fixedH;
          _this.bgW = res.data.width*_this.bgH/res.data.height;
        }
      })
    },
    drawTracePath () {
@@ -105,7 +123,7 @@
      let _this = this;
      var param = {
        page: 1,
        size: 15,
        size: 100,
        searchTime: this.searchTime,
        alarmlevel: [],
        inputValue: '',
@@ -116,7 +134,6 @@
      };
      getSearchList(param).then(res => {
        let filterArr = [];
        debugger
        if(Date.parse(_this.searchTime[0]) > _this.searchEndTimeStamp || Date.parse(_this.searchTime[1]) < _this.searchStartTimeStamp){
          _this.activeObjHashMap = [];
          _this.actObj = {}
@@ -171,7 +188,7 @@
    }
  }
  canvas {
    background: lightsteelblue;
    //background: lightsteelblue;
    background-repeat: no-repeat;
  }
}