圖片縮放存檔 2022-05-07

<template>
  <view class="page-bg">
    <view class="main-container">
      <view class="tl-section-0">
        <view class="tl-btn-256">自診評估</view>
        <view class="tl-btn-256">多多運動！</view>

        <view class="tl-p-right">
          <view class="tl-row-75">常見疾病</view>
          <view class="tl-row-75 border-t-b">腫瘤癌症</view>
          <view class="tl-row-75">搜 索</view>
        </view>
      </view>

      <scroll-view scroll-x="true" scroll-y="true" style="width: 100vw;height: 100vh;overflow: auto;"  @touchstart="startMap" @touchmove="moveMap">
        <image class="img" mode="aspectFill" lazy-load='true' @click="bindimg" :src="map" :style="'width:'+scaleWidth+'px;height: '+scaleHeight+'px;image-rendering: pixelated;align-self: center;'"></image>
      </scroll-view>

    </view>
    <view-tabbar :current="1"></view-tabbar>
  </view>



</template>


<script>
    import Tabbar from '@/components/Tabbar/tabbar.vue'
    export default {
        components: {
            'view-tabbar': Tabbar
        },
        data() {
            return {
                current:1,
        distance: 0,    //手指移動的距離
        scale: 1,   //圖片的比例
        w: 600, //圖片真實寬度
        h: 750, //圖片真實高度
        scaleWidth: 1400,   //圖片設顯示寬度
        scaleHeight: 1896,  //圖片設顯示高度
        map:'https://file.genepre.com/test111/11.png'
            }
        },
        onShow() {
            uni.hideTabBar({
                animation: false
            })
            
            console.log(this.$mp.page.getTabBar,'tab')
            const page = this.$mp.page  
            if (typeof page.getTabBar === 'function' &&  
                   page.getTabBar()) {  
                       console.log('進入了嘛')
                   page.getTabBar().setData({  
                        selected: 1
                  })  
            }
        },
        methods: {
      startMap(e){
        // 單手指縮放開始，不做任何處理
        if (e.touches.length == 1) return;
        // 當兩根手指放上去的時候，將距離(distance)初始化。
        let xMove = e.touches[1].clientX - e.touches[0].clientX;
        let yMove = e.touches[1].clientY - e.touches[0].clientY;
        //計算開始觸發兩個手指座標的距離
        let distance = Math.sqrt(xMove * xMove + yMove * yMove);
        this.distance = distance
      },
      moveMap(e){
        if (e.touches.length == 1) return;
        //雙手指運動 x移動後的座標和y移動後的座標
        let xMove = e.touches[1].clientX - e.touches[0].clientX;
        let yMove = e.touches[1].clientY - e.touches[0].clientY;
        //雙手指運動新的 ditance
        let distance = Math.sqrt(xMove * xMove + yMove * yMove);
        //計算移動的過程中實際移動了多少的距離
        let distanceDiff = distance - this.distance;
        let newScale = this.scale + 0.005 * distanceDiff

        if (newScale >= 1 && newScale <= 3) {
          let scaleWidth = newScale * this.w
          let scaleHeight = newScale * this.h
          this.distance= distance
          this.scale= newScale
          this.scaleWidth = scaleWidth
          this.scaleHeight = scaleHeight
        }else if(newScale >= 0.3 && newScale <= 1){
          let scaleWidth = newScale * this.w
          let scaleHeight = newScale * this.h
          this.distance= distance
          this.scale= newScale
          this.scaleWidth = scaleWidth
          this.scaleHeight = scaleHeight
        }
      }
        }
    }
</script>

<style lang="less" scoped>
.page-bg {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-size: 750rpx auto;
  background-color: #F9F9F9;
}

.main-container {
  width: 686rpx;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.tl-section-0{
  margin-top: 32rpx;
  position: relative;
}
.tl-p-right{
  position: absolute;
  top: 0;
  right: -32rpx;
  width: 221rpx;
  background: #FFFFFF;
  border-radius: 10rpx;
  text-align: center;
  .tl-row-75{
    height: 75rpx;
    line-height: 75rpx;
    width: 158rpx;
    margin: 0 auto;
  }
  .border-t-b{
    border-top: 2rpx solid #dedede;
    border-bottom: 2rpx solid #dedede;
  }
}
.tl-btn-256{
  width: 256rpx;
  height: 96rpx;
  line-height: 96rpx;
  background: #fff;
  border-radius: 48rpx;
  text-align: center;
  margin-bottom: 32rpx;
}

</style>

參考地址：https://www.csdn.net/tags/MtTaEgzsMDY5ODUxLWJsb2cO0O0O.html