箭头随着手指滑动而旋转（二）
一、说明
这篇文章和我的上一篇文章 《箭头随着手指滑动而旋转（一）》 有所不同，上一篇文章中的箭头方向始终指向触摸点的位置，这篇文章的箭头方向是在上一次方向的基础上进行改变。
话不多说，开始实现这个需求。
二、思路
1.首先写出一个canvas绘制箭头的函数
2.初始化开始的坐标startX和startY， 旋转的角度rotation，起始点的角度angle1，结束点的角度angle2，旋转的比率rate（可选）
3.给canvas元素绑定touch事件
当touchstart的时候，记录下当前触摸点的startX、startY以及angle1；
当touchmove的时候，上一个触摸点的角度angle1，当前触摸点的角度angle2，然后将startX,startY重置；
此时旋转的角度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;
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);
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>
