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


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 相关文章推荐
js几个不错的函数 $$()
Oct 09 Javascript
解析Javascript中大括号“{}”的多义性
Dec 02 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
Feb 28 Javascript
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
vue教程之toast弹框全局调用示例详解
Aug 24 Javascript
vue发送websocket请求和http post请求的实例代码
Jul 11 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 Javascript
JS数组reduce()方法原理及使用技巧解析
Jul 14 Javascript
修改Vue打包后的默认文件名操作
Aug 12 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
Nov 07 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 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
乐信RP2100的电路分析和打磨
2021/03/02 无线电
php异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
php字符串分割函数explode的实例代码
2013/02/07 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
php的命名空间与自动加载实现方法
2019/08/25 PHP
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
javascript与cookie 的问题详解
2013/11/11 Javascript
js中prototype用法详细介绍
2013/11/14 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
小白谈谈对JS原型链的理解
2016/05/03 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
pygame加载中文名mp3文件出现error
2017/03/31 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
python实现拼接图片
2020/03/23 Python
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
武汉英思工程科技有限公司&ndash;ORACLE面试测试题目
2012/04/30 面试题
介绍一下EJB的分类及其各自的功能及应用
2016/08/23 面试题
单位在职证明范本
2014/01/09 职场文书
西式婚礼证婚词
2014/01/12 职场文书
公司面试感谢信
2014/02/01 职场文书
五好党支部事迹材料
2014/02/06 职场文书
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL