一、说明
这篇文章和我的上一篇文章 《箭头随着手指滑动而旋转(一)》 有所不同,上一篇文章中的箭头方向始终指向触摸点的位置,这篇文章的箭头方向是在上一次方向的基础上进行改变。
话不多说,开始实现这个需求。
二、思路
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>