L'applet WeChat implémente le partage de code d'image avec zoom doigt

Utilisez vos doigts pour zoomer et dézoomer sur les images. En fait, avant que cette exigence ne soit réalisée, je ne savais pas qu'il existe une API native dans les comptes officiels WeChat et les mini-programmes WeChat qui sont livrés avec cet effet spécial, et WeChat Moments utilise également cette API. wx.previewImage, c'est tout. Aperçu de l'image. En plus de ne pas pouvoir prévisualiser les images sur l'ordinateur local dans l'environnement de développement, les images sur votre vrai téléphone et les images sur le serveur http peuvent être prévisualisées, et la fonction de zoom est très fluide. Cet article vous présente principalement l'exemple de code pour implémenter des images avec zoom au doigt dans l'applet WeChat.

Téléchargez d'abord le code source, puis analysez-le étape par étape :

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

Le fichier wxml correspond à ce qui suit, donc je ne vais pas Je ne l'expliquerai pas davantage :

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

En écrivant ceci, j'ai découvert que même si le mini programme ne peut pas utiliser ce js, ma page ht5 peut toujours être utilisée, haha.

Recommandations associées :

Introduction aux exemples d'images de mise à l'échelle PHP

Mise à l'échelle proportionnelle JavaScript des images

Mise à l'échelle proportionnelle de l'image PHP et partage de code de découpe d'image

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!