网页方向舵的参考代码.vue版

网页方向舵的参考代码(需引入vue脚手架)

<!--
输入:attribute: {w: 200,h: 200,x: -1,y: -1,r:50//最大范围},
输出:v-on:message -角度-离边缘长度-x y 的百分比
-->
<template>
	<!-- 主要home键 -->
	<div id="btnHome" 
		:style="{
			width:appStyle.w+'px',
			height:appStyle.h+'px',
			top:appStyle.y+'px',
			left:appStyle.x+'px'
		}"
	>
		<div id="box"
		:style="{
				transform:'rotateX('+(showData.y*30)+'deg) rotateY('+(showData.x*20)+'deg)',
				transition:'all '+transifromTime+'ms ease'
			}"
			
			v-on:mouseup="fun_mouseUp"
			v-on:mousedown="fun_mouseDown"
			
			v-on:touchend="fun_mouseUp"
			v-on:touchstart="fun_mouseDown"
		>
		<!--  -->
			<!-- v-on:mousedown="fun_mouseDown"
			v-on:mouseup="fun_mouseUp" -->
			<!-- 点 -->
			<div id="points"></div>
			<!-- 滑动舵 -->
			<div id="mouse" :style="{top:(thisMousePosition.y + appStyle.h/2)+'px',left:(thisMousePosition.x + appStyle.w/2)+'px'}">
				{{
					"x="+thisMousePosition.x+
					":y="+thisMousePosition.y+
					":z="+thisMousePosition.z+
					"\n"+angle
				}}
			</div>
			
			<div id="abcd"
			:style="{transform:'rotate('+angle+'deg)  translateZ(60px)'}">
			</div>
		</div>
		
	</div>
</template>

<script>
	export default {
		name: 'btnHome',
		data() {
			return {
				maxR: 50,				//最大半径px
				angle: 0, 				//角度
				media: {				//屏幕的宽高
					h: 0,
					w: 0
				},
				point: {				//点的位置
					x: 300,
					y: 300
				}, 
				appStyle: {				//主要框的属性
					x: 300 - 150,
					y: 300 - 150,
					h: 300,
					w: 300
				}, 
				thisMousePosition: {	//鼠标的位置
					x: 0,
					y: 0,
					z: 0
				}, 
				showData: {  			//显示计算上下在百分比是多少
					x: 0,
					y: 0
				} ,//.....
				differPosition:{		//鼠标按下的那一刻的相差位置
					x: 0,
					y: 0
				},
				isDown:false,			//当前是否按下
				transifromTime:0
			}
		},
		props: {
			attributes: Object,			//传入的对象格式attribute: {w: 200,h: 200,x: -1,y: -1,r:50//最大范围},
			height: Number,
		},
		methods: {
			//自动
			auto_media: function() { 	//主动执行调整屏幕大小
				this.media.h = window.innerHeight;
				this.media.w = window.innerWidth;
				
			},
			//自动鼠标事件 e:主要事件  data放下的时间
			auto_mouse: function(e,data) {											// 主动执行鼠标滑动事件
				
				this.transifromTime = data == undefined?0:data;
				if(!this.isDown)return;												//判断是否按下
				var innerX = 0;														//定义内部的坐标
				var innerY = 0;
				if(e.changedTouches == undefined){									//判断是否是手机按下和电脑鼠标按下
					innerX = e.clientX - this.point.x;
					innerY = e.clientY - this.point.y;
				}else{
					innerX = e.changedTouches[0].clientX - this.point.x;
					innerY = e.changedTouches[0].clientY - this.point.y;
				}
				innerX = innerX+this.differPosition.x;								//计算相对位置
				innerY = innerY+this.differPosition.y;
				var innerZ = Math.sqrt(Math.pow(innerX, 2) + Math.pow(innerY, 2))	//计算z周旋转
				var innerRz = 0;
				if (innerZ > this.maxR) {											//超出范围主动锁定范围
					innerRz = this.maxR / innerZ;
					innerX = innerX * innerRz;
					innerY = innerY * innerRz;
					innerZ = innerZ * innerRz;
				}
				if (innerX >= 0 && innerY <= 0) {									//跟方位 获取角度
					// console.log("↗");
					this.angle = (Math.asin(innerX / innerZ) * 180 / Math.PI);
				} else if (innerX >= 0 && innerY >= 0) {
					// console.log("↘");
					this.angle = (Math.asin(innerY / innerZ) * 180 / Math.PI) + 90;
				} else if (innerX <= 0 && innerY >= 0) {
					// console.log("↙");
					this.angle = 0 - (Math.asin(innerX / innerZ) * 180 / Math.PI) + 180;
				} else if (innerX <= 0 && innerY <= 0) {
					// console.log("↖");
					this.angle = 0 - (Math.asin(innerY / innerZ) * 180 / Math.PI) + 270;
				}

				this.thisMousePosition = {
					x: innerX,
					y: innerY,
					z: innerZ
				};
				//计算百分比
				// this.
				//console.log("x:"+innerX/20,";  y:"+innerY/20,"; ");
				this.showData = {x:(innerX/this.maxR),y:-(innerY/this.maxR)};
				// this.showData.y = ;
				
				// console.log("----",this.showData.x);
				// console.log("鼠标绝对位置",this.thisMousePosition)
				// console.log("abcs",e.changedTouches[0]);
				
				this.auto_sendEmit();								//发送数据
			},
			auto_sendEmit:function(){								//发送信息 事件message
				
				this.$emit('message',{
					line:this.thisMousePosition.z,
					angle:this.angle,
					showData:{x:this.showData.x,y:this.showData.y}
				});
			},
			fun_mouseDown:function(e){
				// console.log("down");
				
				let innerX = 0;										//当鼠标第一次按下的时候获取相对位置并获取相差的位置
				let innerY = 0;
				if(e.changedTouches == undefined){
					innerX = e.clientX ;
					innerY = e.clientY ;
				}else{
					innerX = e.changedTouches[0].clientX ;
					innerY = e.changedTouches[0].clientY ;
				}
				
				let positionX = 0;									//获取当前框中心点的绝对位置
				let positionY = 0;
				this.differPosition.x = this.point.x-innerX;
				this.differPosition.y = this.point.y-innerY;
				
				
				this.isDown = true;
				this.auto_mouse(e,100);
				this.$emit("down","");
				// this.transifromTime = 0;
			},
			fun_mouseUp:function(){
				// console.log("up");
				this.transifromTime = 200;
				this.showData.y = 0;
				this.showData.x = 0;
				
				this.isDown = false;
				this.$emit("up","");
			}

		},
		created() {
			this.auto_media();												//调整屏幕大小并执行
			window.onload = ()=>{											//调整屏幕大小并执行
				window.onresize = this.auto_media;
			}
			document.getElementById("body").onmousemove = this.auto_mouse;	//获取body的事件
			document.getElementById("body").onmouseup = this.fun_mouseUp;
			
			document.getElementById("body").ontouchmove = this.auto_mouse;	//手机端的事件
			document.getElementById("body").ontouchend = this.fun_mouseUp;
			// document.getElementById("body").ontouchstart
			
			this.point.x = this.attributes.x;								//同步位置
			this.point.y = this.attributes.y;
			this.appStyle.x = this.point.x - this.attributes.w/2;			//位置
			this.appStyle.y = this.point.y -  this.attributes.h/2;
			this.appStyle.w = this.attributes.w;
			this.appStyle.h = this.attributes.h;
			this.maxR = this.attributes.r;
			console.log("中心点的位置",this.point);
			console.log("方框的绝对位置",this.appStyle.x,this.appStyle.y);
			console.log("方框的绝对宽高",this.appStyle.w,this.appStyle.h);
		}
	}
</script>

<style>
	#btnHome {
		width: 500px;
		height: 500px;
		position: fixed;
		border: 1px solid red;
		animation: apps 5s ease;
		user-select: none;
	}
	#btnHome *{
		transform-style: preserve-3d;
		
	}
	
	#btnHome #points {
		width: 3px;
		height: 3px;
		position: absolute;
		background: #0f0;
		margin: -1.5px;
		top: 50%;
		left: 50%;
	}

	#btnHome #mouse {
		width: 100px;
		height: 100px;
		position: absolute;
		background: #fdff7301;
		margin: -50px;
		border-radius: 200px;
		color: #00f0;
		user-select: none;
		cursor: progress;
		transform: translateZ(50px);
		user-select: none;
		pointer-events: none;
	}
	#btnHome #box{
		width: 100%;
		height: 100%;
		position: absolute;
		top:0px;
		left:0px;
		/* background:#FFFFAA55; */
		border-radius: 300px;
		background-image: url(../../../public/component-img/home-bg.png);
		background-size: 100% 100%;
	}
	#btnHome #abcd {
		width: 100px;
		height: 100px;
		position: absolute;
		top:50%;
		left: 50%;
		margin: -50px;
		background: #00666688;
		transform: translateZ(60px);
		border-radius: 300px;
		background-image: url(../../../public/component-img/home-bg1.png);
		background-size: 100% 100%;
	}
</style>