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

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

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 = false
var 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

如有问题,请大家多多指教!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏从零开始学 Web 前端

从零开始学 Web 之 移动Web(二)JD移动端网页,移动触屏事件

要实现轮播图,必须在首尾添加图片,如果直接在 html 代码直接添加图片的话,由于图片的数量是不固定的,那么每次图片的数量发生改变的话,不仅需要设置 html ...

20210
来自专栏Nian糕的私人厨房

CSS 基础

层叠样式表 (Cascading Style Sheets),一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语...

13540
来自专栏抠抠空间

css属性详解

一、字体属性 字体   font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识...

31990
来自专栏freesan44

pushViewController自定义动画

CATransition*transition = [CATransitionanimation];

14710
来自专栏河湾欢儿的专栏

轮播

9610
来自专栏DannyHoo的专栏

ios7之后导航栏的问题1

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

10620
来自专栏九彩拼盘的叨叨叨

让内容恰好占一屏,适配各种尺寸的设备的实现

有时候我们会有让内容恰好占一屏,并且适配各种尺寸的设备的需求。我们先不谈这样做会导致在一些设备上的显示不尽人意,直接谈如何实现。

12330
来自专栏Python疯子

Swift - Button,Label

15020
来自专栏欧阳大哥的轮子

iOS下的界面布局利器-MyLayout布局框架

MyLayout是一套iOS界面视图布局框架。其内核是基于对UIView的layoutSubviews方法的重载以及对子视图的bounds和center属性的设...

17230
来自专栏欧阳大哥的轮子

iOS的MyLayout布局系列-流式布局MyFlowLayout

     在我的CSDN博客中的几篇文章分别介绍MyLayout布局体系中的视图从一个方向依次排列的线性布局(MyLinearLayout)、视图层叠且停靠于父...

27030

扫码关注云+社区

领取腾讯云代金券