微信小程序中实现手指缩放图片的示例代码


Posted in Javascript onMarch 13, 2018

公司开发微信小程序,pm想实现如下需求:

用手指缩放图片。其实在实现这个需求以前,并不知道,微信公众号以及微信小程序里面有一个原生的api就自带这个特效,而且微信朋友圈也是用的这个api。wx.previewImage,就是它。预览图片。除了不能预览开发环境的本地电脑的图片外,你手机真机的图片,以及http服务器上的图片都是可以预览的,而且缩放功能做得很流畅。下面就说说如何用js来实现这个功能吧。

先上源码,然后在逐步剖析:

Page({
  data: {
    touch: {
      distance: 0,
      scale: 1,
      baseWidth: null,
      baseHeight: null,
      scaleWidth: null,
      scaleHeight: null
    }
  },
  touchstartCallback: function(e) {
    // 单手指缩放开始,也不做任何处理
    if(e.touches.length == 1) 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,
    })
  },
  touchmoveCallback: function(e) {
    let touch = this.data.touch
    // 单手指缩放我们不做任何操作
    if(e.touches.length == 1) 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
    })
  },
  bindload: 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文件对应如下,就不做解释了:

<view class="container">
  <view bindtouchmove="touchmoveCallback" bindtouchstart="touchstartCallback">
    <image src="../../resources/pic/cat.jpg" style="width: {{ touch.scaleWidth }}px;height: {{ touch.scaleHeight }}px" bindload="bindload"></image>
  </view>
</view>

写到这里发现,就算小程序用不了这个js,我的ht5页面也是可以用的,哈哈。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 读取元素的CSS信息的代码
Feb 07 Javascript
Javascript动态绑定事件的简单实现代码
Dec 25 Javascript
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 Javascript
利用jQuery实现可输入搜索文字的下拉框
Oct 23 Javascript
jquery导航制件jquery鼠标经过变色效果示例
Dec 05 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 Javascript
VueCli3构建TS项目的方法步骤
Nov 07 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 Javascript
详解Vue的watch中的immediate与watch是什么意思
Dec 30 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
Jul 22 Javascript
JavaScript实现H5接金币功能(实例代码)
Feb 22 Javascript
基于vue中css预加载使用sass的配置方式详解
Mar 13 #Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
Mar 13 #Javascript
vue加载自定义的js文件方法
Mar 13 #Javascript
vue轮播图插件vue-concise-slider的使用
Mar 13 #Javascript
vue页面离开后执行函数的实例
Mar 13 #Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
Mar 13 #Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 #Javascript
You might like
phpBB BBcode处理的漏洞
2006/10/09 PHP
配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
2009/04/25 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
js中将字符串转换成json的三种方式
2011/01/12 Javascript
基于jquery的表头固定的若干方法
2011/01/27 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
2013/03/29 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
2013/11/14 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
jquery实现相册一下滑动两次的方法
2015/02/09 Javascript
JavaScript中创建字典对象(dictionary)实例
2015/03/31 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
jQuery插件实现文件上传功能(支持拖拽)
2020/08/27 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
微信小程序后台解密用户数据实例详解
2017/06/28 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
Python的净值数据接口调用示例分享
2016/03/15 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
施工安全生产承诺书
2014/05/23 职场文书
委托书格式
2014/08/01 职场文书
爱护公共设施倡议书
2014/08/29 职场文书
应届毕业生自荐信
2015/03/04 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书
解析MySQL索引的作用
2022/03/03 MySQL
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL