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


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 相关文章推荐
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 Javascript
JS获取DropDownList的value值与text值的示例代码
Jan 07 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
Jul 01 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 Javascript
jQuery实现限制文本框的输入长度
Jan 11 Javascript
jQuery模拟下拉框选择对应菜单的内容
Mar 07 Javascript
Vue验证码60秒倒计时功能简单实例代码
Jun 22 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
Aug 08 Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 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
ThinkPHP与PHPExcel冲突解决方法
2011/08/08 PHP
PHP关于htmlspecialchars、strip_tags、addslashes的解释
2014/07/04 PHP
推荐十款免费 WordPress 插件
2015/03/24 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
php 计算两个时间相差的天数、小时数、分钟数、秒数详解及实例代码
2016/11/09 PHP
PHP验证码类ValidateCode解析
2017/01/07 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
简单谈谈javascript中的变量、作用域和内存问题
2015/08/30 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
2017/04/28 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
js使用highlight.js高亮你的代码
2017/08/18 Javascript
微信小程序之发送短信倒计时功能
2017/08/30 Javascript
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
vue 组件使用中的一些细节点
2018/04/25 Javascript
微信小程序登录换取token的教程
2018/05/31 Javascript
Vue中通过Vue.extend动态创建实例的方法
2019/08/13 Javascript
Python切换pip安装源的方法详解
2016/11/18 Python
Python实现简易Web爬虫详解
2018/01/03 Python
Python assert语句的简单使用示例
2019/07/28 Python
春节到了 教你使用python来抢票回家
2020/01/06 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
工程承诺书怎么写
2014/05/24 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
个人四风问题整改措施思想汇报
2014/10/04 职场文书
同学毕业留言寄语
2015/02/27 职场文书
生活小常识广播稿
2015/08/19 职场文书
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL
详解redis在微服务领域的贡献
2021/10/16 Redis
nginx共享内存的机制详解
2022/03/21 Servers