方法:

  adjustStart1 (e) {
e.preventDefault()
let event = e.touches
if (event.length === 2) {
this.styles = 'transform: scale(2)'
}
},
// 调整开始
adjustStart (e) {
let event = e.touches
this.fingerA.startX = event[0].pageX
this.fingerA.startY = event[0].pageY
// 移动
if (event.length === 1) {
this.isDrag = true
this.isScale = false
// 缩放
} else if (event.length === 2) {
this.isScale = true
this.isDrag = false
this.fingerB.startX = event[1].pageX
this.fingerB.startY = event[1].pageY
}
},
// 调整中,移动或缩放
adjustIng (e) {
let event = e.touches
this.fingerA.endX = event[0].pageX
this.fingerA.endY = event[0].pageY
// 移动
if (this.isDrag) {
// 本次移动距离要加上之前移动的距离
this.move.x = this.fingerA.endX - this.fingerA.startX + this.move.temX
this.move.y = this.fingerA.endY - this.fingerA.startY + this.move.temY
this.styles = `transform: translate(${this.move.x}px,${this.move.y}px) scale(${this.move.scale})`
} else if (this.isScale) {
// 缩放
this.fingerB.endX = event[1].pageX
this.fingerB.endY = event[1].pageY
// 两手指间距离
let distanceStart = Math.sqrt(
Math.pow(this.fingerA.startX - this.fingerB.startX, 2) + Math.pow(this.fingerA.startY - this.fingerB.startY, 2)
)
let distanceEnd = Math.sqrt(
Math.pow(this.fingerA.endX - this.fingerB.endX, 2) + Math.pow(this.fingerA.endY - this.fingerB.endY, 2)
)
this.move.scale = (distanceEnd / distanceStart) * this.move.temScale
// 向量叉乘,求出旋转方向及角度
// 开始两个手指的向量
var vector1 = new this.Vector(
this.fingerA.startX,
this.fingerA.startY,
this.fingerB.startX,
this.fingerB.startY
)
// 结束时两个手指的向量
var vector2 = new this.Vector(
this.fingerA.endX,
this.fingerA.endY,
this.fingerB.endX,
this.fingerB.endY
)
var cos = this.calculateVM(vector1, vector2)
var angle = (Math.acos(cos) * 180) / Math.PI
var direction = this.calculateVC(vector1, vector2)
this.move.allDeg = direction * angle + this.move.temDeg
this.styles = `transform: translate(${this.move.x}px,${this.move.y}px) scale(${this.move.scale})`
}
},
// 调整结束
adjustEnd (e) {
this.move.temX = this.move.x
this.move.temY = this.move.y
this.move.temScale = this.move.scale
this.move.temDeg = this.move.allDeg
this.isDrag = false
this.isScale = false
},
calculateVM (vector1, vector2) {
return (
(vector1.x * vector2.x + vector1.y * vector2.y) /
(Math.sqrt(vector1.x * vector1.x + vector1.y * vector1.y) *
Math.sqrt(vector2.x * vector2.x + vector2.y * vector2.y))
)
},
calculateVC (vector1, vector2) {
return vector1.x * vector2.y - vector2.x * vector1.y > 0 ? 1 : -1
},
Vector (x1, y1, x2, y2) {
this.x = x2 - x1
this.y = y2 - y1
}

调用方法:

<div :style="styles" @touchstart.stop="adjustStart($event)" @touchmove.stop="adjustIng" @touchend.stop="adjustEnd"></div>

data 中定义变量:

   isScale: false,
isDrag: false,
styles: '',
actived: 1,
value1: '',
limitHourValue: '',
hourList: ['11', '12', '13', '14', '17', '18', '19', '20', '21'],
// 手指A
fingerA: {
startX: 0,
startY: 0,
endX: 0,
endY: 0
},
// 手指B
fingerB: {
startX: 0,
startY: 0,
endX: 0,
endY: 0
},
// 调整数据
move: {
x: 0,
y: 0,
temX: 0,
temY: 0,
scale: 1,
temScale: 1,
allDeg: 0,
temDeg: 0
},
// 默认样式
imgPosition: {
left: 0,
top: 0,
width: 0,
height: 0
}

最新文章

  1. MYSQL外键(Foreign Key)的使用
  2. 个人对于Virtual DOM的一些理解
  3. SPL--spl_autoload_register
  4. 关于sap的字段和对象修改记录的查找
  5. matlab绘制函数
  6. remove()和直接使用system的一个差别
  7. div,margin,padding
  8. libevent之eventop
  9. oracle 登录数据库时报 无监听 的一种解决方式(监听日志文件达到4g默认上限)
  10. GitHub学习途径
  11. C#:如何使方法过时,如何否决方法
  12. UVA211-The Domino Effect(dfs)
  13. 【网站管理6】_一个网站SEO优化方案
  14. ElasticSearch权威指南学习(映射和分析)
  15. python 全栈开发,Day22(封装,property,classmethod,staticmethod)
  16. android升级adt和sdk之后无法识别SDK Location的一个解决方式
  17. libgdx与Robovm绑定的坑
  18. 618F Double Knapsack
  19. 移动端下滑刷新插件(jQuery插件)
  20. bzoj1833: [ZJOI2010]count 数字计数 &amp;&amp; codevs1359 数字计数

热门文章

  1. 【校OJ】选网线
  2. 【转】详解tomcat的连接数与线程池
  3. table 单列宽度设置
  4. C#中,用户控件UserControl里面用Panl加载UserControl,并实现利用委托互相传值
  5. 既然 start() 方法会调用 run() 方法,为什么我们调用 start() 方法,而不直接调用 run() 方法?
  6. 接口测试 java+httpclient+testng+excel
  7. Android开发 多媒体提取器MediaExtractor详解_将一个视频文件分离视频与音频
  8. CSIC_716_20191102【input、数据类型概述、运算符】
  9. Sublime Text最舒服的主题
  10. MySQL 其他基础知识