微信小程序实现通过双向滑动缩放图片大小的方法


Posted in Javascript onDecember 30, 2018

本文实例讲述了微信小程序实现通过双向滑动缩放图片大小的方法。分享给大家供大家参考,具体如下:

在做小程序开发的过程中,后端传来一张图片地图,需要实现双手指滑动,使图片缩放,最终得出了一下代码:

js :

Page({
 data: {
  touch: {
   distance: 0,
   scale: 1,
   baseWidth: null,
   baseHeight: null,
   scaleWidth: null,
   scaleHeight: null
  }
 },
 touchStartHandle(e) {
 // 单手指缩放开始,也不做任何处理
 if (e.touches.length == 1) {
   console.log("单滑了")
 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,
  })
 },
 touchMoveHandle(e) {
  let touch = this.data.touch
 // 单手指缩放我们不做任何操作
 if (e.touches.length == 1) {
   console.log("单滑了");
 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({
 'touch.distance': distance,
 'touch.scale': newScale,
 'touch.scaleWidth': scaleWidth,
 'touch.scaleHeight': scaleHeight,
 'touch.diff': distanceDiff
  })
 },
 load: function (e) {
 // bindload 这个api是<image>组件的api类似<img>的onload属性
 this.setData({
 'touch.baseWidth': e.detail.width,
 'touch.baseHeight': e.detail.height,
 'touch.scaleWidth': e.detail.width,
 'touch.scaleHeight': e.detail.height
  });
 }
})

然后将新获得的图片宽度和高度赋值给图片即可实现滑动缩放

wxml:

<image mode='scaleToFill' src='../../../images/01.jpg'
bindtouchstart='touchStartHandle'
bindtouchmove='touchMoveHandle'
bindload='load'
style="width: {{ touch.scaleWidth }}px;
height: {{ touch.scaleHeight }}px"></image>

最后,通过手机预览,就会发现已达到预想的效果!

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
jquery $.each()使用探讨
Sep 23 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
通过jquery 获取URL参数并进行转码
Aug 18 Javascript
jquery实现聚光灯效果的方法
Feb 06 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
实例学习JavaScript读取和写入cookie
Jan 29 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 Javascript
详解js静态检查工具eslint配置文件
Nov 23 Javascript
vue项目前端错误收集之sentry教程详解
May 27 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 #Javascript
微信小程序提交form操作示例
Dec 30 #Javascript
bootstrap下拉分页样式 带跳转页码
Dec 29 #Javascript
详解vue 兼容IE报错解决方案
Dec 29 #Javascript
玩转Koa之koa-router原理解析
Dec 29 #Javascript
Bootstrap Paginator+PageHelper实现分页效果
Dec 29 #Javascript
玩转Koa之核心原理分析
Dec 29 #Javascript
You might like
Zend引擎的发展 [15]
2006/10/09 PHP
PHP $_FILES中error返回值详解
2014/01/30 PHP
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
php单例模式示例分享
2015/02/12 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
PHP培训要多少钱
2017/06/06 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
关于捕获用户何时点击window.onbeforeunload的取消事件
2011/03/06 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
nodeJS模块简单用法示例
2018/04/21 NodeJs
在angular 6中使用 less 的实例代码
2018/05/13 Javascript
Angular网络请求的封装方法
2018/05/22 Javascript
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
python实现随机梯度下降(SGD)
2020/03/24 Python
python实现简易内存监控
2018/06/21 Python
如何用Python合并lmdb文件
2018/07/02 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
python根据多个文件名批量查找文件
2019/08/13 Python
python数据库编程 Mysql实现通讯录
2020/03/27 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
Python Pandas 对列/行进行选择,增加,删除操作
2020/05/17 Python
金融专业应届生求职信
2013/11/02 职场文书
本科毕业生专业自荐书范文
2014/02/05 职场文书
四年级科学教学反思
2014/02/10 职场文书
生物科学专业自荐书
2014/06/20 职场文书
辞职信标准格式
2015/02/27 职场文书
小学重阳节活动总结
2015/03/24 职场文书
焦裕禄观后感
2015/06/03 职场文书
环保证明
2015/06/23 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书