微信小程序实现双指缩放图片功能

前言

本文分析怎么在微信小程序实现双指缩放图片的功能。

实现过程

1. 文件index.wxml和index.wxss代码如下，这一块比较简单，可自行查看，不做过多分析；

<!--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="../../images/big.jpg" style="width:{{scaleWidth }}px;height:{{scaleHeight}}px" bindload="imgload"></image><!-- <image mode="aspectFit" src="../../images/small.jpg" style="width:{{scaleWidth }}px;height:{{scaleHeight}}px" bindload="imgload"></image> --></scroll-view></view>
</view>

/**index.wxss**/
.container {margin-top: 30rpx;
}.container .title {margin-bottom: 20rpx;font-weight: bold;
}

2. 文件index.js存放所有功能的逻辑代码，主要思路是先计算触摸时双指的距离（distance），然后计算移动过程的双指距离并跟触摸时的距离的差值（distanceDiff）来计算缩放比例（newScale），最后用计算出的缩放比例来缩放图片（scaleWidth和scaleHeight）；代码实现如下：

1）新建公共方法calcDistance，用来计算双指的距离；

2）新建方法imgload，当图片载入完毕时获取图片实际宽度（baseWidth）和高度（baseHeight）、用来计算的固定宽度（initWidth，原图宽度大于屏幕宽度则设置为屏幕宽度，反之则设置为原图宽度）和高度（initHeight，原图宽度大于屏幕宽度则设置为原图高度/倍数，反之则设置为原图高度）、图片缩放后的宽度（scaleWidth，初始化跟initWidth一致）和高度（scaleHeight，初始化跟initHeight一致）；

3）新建方法touchstartCallback，计算双指触摸时双指的距离distance；

4）新建方法touchmoveCallback，计算手指移动时双指的距离distance，跟触摸距离相减得出差值distanceDiff；然后利用差值计算出缩放比例newScale，最后使用newScale缩放图片，从而实现缩放效果。

//index.js
Page({/*** 页面的初始数据*/data: {distance: 0, // 手指移动的距离scale: 1, // 缩放比例baseWidth: '', // 图片实际宽度baseHeight: '', // 图片实际高度initWidth: '', // 图片默认显示宽度initHeight: '', // 图片默认显示高度scaleWidth: '', // 图片缩放后的宽度scaleHeight: '', // 图片缩放后的高度},/*** 监听图片加载成功时触发*/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倍};// 最小缩放到0.3if (newScale <= 0.3) {newScale = 0.3;};let scaleWidth = newScale * this.data.initWidth;let scaleHeight = newScale * this.data.initHeight;this.setData({distance: distance,scale: newScale,scaleWidth: scaleWidth,scaleHeight: scaleHeight,diff: distanceDiff});},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {// 获取屏幕宽度this.width = wx.getSystemInfoSync().windowWidth;},/*** 计算两个手指距离*/calcDistance(pos0, pos1) {let xMove = pos1.clientX - pos0.clientX;let yMove = pos1.clientY - pos0.clientY;return (Math.sqrt(xMove * xMove + yMove * yMove));}
})

扫描公众号，了解更多实例分享：

微信小程序实现双指缩放图片功能相关推荐

微信小程序之保存动态图片功能
效果图:(下面是电脑版,真机也可以调试成功) 1.调用wx.downloadFile方法下载图片到本地. wx.downloadFile({url: path,success: function(re ...
微信小程序 — 打开相册选择图片功能
点击页面的相册按钮如何打开系统相册.选择图片: <text class="nav-item1" bindtap="navToalbum">相册< ...
小程序源码：强大的多功能图片处理器微信小程序源码下载图片画框合成-多玩法安装简单
大家好这是以开以图片为主题的一款小程序里面拥有了多种的图片处理功能,也算是比较强大的一款另外小编最喜欢的就是里面的图片画框合成这个功能该功能里面有N种画框模板,然后画框的尺寸根据您的图片自适应处 ...
[微信小程序]聊天对话(文本,图片)的功能(完整代码附效果图)
相关文章: 1.小程序聊天群,发送语音,文字,图片. 2.微信小程序集成腾讯IM,实现实时音视频通话,1V1聊天 3.云开发微信小程序聊天群 4.接入网易云信IM即时通讯的微信小程序聊天室 5.微信小 ...
微信小程序做一个圆形图片旋转可以控制开始和结束-音乐播放器的图片旋转功能
微信小程序做一个圆形图片旋转可以控制开始和结束 1.在 WXML 文件中添加一个标签,并设置图片的 src 和样式,并为其绑定一个 animation 用来控制旋转动画. <image src ...
微信小程序WebSocket实现聊天对话功能完整源码
相关文章: 1.小程序聊天群,发送语音,文字,图片. 2.微信小程序集成腾讯IM,实现实时音视频通话,1V1聊天 3.云开发微信小程序聊天群 4.接入网易云信IM即时通讯的微信小程序聊天室 5.微信小 ...
怎么实现微信小程序云开发拼团功能？
[微信云开发教程]怎么实现微信小程序云开发拼团功能? 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录 [微 ...
微信小程序网悦新闻开发--功能介绍（一）
目录微信小程序网悦新闻开发--功能介绍(一) 微信小程序网悦新闻开发--小程序配置(二) 微信小程序网悦新闻开发--首页模块开发(三) 微信小程序网悦新闻开发--视频模块开发(四) 微信小程序网悦新 ...
【微信小程序】将base64图片保存至本地
需求描述微信小程序中,下载一个报告文件,直接可获取到的是报告图片的base64格式. 参考文章 1.微信小程序实现图片下载功能 2.微信小程序把base64的图片保存到手机相册代码实现 1.wxm ...

微信小程序实现双指缩放图片功能

前言

实现过程

微信小程序实现双指缩放图片功能相关推荐

最新文章

热门文章