微信小程序实现图片双滑缩放大小
在做小程序开发的过程中,后端传来一张图片地图,需要实现双手指滑动,使图片缩放,最终得出了一下代码:
js :
Page({
data: {
touch: {
distance: ,
scale: ,
baseWidth: null,
baseHeight: null,
scaleWidth: null,
scaleHeight: null
}
},
touchStartHandle(e) {
// 单手指缩放开始,也不做任何处理
if (e.touches.length == ) {
console.log("单滑了")
return
}
console.log('双手指触发开始')
// 注意touchstartCallback 真正代码的开始
// 一开始我并没有这个回调函数,会出现缩小的时候有瞬间被放大过程的bug
// 当两根手指放上去的时候,就将distance 初始化。
let xMove = e.touches[].clientX - e.touches[].clientX;
let yMove = e.touches[].clientY - e.touches[].clientY;
let distance = Math.sqrt(xMove * xMove + yMove * yMove);
this.setData({
'touch.distance': distance,
})
},
touchMoveHandle(e) {
let touch = this.data.touch
// 单手指缩放我们不做任何操作
if (e.touches.length == ) {
console.log("单滑了");
return
}
console.log('双手指运动开始')
let xMove = e.touches[].clientX - e.touches[].clientX;
let yMove = e.touches[].clientY - e.touches[].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 >= ) {
newScale =
}
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
})
},
load: 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:
<image mode='scaleToFill' src='../../../images/01.jpg' bindtouchstart='touchStartHandle' bindtouchmove='touchMoveHandle' bindload='load' style="width: {{ touch.scaleWidth }}px;height: {{ touch.scaleHeight }}px"></image>
最后,通过手机预览,就会发现已达到预想的效果!
参考文档:http://www.ifanr.com/technotes/740404
微信小程序实现图片双滑缩放大小的更多相关文章
- 微信小程序裁剪图片成圆形
代码地址如下:http://www.demodashi.com/demo/14453.html 前言 最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在gith ...
- 微信小程序实现图片是上传、预览功能
本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法,分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 1.可以调用相机也可以从本地相册选择 2.本地实现 ...
- 微信小程序天坑--图片汉字命名
图片用汉字命名的,在开发者工具中是显示的,但是,在真机的微信中,是不会显示的. 大写的尴尬,微信小程序开发者工具对于做微信的UI来说,就是一个天坑,在电脑上漂漂亮亮的,到手机上各种意想不到的情况.
- [转]微信小程序实现图片上传功能
本文转自:http://blog.csdn.net/feter1992/article/details/77877659 前端: 微信开发者工具 后端:.Net 服务器:阿里云 这里介绍微信小程序如何 ...
- 微信小程序 base64 图片 canvas 画布 drawImage 实现
在微信小程序中 canvas drawImage API 传入的第一个参数是 imageResource 图片资源路径,这个参数通常由从相册选择图片 wx.chooseImage 或 wx.getIm ...
- 微信小程序之图片base64解码
不知道大家在做微信小程序的时候遇到base64解码的问题,我之前在做微信小程序的时候遇到base64解析图片一直有问题,所以在这里把遇到的问题和解决方案在这里记录一下: 在平时的项目中我们是直接用ba ...
- nodeJs实现微信小程序的图片上传
今天我来介绍一下nodejs如何实现保存微信小程序传过来的图片及其返回 首先wx.uploadFile绝大部分时候是配合wx.chooseImage一起出现的,毕竟选择好了图片,再统一上传是实现用户图 ...
- 微信小程序的图片懒加载
在普通的web页面当中,我们都知道图片懒加载可以提升浏览器的加载速度.原理是图片用空或者占位图片进行显示,当屏幕移动到图片位置的时候,再把图片的地址换成它的地址.那么,在小程序当中呢,最近老大让看一下 ...
- 微信小程序实现图片上传功能
前端: 微信开发者工具 后端:.Net 服务器:阿里云 这里介绍微信小程序如何实现上传图片到自己的服务器上 前端代码 data: { productInfo: {} }, //添加Banner bin ...
随机推荐
- vue常用方法
vue移动端ui库: http://mint-ui.github.io/#!/zh-cn vue做app开发使用: weex 官网地址:http://weex.apache.org/cn 1.Vue组 ...
- css 垂直居中方法总结
工作中遇到垂直居中问题,特此总结了一下几种方式与大家分享.本文讨论的垂直居中仅支持IE8+ 1.使用绝对定位垂直居中 HTML <div class="container"& ...
- vue 面试题 2019
vue核心知识点 1.对于Vue是一套渐进式框架的理解 渐进式代表的含义是:主张最少. Vue可能有些方面是不如React,不如Angular,但它是渐进的,没有强主张,你可以在原有大系统的上面,把一 ...
- FreeBSD的VIM基本配置
实现的基本功能 中文解决乱码问题 鼠标右键原样粘贴 最后一次编辑文件后,鼠标位置的记忆 if v:lang =~ "utf8$" || v:lang =~ "UTF-8$ ...
- phthon中的open函数模式
原文地址:http://www.runoob.com/python/python-func-open.html r 以只读方式打开文件.文件的指针将会放在文件的开头.这是默认模式. rb 以二进制格式 ...
- tomcat 内存溢出问题(OutOfMemoryError: PermGen space)
导入公司项目的时候出现的问题,在此记录处理方法. tomcat在启动的时候报错:OutOfMemoryError: PermGen space PermGen space的全称是Permanent G ...
- ibatis的批处理
(1)spring模式:尽管spring已经配置了事务,但以下代码中还是要设置事务,不然batch不会起作用;另外这里虽然设了一下事务处理,但对全局事务并不会造成影响;注:不启用事务将建立多次连接,这 ...
- LiquidCrystal库函数
主要资料来源: 极客工坊-知识库 (LiquidCrystal库地址:http://wiki.geek-workshop.com/doku.php?id=arduino:libraries:liqui ...
- BA-冷源系统--一次流量控制方案(转载)
空调水变一次流量控制方案 浙大网新快威科技 黄逸林 一.引言 建筑物中央空调系统的冷冻水一次泵,传统上都采用固定转速水泵.空调水的变一次流量控制系统(VPF:Variable-Primary-Flow ...
- BA-siemens-ppm模块在ALN层通信
PPM作为新的扩展模块,有MS/TP通讯的能力,但是在常规设置的时候必须设置在PXC Modular下面,PPM上线也必须在PXC Modular上中超级终端设置,偶然通过一个项目实现了PPM挂载在A ...