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


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 相关文章推荐
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
Jul 14 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
Mar 10 Javascript
JavaScript File分段上传
Mar 10 Javascript
JavaScript接口的实现三种方式(推荐)
Jun 14 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
探索Vue.js component内容实现
Nov 03 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
Feb 26 Javascript
微信小程序实现分享到朋友圈功能
Jul 19 Javascript
Vue左滑组件slider使用详解
Aug 21 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
ninety plus是什么?ninety plus咖啡好吗?
2021/03/04 新手入门
简化php模板页面中分页代码的解析
2009/02/06 PHP
php批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
PHP判断文章里是否有图片的简单方法
2014/07/26 PHP
php类中的各种拦截器用法分析
2014/11/03 PHP
php一维二维数组键排序方法实例总结
2014/11/13 PHP
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
PHP递归删除多维数组中的某个值
2017/04/17 PHP
PHP的微信支付接口使用方法讲解
2019/03/08 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
利用Ext Js生成动态树实例代码
2008/09/08 Javascript
JQuery 将元素显示在屏幕的中央的代码
2010/02/27 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
vue+egg+jwt实现登录验证的示例代码
2019/05/18 Javascript
vue+element项目中过滤输入框特殊字符小结
2019/08/07 Javascript
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
python使用requests模块实现爬取电影天堂最新电影信息
2019/04/03 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
关于打架的检讨书
2014/01/17 职场文书
新闻学专业个人求职信写作
2014/02/04 职场文书
高中物理教学反思
2014/02/08 职场文书
写求职信有什么意义
2014/02/17 职场文书
《北大荒的秋天》教学反思
2014/04/14 职场文书
小学班主任评语大全
2014/04/23 职场文书
综艺节目策划方案
2014/06/13 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书
数学复习课教学反思
2016/02/18 职场文书
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏