WeChat applet implements finger zoom picture code sharing

Use your fingers to zoom the picture. In fact, before this requirement was realized, I didn't know that there is a native API in WeChat official accounts and WeChat mini programs that comes with this special effect, and WeChat Moments also uses this API. wx.previewImage, that's it. preview picture. In addition to not being able to preview the pictures of the local computer in the development environment, the pictures of your real mobile phone and the pictures on the http server can be previewed, and the zoom function is very smooth. This article mainly introduces you to the sample code for implementing finger zoom pictures in the WeChat applet.

First upload the source code, and then analyze it step by step:

Page({
  data: {
    touch: {
      distance: 0,
      scale: 1,
      baseWidth: null,
      baseHeight: null,
      scaleWidth: null,
      scaleHeight: null
    }
  },
  touchstartCallback: function(e) {
    // 单手指缩放开始，也不做任何处理
    if(e.touches.length == 1) return
    console.log('双手指触发开始')
    // 注意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,
    })
  },
  touchmoveCallback: function(e) {
    let touch = this.data.touch
    // 单手指缩放我们不做任何操作
    if(e.touches.length == 1) 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({
      &#39;touch.distance&#39;: distance,
      &#39;touch.scale&#39;: newScale,
      &#39;touch.scaleWidth&#39;: scaleWidth,
      &#39;touch.scaleHeight&#39;: scaleHeight,
      &#39;touch.diff&#39;: distanceDiff
    })
  },
  bindload: function(e) {
   // bindload 这个api是<image>组件的api类似<img>的onload属性
   this.setData({
     &#39;touch.baseWidth&#39;: e.detail.width,
     &#39;touch.baseHeight&#39;: e.detail.height,
     &#39;touch.scaleWidth&#39;: e.detail.width,
     &#39;touch.scaleHeight&#39;: e.detail.height
   })
  }
})

The wxml file corresponds to the following, so I won’t explain it:

<view class="container">
  <view bindtouchmove="touchmoveCallback" bindtouchstart="touchstartCallback">
    <image src="../../resources/pic/cat.jpg" style="width: {{ touch.scaleWidth }}px;height: {{ touch.scaleHeight }}px" bindload="bindload"></image>
  </view>
</view>

After writing this, I discovered that even if the mini program cannot use this js, my ht5 page can still be used, haha.

Related recommendations:

php Introduction to scaling image examples

JavaScript equal-proportion scaling of images

php proportional scaling and cutting image code sharing

The above is the detailed content of WeChat applet implements finger zoom picture code sharing. For more information, please follow other related articles on the PHP Chinese website!