Das WeChat-Applet implementiert die Codefreigabe für Fingerzoom-Bilder

Vergrößern und verkleinern Sie Bilder mit Ihren Fingern. 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. Dieser Artikel stellt Ihnen hauptsächlich den Beispielcode zum Implementieren von Fingerzoombildern im WeChat-Applet vor.

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, also habe ich gewonnen. Ich erkläre es nicht weiter:

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

Als ich das schrieb, entdeckte ich, dass meine HT5-Seite auch dann verwendet werden kann, wenn das Miniprogramm dieses js nicht verwenden kann, haha.

Verwandte Empfehlungen:

Einführung in PHP-Skalierungsbeispiele für Bilder

JavaScript-proportionale Skalierung von Bildern

PHP-proportionale Bildskalierung und Codefreigabe zum Bildschneiden

Das obige ist der detaillierte Inhalt vonDas WeChat-Applet implementiert die Codefreigabe für Fingerzoom-Bilder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!