首页 > 其他分享 >uniapp nvue 手指缩放

uniapp nvue 手指缩放

时间:2023-12-15 19:33:06浏览次数:53  
标签:uniapp nvue 缩放 startOne startTwo touches touch screenY screenX

uniapp  nvue中俩个手指按下,每次只会监听到一个 

uniapp  中双指缩放,touch.scale 为当前的缩放比例

<template>
	<view  @touchstart.stop="move" @touchmove.stop="moving" >
		{{ touch.scale }}
	</view>
</template>
<script>
export default {
    data() {
		  return {
             touch: {
				distanceScale: 1000, //移动500px变化100%
				scaleMax: 99, //最大缩放
				scaleMin: 1, //最小缩放
				scale: 1, //当前缩放
				scalestart: 1, //刚开始缩放的比例
				isMove: false,
				distance: 0, //俩个手指之间的距离
				startOne: { screenX: 0, screenY: 0 }, //第一个手指
				startTwo: { screenX: 0, screenY: 0 } //第二个手指
			}
		};
	},
	
	methods: {

		move(e) {
			let touches = e.changedTouches[0];
			// 第一根手指
			if (touches.identifier == 0) {
				this.touch.startOne.screenX = touches.screenX;
				this.touch.startOne.screenY = touches.screenY;
			}
			if (touches.identifier == 1) {
				this.touch.startTwo.screenX = touches.screenX;
				this.touch.startTwo.screenY = touches.screenY;
			}
			this.touch.isMove = this.touch.startOne.screenX && this.touch.startTwo.screenX;
			if (this.touch.isMove) {
				let xMove = this.touch.startOne.screenX - this.touch.startTwo.screenX;
				let yMove = this.touch.startOne.screenY - this.touch.startTwo.screenY;
				this.touch.distance = Math.sqrt(xMove * xMove + yMove * yMove);
				this.touch.scalestart = this.touch.scale;
			}
		},
		// 移动中
		moving(e) {
			if (!this.touch.isMove) return;
			let touches = e.changedTouches[0];
			// 第一根手指
			if (touches.identifier == 0) {
				this.touch.startOne.screenX = touches.screenX;
				this.touch.startOne.screenY = touches.screenY;
			}
			if (touches.identifier == 1) {
				this.touch.startTwo.screenX = touches.screenX;
				this.touch.startTwo.screenY = touches.screenY;
			}
			let xMove = this.touch.startOne.screenX - this.touch.startTwo.screenX;
			let yMove = this.touch.startOne.screenY - this.touch.startTwo.screenY;
			//双手指运动新的 ditance
			let distance = Math.sqrt(xMove * xMove + yMove * yMove);
			//计算移动的过程中实际移动了多少的距离
			let distanceDiff = distance - this.touch.distance;
			let newScale = this.touch.scalestart + (distanceDiff / this.touch.distanceScale) * (this.touch.scaleMax - this.touch.scaleMin);
			if (newScale < this.touch.scaleMin) {
				this.touch.scale = this.touch.scaleMin;
			} else if (newScale > this.touch.scaleMax) {
				this.touch.scale = this.touch.scaleMax;
			} else {
				this.touch.scale = Math.floor(newScale);
			}
			this.context.setCameraZoomRatio(this.touch.scale);
		},
		// 手指抬起
		moved(e) {
			let touches = e.changedTouches[0];
			if (touches.identifier == 0) {
				this.touch.startOne.screenX = 0;
				this.touch.startOne.screenY = 0;
			}
			if (touches.identifier == 1) {
				this.touch.startTwo.screenX = 0;
				this.touch.startTwo.screenY = 0;
			}
			this.touch.isMove = this.touch.startOne.screenX && this.touch.startTwo.screenX;
		},
     }
};
</script>
<style>

</style>
                                 

  

标签:uniapp,nvue,缩放,startOne,startTwo,touches,touch,screenY,screenX
From: https://www.cnblogs.com/symlove/p/17904073.html

相关文章

  • 【scikit-learn基础】--『预处理』之 数据缩放
    数据的预处理是数据分析,或者机器学习训练前的重要步骤。通过数据预处理,可以提高数据质量,处理数据的缺失值、异常值和重复值等问题,增加数据的准确性和可靠性整合不同数据,数据的来源和结构可能多种多样,分析和训练前要整合成一个数据集提高数据性能,对数据的值进行变换,规约等(比如......
  • uniapp---使用uView
    在用uniapp开发项目的时候,选择合适的UI组件,往往能够事半功倍,而uView就是uniapp生态专用的UI框架,但是该UI框架并没有内置,而需要单独引入安装:uview官网:https://uviewui.com/components/intro.html安装步骤:第一步:在uniapp插件市场找到该插件https://ext.dcloud.net......
  • uniapp base64 转 png
    主要用到了这个API,uni.base64ToArrayBuffer(base64)//将Base64编码的字符串转换为ArrayBuffer对象constbase64=res.data.img;//Base64编码的图片数据constarrayBuffer=uni.base64ToArrayBuffer(base64);//创建Blob对象constblob=newBlob([arrayBuffer],{ty......
  • uniapp日常踩坑汇总(持续更新)
    一、uni-app中u-radio-group和u-radio点击事件的区别<u-radio-groupv-model="hcData.hcqk"style="width:100%;" :disabled="disabled"@change="radioGroupChange"> <u-radiov-for="(op,index)inoptions" @c......
  • 解决uniapp无法ios运行的问题
    问题描述设备无法运行uniapp应用设备无法运行uniapp应用的问题表现在哪些方面?如何判断iOS设备无法运行uniapp应用?iOS设备无法运行uniapp应用的原因有哪些?有哪些可能的解决方法解决方法:检查代码错误:首先要检查代码是否存在拼写错误、语法错误或者逻辑错误,这些问题都可能导致应用......
  • uniapp开发——纯原生渲染nvue调用uni.makePhoneCall没反应的处理办法
    uni.makePhoneCall(OBJECT)|uni-app官网(dcloud.net.cn)正常情况下,manifest.json配置拨打电话的权限就可以了:配置权限后重新打包,真机运行应该就可以正常的拨打电话了。如果API没反应,那么可以试试下边这种不弹出询问框直接拨打电话的方法:callMobile(){letmobile......
  • Vue后台项目开发必备:全面解析分辨率适配与网页缩放技巧!
    1.各屏幕分辨率下适配展示首先给大家展示一下我的屏幕分辨率兼容效果,方便大家来判断我的适配方案是否可行正常1920*1080100%1920*1080150%1440*900100%1440*900150%2.屏幕分辨率适配方案这里就不再过多举例了,通过这四张图可以看出来页面布局并没有受到过多的影响,所以直接上代......
  • Vue后台项目开发必备:全面解析分辨率适配与网页缩放技巧!
    1.各屏幕分辨率下适配展示首先给大家展示一下我的屏幕分辨率兼容效果,方便大家来判断我的适配方案是否可行正常1920*1080100%1920*1080150%1440*900100%1440*900150%2.屏幕分辨率适配方案这里就不再过多举例了,通过这四张图可以看出来页面布局并没有受到过多的影响,所以直接上代......
  • uniapp+node.js+mysql前后端微信小程序授权登录
    文章目录一、前端代码?1.微信授权登录的页面(没有样式,自己写)2.”我的“页面3.封装request.js的页面4.vuex的状态管理的页面5.添加了识别有放token的没有登录就自动跳转登录的功能的main.js页面二、后端代码1.数据库连接页面(sql.js)2.数据库页面封装查询用户与插入用户信息的页面以及......
  • uniapp插件市场上架插件,提示components不包含对应包名称的组件
    第一次在uniapp上架了一个小组件,所有的都按照文档填写上传了,但是提交的时候一直提示不行原来是在压缩组件源码的时候出问题,不要把components和static放在一个文件夹下面压缩文件夹,要直接把components和`static``组合压缩就行。这是错误的这是正确的......