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


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 10 Javascript
javascript 面向对象编程基础 多态
Aug 21 Javascript
利用腾讯的ip地址库做ip物理地址定位
Jul 24 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
Aug 23 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
jQuery判断一个元素是否可见的方法
Jun 05 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 Javascript
JavaScript 对象字面量讲解
Jun 06 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
Bootstrap栅格系统简单实现代码
Mar 06 Javascript
jQuery手风琴的简单制作
May 12 jQuery
解决vue+router路由跳转不起作用的一项原因
Jul 19 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
使用php+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
PHP不使用递归的无限级分类简单实例
2016/11/05 PHP
js异步加载的三种解决方案
2013/03/04 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
小程序实现搜索框
2020/06/19 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
在Django同1个页面中的多表单处理详解
2017/01/25 Python
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
python技能之数据导出excel的实例代码
2017/08/11 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
解决webdriver.Chrome()报错:Message:'chromedriver' executable needs to be in Path
2019/06/12 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
python实现用类读取文件数据并计算矩形面积
2020/01/18 Python
Pygame的程序开始示例代码
2020/05/07 Python
如何在python中处理配置文件代码实例
2020/09/27 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
python中pdb模块实例用法
2021/01/15 Python
使用纯 CSS 创作一个脉动 loader效果的源码
2018/09/28 HTML / CSS
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
C++:局部变量能否和全局变量重名
2014/03/03 面试题
奥林匹克运动会口号
2014/06/19 职场文书
2014党委书记四风问题对照检查材料思想汇报
2014/09/22 职场文书
中学生逃课检讨书
2015/02/17 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript