箭头随着手指滑动而旋转（一）

最新推荐文章于 2021-08-31 23:13:33 发布

weixin_30478923

最新推荐文章于 2021-08-31 23:13:33 发布

阅读量331

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhouyg/p/6225936.html

版权

一、需求：

用canvas来实现一个箭头随着手指滑动而旋转

二、思路：

1.首先要写一个canvas绘制箭头的函数

2.写一个获取当前触摸点的坐标的函数

3.初始化箭头函数

4.随着触摸点的不停变化，获取到当前触摸点和箭头中心点的角度，然后用canvas不停绘制箭头

三、代码实现

1. arrow.js

function Arrow(){
	this.x=0;
	this.y=0;
	this.color="#ff0";
	this.rotation=0;	
}
Arrow.prototype.draw=function(context){
	context.save();
	context.translate(this.x,this.y);
	context.rotate(this.rotation);
	context.lineWidth=2;
	context.fillStyle=this.color;
	context.beginPath();
	context.moveTo(-50,-25);
	context.lineTo(0,-25);
	context.lineTo(0,-50);
	context.lineTo(50,0);
	context.lineTo(0,50);
	context.lineTo(0,25);
	context.lineTo(-50,25);
	context.lineTo(-50,-25);
	context.fill();
	context.stroke();
	context.restore();
}

　　2.utils.js

var utils={
	captureMouse:function(element){
		var mouse={x:0,y:0};
		element.addEventListener("mousemove",function(e){
			var x,y;
			if(e.pageX||e.pageY){
				x=e.pageX;
				y=e.pageY;
			}else{
				x=e.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft);
				y=e.clientX+(document.documentElement.scrollTop||document.body.scrollTop);
			}
			x-=element.offsetLeft;
			y-=element.offsetTop;
			mouse.x=x;
			mouse.y=y;
		},false);
		return mouse;
	},
	captureTouch:function(element){
		var touch={x:null,y:null,isPressed:false}
		element.addEventListener("touchstart",function(e){
			touch.isPressed=true;
		},false);
		element.addEventListener("touchmove",function(e){
			var x,y,
			event=e.touches[0];
			
			if(event.pageX||event.pageY){
				x=event.pageX;
				y=event.pageY;
			}else{
				x=event.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft);
				y=event.clientY+(document.documentElement.scrollTop||document.body.scrollTop);
			}
			x-=element.offsetLeft;
			y-=element.offsetTop;
			touch.x=x;
			touch.y=y;
		},false);
		element.addEventListener("touchend",function(e){
			touch.isPressed=false;
		},false);
		return touch;
	}
}

　　3.inde.js

document.addEventListener("touchmove",function(e){
	   	e.preventDefault();
	   },false);
		var canvas=document.querySelector("#canvas");
		canvas.width=document.documentElement.clientWidth||document.body.clientWidth;
		canvas.height=document.documentElement.clientHeight||document.body.clientHeight;
		var context=canvas.getContext("2d");
		var mouse=utils.captureTouch(canvas);
		var arrow=new Arrow();
		arrow.x=canvas.width/2;
		arrow.y=canvas.height/2;
		(function drawFrame(){
			window.requestAnimationFrame(drawFrame,canvas);
			context.clearRect(0,0,canvas.width,canvas.height);
			var dx=mouse.x-arrow.x,
			    dy=mouse.y-arrow.y;
			    arrow.rotation=Math.atan2(dy,dx);
			    arrow.draw(context);
		})();

　　4.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			html,body{
				height: 100%;
				width:100%;
				overflow: hidden;
			}
			body,canvas{
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas"></canvas>
	</body>
	<script src="js/utils.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/arrow.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</html>

转载于:https://www.cnblogs.com/zhouyg/p/6225936.html