微信小程序上简单手势识别
来源:互联网 发布:淘宝店铺没有访客流量 编辑:程序博客网 时间:2024/05/21 06:02
主要识别的手势包括拖拽、缩放和旋转
wxml部分
<view class="touch-container"> <view class="msg">{{msg}}</view> <image class="img" src="{{src}}" style="width: {{width}}rpx; height: {{height}}rpx; left: {{left}}rpx; top: {{top}}rpx; transform: translate(-50%, -50%) scale({{ scale }}) rotate({{ rotate }}deg);" bindload="bindload" catchtouchstart="touchstart" catchtouchmove="touchmove" catchtouchend="touchend" ></image></view>
wxss部分
page { width: 100%; height: 100%; background: #ffffff;}.touch-container { width: 100%; height: 100%; padding-top: 0.1px;}.msg { width: 100%; height: 60rpx; line-height: 60rpx; text-align: center; font-size: 30rpx; color: #666666;}.img { position: absolute; width: 690rpx; height: 300rpx; transform-origin: center center;}
js部分
var canOnePointMove = falsevar onePoint = { x: 0, y: 0}var twoPoint = { x1: 0, y1: 0, x2: 0, y2: 0}Page({ data: { msg: '', src: 'http://img01.taopic.com/150508/318763-15050PU9398.jpg', width: 0, height: 0, left: 375, top: 600, scale: 1, rotate: 0 }, // 关闭上拉加载 onReachBottom: function() { return }, bindload: function(e) { var that = this var width = e.detail.width var height = e.detail.height if (width > 750) { height = 750 * height / width width = 750 } if (height > 1200) { width = 1200 * width / height height = 1200 } that.setData({ width: width, height: height }) }, touchstart: function(e) { var that = this if (e.touches.length < 2) { canOnePointMove = true onePoint.x = e.touches[0].pageX * 2 onePoint.y = e.touches[0].pageY * 2 }else { twoPoint.x1 = e.touches[0].pageX * 2 twoPoint.y1 = e.touches[0].pageY * 2 twoPoint.x2 = e.touches[1].pageX * 2 twoPoint.y2 = e.touches[1].pageY * 2 } }, touchmove: function(e){ var that = this if (e.touches.length < 2 && canOnePointMove) { var onePointDiffX = e.touches[0].pageX * 2 - onePoint.x var onePointDiffY = e.touches[0].pageY * 2 - onePoint.y that.setData({ msg: '单点移动', left: that.data.left + onePointDiffX, top: that.data.top + onePointDiffY }) onePoint.x = e.touches[0].pageX * 2 onePoint.y = e.touches[0].pageY * 2 }else if (e.touches.length > 1) { var preTwoPoint = JSON.parse(JSON.stringify(twoPoint)) twoPoint.x1 = e.touches[0].pageX * 2 twoPoint.y1 = e.touches[0].pageY * 2 twoPoint.x2 = e.touches[1].pageX * 2 twoPoint.y2 = e.touches[1].pageY * 2 // 计算角度,旋转(优先) var perAngle = Math.atan((preTwoPoint.y1 - preTwoPoint.y2)/(preTwoPoint.x1 - preTwoPoint.x2))*180/Math.PI var curAngle = Math.atan((twoPoint.y1 - twoPoint.y2)/(twoPoint.x1 - twoPoint.x2))*180/Math.PI if (Math.abs(perAngle - curAngle) > 1) { that.setData({ msg: '旋转', rotate: that.data.rotate + (curAngle - perAngle) }) }else { // 计算距离,缩放 var preDistance = Math.sqrt(Math.pow((preTwoPoint.x1 - preTwoPoint.x2), 2) + Math.pow((preTwoPoint.y1 - preTwoPoint.y2), 2)) var curDistance = Math.sqrt(Math.pow((twoPoint.x1 - twoPoint.x2), 2) + Math.pow((twoPoint.y1 - twoPoint.y2), 2)) that.setData({ msg: '缩放', scale: that.data.scale + (curDistance - preDistance) * 0.005 }) } } }, touchend: function(e) { var that = this canOnePointMove = false }})
json部分
{ "navigationBarTitleText": "手势识别", "navigationBarTextStyle":"black", "navigationBarBackgroundColor": "#FFF", "disableScroll": true}
阅读全文
1 0
- 微信小程序上简单手势识别
- 王学岗手势识别上
- 简单手势识别
- Hololens简单手势识别
- 简单的手势识别
- 手势识别的简单使用
- Android 触摸屏手势识别程序
- Android触摸屏手势识别程序
- 自定义一个view,并实现最简单的手势识别功能(上)
- Android手势识别简单封装类
- Android简单手势滑动的识别
- android手势识别器的简单操作
- GestureDetector手势识别的简单使用
- 编写 Android 触摸屏手势识别程序
- 编写 Android 触摸屏手势识别程序
- 编写 Android 触摸屏手势识别程序
- 编写 Android 触摸屏手势识别程序
- 编写 Android 触摸屏手势识别程序
- Maven的使用与入门
- 基于TCP的C/S网络编程模型
- transaction transaction transaction HDU
- linux进程优先级、进程nice值(转载)
- Ubuntu 10.04安装Vim
- 微信小程序上简单手势识别
- freemarker代替jsp的优势
- Spring IOC的好处
- mtk方案各单元电路分析
- 华为oj 字符串分割
- android自定义View——组合控件
- 博客迁移……
- HIVE2.X启动报错 Unable to instantiate org.apache.hadoop.hive.ql.metadata.SessionHiveMetaS
- Java实现的URL编码和解码技术