箭头随着手指滑动而旋转

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了箭头随着手指滑动而旋转相关的知识,希望对你有一定的参考价值。

一、说明

      这篇文章和我的上一篇文章 《箭头随着手指滑动而旋转(一)》 有所不同,上一篇文章中的箭头方向始终指向触摸点的位置,这篇文章的箭头方向是在上一次方向的基础上进行改变。

      话不多说,开始实现这个需求。

二、思路

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

     2.初始化开始的坐标startX和startY, 移动的距离moveX和moveY, 旋转的角度rotation,起始点的角度angle1,结束点的角度angle2,旋转的比率rate(可选)

     3.给canvas元素绑定touch事件,

       当touchstart的时候,记录下当前触摸点的startX、startY以及angle1;

       当touchmove的时候,计算从上一触摸点到当前触摸点的移动距离moveX、moveY,上一个触摸点的角度angle1,当前触摸点的角度angle2,

       此时旋转的角度rotation=angle2-angle1;如果需要旋转比率rate的话,rotation=(angle2-angle1)*rate;

     4.然后初始化箭头对象,利用window.requestAnimationFrame循环绘制箭头

三、代码实现

      arrow.js

function Arrow(){
	this.x=0;
	this.y=0;
	this.rotation=0;
	this.color="#ff0";
}

Arrow.prototype.draw=function(context){
	context.save();
	context.translate(this.x,this.y);
	context.rotate(this.rotation);
	context.fillStyle=this.color;
	context.lineWidth=2;
	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();
}

  

  utils.js

var utils={
	//element是绑定触摸事件的元素,centerX和centerY分别是箭头旋转中心点的x,y坐标
	captureTouch:function(element,obj){
		var rate=obj.rate||1;
		var centerX=obj.centerX||0;
		var centerY=obj.centerY||0;
		var touch={x:null,y:null,isPressed:false,rotation:obj.rotation||0}
		var startX=null,startY=null,angle1=null,angle2=null,moveX=null,moveY=null;
		element.addEventListener("touchstart", function(e) {
			touch.isPressed=true;
			startX = e.touches[0].clientX;
			startY = e.touches[0].clientY;
			angle1 = Math.atan2(startY - centerY, startX - centerX);
		}, false);
		element.addEventListener("touchmove", function(e) {
			angle1 = Math.atan2(startY - centerY, startX - centerX);
			moveX = e.touches[0].clientX - startX;
			moveY = e.touches[0].clientY - startY;
			startX = e.touches[0].clientX;
			startY = e.touches[0].clientY;
			angle2 = Math.atan2(startY - centerY, startX - centerX);
			touch.rotation += (angle2 - angle1) * rate;
		}, false);
		element.addEventListener("touchend", function(e) {
				touch.isPressed=false;
		}, false);
		return touch;
	}
	
}

  

  index.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 canW = canvas.width / 2;
var canH = canvas.height / 2;
var arrow = new Arrow();
arrow.x = canW;
arrow.y = canH;

var touch_event = utils.captureTouch(canvas, {
	centerX: canW,
	centerY: canH,
	rotation: 0,
	rate: 1
});

(function drawFrame() {
	window.requestAnimationFrame(drawFrame);
	context.clearRect(0, 0, canvas.width, canvas.height);
	arrow.rotation = touch_event.rotation;
	arrow.draw(context);

})();

  

  html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>

	</head>

	<body>
		<canvas id="canvas"></canvas>
		<script src="js/arrow.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/utils.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

  

  

 

     

     

      

以上是关于箭头随着手指滑动而旋转的主要内容,如果未能解决你的问题,请参考以下文章

分享鼠标手指滑动旋转模型的基本控制脚本

当用户在屏幕上滑动手指时,如何使我的页面滑动?

汉堡菜单旋转到新活动的箭头

iQuery移动端手势事件插件-jGestures

Qt 5.5 绘制指针

使用 CGAffineTransform 的 UIView 旋转