小程序的拖拽、缩放和旋转手势

在开发中，有时会遇到像App中的手势那样的效果，下面就仿照App实现了一下。

wxml部分：

<view class="touch-container"><view class="msg">{{msg}}</view><imageclass="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 = thisvar width = e.detail.widthvar height = e.detail.heightif (width > 750) {height = 750 * height / widthwidth = 750}if (height > 1200) {width = 1200 * width / heightheight = 1200}that.setData({width: width,height: height})},touchstart: function(e) {var that = thisif (e.touches.length < 2) {canOnePointMove = trueonePoint.x = e.touches[0].pageX * 2onePoint.y = e.touches[0].pageY * 2}else {twoPoint.x1 = e.touches[0].pageX * 2twoPoint.y1 = e.touches[0].pageY * 2twoPoint.x2 = e.touches[1].pageX * 2twoPoint.y2 = e.touches[1].pageY * 2}},touchmove: function(e){var that = thisif (e.touches.length < 2 && canOnePointMove) {var onePointDiffX = e.touches[0].pageX * 2 - onePoint.xvar onePointDiffY = e.touches[0].pageY * 2 - onePoint.ythat.setData({msg: '单点移动',left: that.data.left + onePointDiffX,top: that.data.top + onePointDiffY})onePoint.x = e.touches[0].pageX * 2onePoint.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 * 2twoPoint.y1 = e.touches[0].pageY * 2twoPoint.x2 = e.touches[1].pageX * 2twoPoint.y2 = e.touches[1].pageY * 2// 计算角度，旋转(优先)var perAngle = Math.atan((preTwoPoint.y1 - preTwoPoint.y2)/(preTwoPoint.x1 - preTwoPoint.x2))*180/Math.PIvar curAngle = Math.atan((twoPoint.y1 - twoPoint.y2)/(twoPoint.x1 - twoPoint.x2))*180/Math.PIif (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 = thiscanOnePointMove = false}})

json部分：

"navigationBarTitleText": "识别手势","navigationBarTextStyle":"black","navigationBarBackgroundColor": "#FFF","disableScroll": true

专栏作家

honey缘木鱼。小程序社区博主，坚持原创分享技术博文。

本文原创发布于小程序社区。未经许可，禁止转载

原文地址：小程序的拖拽、缩放和旋转手势-微信小程序联盟/博主专区-微信小程序开发社区-微信小程序联盟

相关文章：

微信小程序之『仿 QQ 消息气泡拖拽消失』

微信小程序图片拖拽

小程序的拖拽、缩放和旋转手势相关推荐

实现小程序canvas拖拽功能
组件地址 https://github.com/jasondu/wx-comp-canvas-drag 实现效果如何实现使用canvas 使用movable-view标签由于movable-vi ...
微信小程序的拖拽、缩放和旋转手势
在开发中,有时会遇到像App中的手势那样的效果,下面就仿照App实现了一下. wxml部分: <view class="touch-container"><vie ...
html img 手势缩放,微信小程序中利用image组件实现图片手势缩放
微信小程序中利用image组件实现图片手势缩放,前端大神严灏的牛文,讲解了微信小程序中image组件的三种是缩放模式,三种之中,只有 aspectFit 模式可以等比例缩放图片,并显示完整的图片. 原 ...
vue-draggable-resizable-gorkys 可拖拽缩放的组件
说明:组件基于vue-draggable-resizable进行二次开发. 文章引用于vue-draggable-resizable 可拖拽缩放的组件 - SegmentFault 思否 git引用于 ...
解决d3.event在v7版本无效影响zoom拖拽缩放问题
近期由于代码内关于d3版本的更新,由原来的v3 v4更新值v7.0.0,导致原有关于d3的波点图内zoom方法的拖拽缩放.tooltip提示框问题开始报错,即d3.event数据废弃了 1.设置d3图 ...
双指缩放canvas图片_小程序实现图片双指缩放
一:小程序实现图片双指缩放介绍 1:大体思路监听图片加载完成给图片初始化宽高 ▶ 双手指触发开始计算两个手指坐标的距离 ▶ 双手指移动计算两个手指坐标和距离 ▶ 根据探测到用户的手指距离变化, ...
H5头像完整制作，可拖拽缩放，可添加装饰图标（装饰图标支持缩放、旋转、拖拽）
H5头像制作类的程序本以为到处都可以搜索到,可是真写这个项目的时候才发现太困难了,因为根本没有现成的功能模块可以拼凑,着实费了不少力气,好在最终圆满交工. 还是先看效果源码获取渠道小程序内联系客服 ...
hammer.js移动端拖拽缩放旋转元素
第一步下载hammer.js并引入下载地址可以是:http://hammerjs.github.io/ 第二步复制下面这些代码,放在你的js里面 function drag(drag){var ...
unity3d鼠标拖拽模型，旋转模型
直接挂载到模型上 using UnityEngine; using System.Collections;public class OnDrag : MonoBehaviour {//目标物体publ ...

小程序的拖拽、缩放和旋转手势

专栏作家

小程序的拖拽、缩放和旋转手势相关推荐

最新文章

热门文章