小程序的拖拽、缩放和旋转手势功能的开发

2020-09-27 作者：秩名

在开发中，有时会遇到像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

线上+线下+进销存+收银+会员门店零售管理好帮手

极速收银管理
门店能实现快速收银，提升门店经营效率。
进销存管理
系统自带进销存管理，更好管理库存销售。
软硬件一体化
配备收银硬件一站式整体服务。

收银 会员管理 库存管理 商品管理 交接班 数据报表 营销促单 售后处理 多种收款

获取报价

【本站声明】

1、本网站发布的该篇文章，目的在于分享电商知识及传递、交流相关电商信息，以便您学习或了解电商知识，请您不要用于其他用途；
2、该篇文章中所涉及的商标、标识的商品/服务并非来源于本网站，更非本网站提供，与本网站无关，系他人的商品或服务，本网站对于该类商标、标识不拥有任何权利；
3、本网站不对该篇文章中所涉及的商标、标识的商品/服务作任何明示或暗示的保证或担保；
4、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责，仅系客观性描述，如您需要了解该类商品/服务详细的资讯，请您直接与该类商品/服务的提供者联系。