admin 管理员组

文章数量: 894082

微信小程序,图片双指放大缩小

不说废话,直接上代码,复制到项目改就完事了

wxml代码

<!--index.wxml-->
<view class='wrapper'><view class="container"><view class="title">双指缩放图片</view><scroll-view class='images' scroll-y="true" scroll-x="true" bindtouchmove="touchmoveCallback" bindtouchstart="touchstartCallback"><image mode="aspectFit" src=".png" style="width:{{scaleWidth }}px;height:{{scaleHeight}}px" bindload="imgload"></image></scroll-view></view>
</view>

js代码

//index.js
Page({/*** 页面的初始数据*/data: {distance: 0, // 手指移动的距离scale: 1, // 缩放比例baseWidth: '', // 图片实际宽度baseHeight: '', // 图片实际高度initWidth: '', // 图片默认显示宽度initHeight: '', // 图片默认显示高度scaleWidth: '', // 图片缩放后的宽度scaleHeight: '', // 图片缩放后的高度},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {// 获取屏幕宽度this.width = wx.getSystemInfoSync().windowWidth;},/*** 监听图片加载成功时触发*/imgload: function (e) {this.multiple = e.detail.width / this.width; // 计算原图和默认显示的倍数let height = this.multiple > 1 ? e.detail.height / this.multiple : e.detail.height; // 等比例计算出默认高度let width = this.multiple > 1 ? this.width : e.detail.width;this.setData({baseWidth: e.detail.width, // 获取图片实际宽度baseHeight: e.detail.height, // 获取图片实际高度initWidth: width,initHeight: height,scaleWidth: width,scaleHeight: height,})},/*** 双手指触发开始 计算开始触发两个手指坐标的距离*/touchstartCallback: function (e) {// 单手指缩放开始,不做任何处理if (e.touches.length == 1) return;let distance = this.calcDistance(e.touches[0], e.touches[1]);this.setData({'distance': distance,})},/*** 双手指移动   计算两个手指坐标和距离*/touchmoveCallback: function (e) {// 单手指缩放不做任何操作if (e.touches.length == 1) return;let distance = this.calcDistance(e.touches[0], e.touches[1]);// 计算移动的过程中实际移动了多少的距离let distanceDiff = distance - this.data.distance;let newScale = this.data.scale + 0.005 * distanceDiff;if (newScale >= this.multiple && this.multiple > 2) { // 原图比较大情况newScale = this.multiple;} else if (this.multiple < 2 && newScale >= 2) { // 原图较小情况newScale = 2; // 最大2倍};// 最小缩放到1if (newScale <= 1) {newScale = 1;};let scaleWidth = newScale * this.data.initWidth;let scaleHeight = newScale * this.data.initHeight;this.setData({distance: distance,scale: newScale,scaleWidth: scaleWidth,scaleHeight: scaleHeight,diff: distanceDiff});},/*** 计算两个手指距离*/calcDistance(pos0, pos1) {let xMove = pos1.clientX - pos0.clientX;let yMove = pos1.clientY - pos0.clientY;return (Math.sqrt(xMove * xMove + yMove * yMove));}
})

本文标签: 微信小程序,图片双指放大缩小