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


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 相关文章推荐
document.documentElement &amp;&amp; document.documentElement.scrollTop
Dec 01 Javascript
基于jquery的可多选的下拉列表框
Jul 20 Javascript
javascript中onclick(this)用法介绍
Apr 19 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
jQuery中children()方法用法实例
Jan 07 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
js实现Select列表各项上移和下移的方法
Aug 14 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
Aug 13 Javascript
Vue实现boradcast和dispatch的示例
Nov 13 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
生成缩略图
2006/10/09 PHP
php cookis创建实现代码
2009/03/16 PHP
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
微信小程序之电影影评小程序制作代码
2017/08/03 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
2018/05/23 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
matplotlib中legend位置调整解析
2017/12/19 Python
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
python对文件的操作方法汇总
2020/02/28 Python
把Anaconda中的环境导入到Pycharm里面的方法步骤
2020/10/30 Python
Python远程linux执行命令实现
2020/11/11 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
教育局长自荐信范文
2013/12/22 职场文书
区三好学生主要事迹
2014/01/30 职场文书
护理中职生求职信范文
2014/02/24 职场文书
毕业论文评语大全
2014/04/29 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
看上去很美观后感
2015/06/10 职场文书
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫