html文字手势放大缩小,微信小程序 文字手势放大缩小

微信小程序 文字手势放大缩小

var distance1//手指移动的距离1

var distance2//手指移动的距离2

参数

data: {

onetouch:true,//是否第一次触碰

fontsize:14,//初始字体大小

},

wxml

字

wxss

.bule{

width: 60px;

height: 60px;

background-color: rgba(0, 174, 255, 0.637);

margin-top: 250px;

margin-left: 150px;

display: flex;

justify-content: center;

align-items: center;

}

.body{

width: 100%;

height: 400px;

}

js

/**

* 双手指触发开始 计算开始触发两个手指坐标的距离

*/

touchstartCallback: function (e) {

// 单手指缩放开始，不做任何处理

if (e.touches.length == 1) return

this.setData({

onetouch: false

})

// 当两根手指放上去的时候，将距离(distance)初始化。

let xMove = e.touches[1].clientX - e.touches[0].clientX;

let yMove = e.touches[1].clientY - e.touches[0].clientY;

//计算开始触发两个手指坐标的距离

distance1 = Math.sqrt(xMove * xMove + yMove * yMove);

this.setData({

onetouch:false

})

},

/**

* 双手指移动 计算两个手指坐标和距离

*/

touchmoveCallback: function (e) {

// 单手指缩放不做任何操作

if (e.touches.length == 1) return;

//双手指运动 x移动后的坐标和y移动后的坐标

let xMove = e.touches[1].clientX - e.touches[0].clientX;

let yMove = e.touches[1].clientY - e.touches[0].clientY;

//双手指运动新的 ditance

distance2 = Math.sqrt(xMove * xMove + yMove * yMove);

},

bindtouchendCallback(e){

//计算移动的过程中实际移动了多少的距离

let distanceDiff = distance1 - distance2;

// 单手指缩放不做任何操作

if (!this.data.onetouch ) {

if (distance1 > distance2 && this.data.fontsize > 10) {

//console.log(this.data.fontsize)

let fontsize = this.data.fontsize - 4

this.setData({

fontsize: fontsize

})

wx.showToast({

title: '字体大小' + fontsize+"px",

icon: '',

image: '../../images/font.png',

duration: 1000,

mask: true,

success: function(res) {},

fail: function(res) {},

complete: function(res) {},

})

} else if (distance1 < distance2 && this.data.fontsize < 23) {

//console.log(this.data.fontsize)

let fontsize = this.data.fontsize + 4

this.setData({

fontsize: fontsize

})

wx.showToast({

title: '字体大小' + fontsize + "px",

icon: '',

image: '../../images/font.png',

duration: 1000,

mask: true,

success: function (res) { },

fail: function (res) { },

complete: function (res) { },

})

}

this.setData({

onetouch: true,

})

}

},