小程序 图片缩放功能 及 获取位置信息

十年河东，十年河西，莫欺少年穷

学无止境，精益求精

获取当前位置信息：

https://blog.csdn.net/wxyf2018/article/details/94437899/

JS

import * as config from "../../utils/config/config"
Page({
  data: {
    imgUrl: config.config.swagger.imgUrl,
    touch: {
      distance: 0,
      scale: 1,
      baseWidth: 1033.5,
      baseHeight: 1476.375,
      scaleWidth: 1033.5,
      scaleHeight: 1476.375
    }
  },
  touchStartHandle(e) {
    // 单手指缩放开始，也不做任何处理 
    if (e.touches.length == 1) {
      //console.log("单滑了")
      return
    }
    // 注意touchstartCallback 真正代码的开始 
    // 一开始我并没有这个回调函数，会出现缩小的时候有瞬间被放大过程的bug 
    // 当两根手指放上去的时候，就将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.setData({
      'touch.distance': distance,
    })
  },
  touchMoveHandle(e) {
    let touch = this.data.touch
    // 单手指缩放我们不做任何操作 
    if (e.touches.length == 1) {
      // console.log("单滑了");
      return
    }
    // console.log('双手指运动开始')
    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 - touch.distance;
    let newScale = touch.scale + 0.005 * distanceDiff
    // 为了防止缩放得太大，所以scale需要限制，同理最小值也是 
    if (newScale >= 2) {
      newScale = 2
    }
    if (newScale <= 0.6) {
      newScale = 0.6
    }
    let scaleWidth = newScale * touch.baseWidth
    let scaleHeight = newScale * touch.baseHeight
    // 赋值 新的 => 旧的 
    this.setData({
      'touch.distance': distance,
      'touch.scale': newScale,
      'touch.scaleWidth': scaleWidth,
      'touch.scaleHeight': scaleHeight,
      'touch.diff': distanceDiff
    })
  },
  load: function (e) {
    // bindload 这个api是<image>组件的api类似<img>的onload属性  https://portal.one5a.com/DEV/images/user/lvyou/normal.png
    console.log(e)
    this.setData({
      'touch.baseWidth': e.detail.width / 8,
      'touch.baseHeight': e.detail.height / 8,
      'touch.scaleWidth': e.detail.width / 8,
      'touch.scaleHeight': e.detail.height / 8
    });

    console.log(this.data.touch)
  },
  onReady: function (e) {
    const ctx = wx.createCanvasContext('myCanvas')
    wx.getImageInfo({
      src: 'tabBarImg/normal.png',
      success (res) {
        console.log(res)
        ctx.drawImage(res.path,0,0,100,200)
      }
    })

    // const query = wx.createSelectorQuery()
    // query.select('#myCanvas')
    //   .fields({ node: true, size: true })
    //   .exec((res) => {
    //     const canvas = res[0].node
    //     const ctx = canvas.getContext('2d')

    //     // const dpr = wx.getSystemInfoSync().pixelRatio
    //     // canvas.width = res[0].width * dpr
    //     // canvas.height = res[0].height * dpr
    //     // ctx.scale(dpr, dpr)
    //     wx.getImageInfo({
    //       src: 'tabBarImg/normal.png',
    //       success (res) {
    //         console.log(res)
    //         ctx.drawImage(res.path,100,10000)
    //       }
    //     })
       
    //   })
   

  }


})

Page

<scroll-view scroll-x="true" bindscroll="scroll" class="scrolldiv">
  <image mode='scaleToFill' src='{{imgUrl}}lvyou/map.jpg' bindtouchstart='touchStartHandle'
      bindtouchmove='touchMoveHandle' bindload='load'
      style=" {{ touch.scaleWidth }}px;height: {{ touch.scaleHeight }}px" lazy-load="true">
      </image>

   
</scroll-view>