Beispielcode für die Implementierung von Fingerzoombildern im WeChat-Applet

In diesem Artikel wird hauptsächlich der Beispielcode für die Implementierung von Fingerzoombildern im WeChat-Applet vorgestellt. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

Das Unternehmen entwickelt ein WeChat-Applet. PM möchte die folgenden Anforderungen erfüllen:

Verwenden Sie Ihre Finger, um Bilder zu vergrößern und zu verkleinern. Bevor diese Anforderung realisiert wurde, wusste ich tatsächlich nicht, dass es in offiziellen WeChat-Konten und WeChat-Miniprogrammen eine native API gibt, die diesen Spezialeffekt bietet, und WeChat Moments verwendet diese API ebenfalls. wx.previewImage, das ist es. Vorschaubild. In der Entwicklungsumgebung ist es nicht möglich, Bilder auf dem lokalen Computer in der Vorschau anzuzeigen. Außerdem können Bilder auf Ihrem echten Telefon und Bilder auf dem http-Server in der Vorschau angezeigt werden, und die Zoomfunktion ist sehr flüssig. Lassen Sie uns darüber sprechen, wie Sie diese Funktion mit js implementieren.

Laden Sie zuerst den Quellcode hoch und analysieren Sie ihn dann Schritt für Schritt:

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

Die WXML-Datei entspricht der folgenden: Deshalb werde ich es nicht erklären:

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

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So führen Sie ein Symbolsymbol in ein Vue-Projekt ein

Überprüfung des E-Mail-Adressformats in JavaScript

Einführung in Time-Sharing-Funktionen zur Javascript-Leistungsoptimierung

Das obige ist der detaillierte Inhalt vonBeispielcode für die Implementierung von Fingerzoombildern im WeChat-Applet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!