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


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 未结束的字符串常量常见解决方法
Jan 24 Javascript
javascript dom追加内容实现示例
Sep 21 Javascript
浅析Cookie中的Path与domain
Dec 18 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
Nov 23 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
Node.js中路径处理模块path详解
Nov 14 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
Aug 29 Javascript
js实现无限层级树形数据结构(创新算法)
Feb 27 Javascript
jQuery实现简单三级联动效果
Sep 05 jQuery
解决vue项目axios每次请求session不一致的问题
Oct 24 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
一段php加密解密的代码
2007/07/16 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
JSON简介以及用法汇总
2016/02/21 Javascript
jQuery EasyUI Tab 选项卡问题小结
2016/08/16 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
详解如何写出一个利于扩展的vue路由配置
2019/05/16 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
vue前后分离调起微信支付
2019/07/29 Javascript
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
webpack的tree shaking的实现方法
2019/09/18 Javascript
python选择排序算法的实现代码
2013/11/21 Python
简介Python中用于处理字符串的center()方法
2015/05/18 Python
Python给你的头像加上圣诞帽
2018/01/04 Python
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
Python中logging日志记录到文件及自动分割的操作代码
2020/08/05 Python
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
澳大利亚相机之家:Camera House
2017/11/30 全球购物
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
金融管理应届生求职信
2014/02/20 职场文书
服务标语口号
2014/07/01 职场文书
会计求职自荐信
2015/03/26 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
《文化苦旅》读后感:阅读,让人诗意地栖居在大地上
2019/12/24 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python