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


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 相关文章推荐
javascript中的注释使用与注意事项小结
Sep 20 Javascript
Jquery之Ajax运用 学习运用篇
Sep 26 Javascript
JavaScript事件委托的技术原理探讨示例
Apr 17 Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 Javascript
Vue.js 表单校验插件
Aug 14 Javascript
微信小程序 教程之wxapp 视图容器 view
Oct 19 Javascript
jQuery弹出层插件popShow(改进版)用法示例
Jan 23 Javascript
DOM事件探秘篇
Feb 15 Javascript
js判断手机系统是android还是ios
Mar 07 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
node实现socket链接与GPRS进行通信的方法
May 20 Javascript
vue 实现动态路由的方法
Jul 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
星际争霸 Starcraft 游戏介绍
2020/03/14 星际争霸
yii通过小物件生成view的方法
2016/10/08 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
PHP正则表达式匹配替换与分割功能实例浅析
2017/02/04 PHP
PHP查询分页的实现代码
2017/06/09 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
修改file按钮的默认样式实现代码
2013/04/23 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
2014/11/02 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
2016/06/22 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
js实现日历与定时器
2017/02/22 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
jQuery 导航自动跟随滚动的实现代码
2018/05/30 jQuery
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
详解vue 2.6 中 slot 的新用法
2019/07/09 Javascript
turn.js异步加载实现翻书效果
2019/07/25 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
Jquery实现获取子元素的方法分析
2019/08/24 jQuery
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
python实现指定字符串补全空格的方法
2015/04/30 Python
Python 实现文件的全备份和差异备份详解
2016/12/27 Python
Python深度优先算法生成迷宫
2018/01/22 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
解决Keras TensorFlow 混编中 trainable=False设置无效问题
2020/06/28 Python
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
教育学专业毕业生的自我鉴定
2013/11/26 职场文书
中英文自我评价语句
2013/12/20 职场文书
民政工作个人总结
2015/02/28 职场文书
经济纠纷起诉状
2015/05/20 职场文书
《失物招领》教学反思
2016/02/20 职场文书
银行求职信范文
2019/05/13 职场文书
导游词之湖北梁子湖
2019/11/07 职场文书