Exemple de code pour implémenter des images avec zoom au doigt dans l'applet WeChat

Cet article présente principalement l'exemple de code pour implémenter les images avec zoom au doigt dans l'applet WeChat. Maintenant, je le partage avec vous et le donne comme référence.

L'entreprise développe une applet WeChat. PM souhaite répondre aux besoins suivants :

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. Parlons de la façon d'utiliser js pour implémenter cette fonction.

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 au suivant, donc je ne l'expliquerai pas :

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

Ce qui précède est ce que j'ai compilé pour vous, j'espère qu'il vous sera utile dans le. avenir.

Articles associés :

Comment introduire l'icône d'icône dans le projet Vue

Vérification du format d'adresse e-mail en JavaScript

Introduction aux fonctions de partage de temps pour l'optimisation des performances javascript

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!