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


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实现id模糊查询的小例子
Mar 19 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
Apr 29 Javascript
JavaScript中的类数组对象介绍
Dec 30 Javascript
轻松实现js图片预览功能
Jan 18 Javascript
Angularjs中UI Router全攻略
Jan 29 Javascript
使用JS正则表达式 替换括号,尖括号等
Nov 29 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 Javascript
node上的redis调用优化示例详解
Oct 30 Javascript
Vue实现简易翻页效果源码分享
Nov 08 Javascript
vue.draggable实现表格拖拽排序效果
Dec 01 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
原生js实现放大镜组件
Jan 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
如何使用Linux的Crontab定时执行PHP脚本的方法
2011/12/19 PHP
php实现获取文件mime类型的方法
2015/02/11 PHP
php中使用gd库实现远程图片下载实例
2015/05/12 PHP
php实现解析xml并生成sql语句的方法
2018/02/03 PHP
基于PHP实现用户在线状态检测
2020/11/10 PHP
js常用函数 不错
2006/09/08 Javascript
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
jQuery的slideToggle方法实例
2013/05/07 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2016/05/26 Javascript
JS全局变量和局部变量最新解析
2016/06/24 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
Javascript之面向对象--封装
2016/12/02 Javascript
javascript history对象详解
2017/02/09 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
2017/02/14 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼
2014/07/07 DOTA
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
[07:06]2018DOTA2国际邀请赛寻真——卫冕冠军Team Liquid
2018/08/10 DOTA
python简单的函数定义和用法实例
2015/05/07 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
python 实现对文件夹内的文件排序编号
2018/04/12 Python
python日期相关操作实例小结
2019/06/24 Python
Python将string转换到float的实例方法
2019/07/29 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
Ajax和javascript的区别
2013/07/20 面试题
财务与信息服务专业推荐信
2013/11/28 职场文书
活动主持人开场白
2015/05/28 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python
Nginx动静分离配置实现与说明
2022/04/07 Servers