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

hanbaoshan

2020-12-24 b92fdd535cf66641422ba84fe2d86952f0318248

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

 src/pages/panoramicView/components/LabelMark.vue

@@ -126,14 +126,18 @@
              :on-change="onChange"
              :show-file-list="false"
            >
              <el-image
              <!-- <el-image
                class="preview"
                v-if="panoramaPath"
                :src="panoramaPath"
                fit="contain"
                @mousemove="showCurPos"
                @mouseout="isShowCurPos=false"
              ></el-image>
              ></el-image>-->
              <div class="img-wrap" v-if="panoramaPath" :style="{width:fixedW+'px',height:fixedH+'px'}">
                <img v-if="panoramaPath" :style="{width:imgW+'px',height:imgH+'px'}" :src="panoramaPath" @mousemove="showCurPos" @mouseout="isShowCurPos=false">
              </div>

              <div class="el-upload__text">
                将文件拖到此处，或
                <em>点击上传</em>
@@ -200,6 +204,10 @@
      snapshot_url: '',
      panoramaPath: '',
      cameraData: [],
      fixedW: 960,
      fixedH: 540,
      imgW: 0,
      imgH: 0,
      traceX: 0,
      traceY: 0,
      isShowCurPos: false,
@@ -302,7 +310,16 @@
    getPanorama () {
      let _this = this;
      getPanoramaPic().then(res => {
        _this.panoramaPath = res.data.panoramaPath
        //判断长宽比
        let ratio = res.data.width/res.data.height;
        if(ratio > (_this.fixedW/_this.fixedH)){
          _this.imgW = _this.fixedW;
          _this.imgH = _this.imgW*res.data.height/res.data.width;
        }else{
          _this.imgH = _this.fixedH;
          _this.imgW = res.data.width*_this.imgH/res.data.height;
        }
        _this.panoramaPath = res.data.panoramaPath + '?' + Math.random();
      })
    },
    showCurPos (e) {
@@ -324,16 +341,12 @@
      let param = new FormData();
      param.append('file', params.file)
      putPanoramaPic(param).then(res => {
        _this.panoramaPath = res.data.panoramaPath + '?' + Math.random();
        debugger
        //_this.panoramaPath = res.data.panoramaPath + '?' + Math.random();
        _this.getPanorama()
        _this.$parent.$refs['tracePlot'] && _this.$parent.$refs['tracePlot'].getPanorama();
      })
      // let fileReader = new FileReader()
      // fileReader.onload = () => {
      //   _this.file = fileReader.result;
      // }
      // if (_file) {
      //   fileReader.readAsDataURL(_file)
      // }

    },

    bindListen (e) {

 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;
  }
}