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

一、说明

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

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

二、思路

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>

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

箭头随着手指滑动而旋转（二）相关推荐

箭头随着手指滑动而旋转（一）
一.需求: 用canvas来实现一个箭头随着手指滑动而旋转二.思路: 1.首先要写一个canvas绘制箭头的函数 2.写一个获取当前触摸点的坐标的函数 3.初始化箭头函数 4.随着触摸点的不停变化, ...
QT使用之手指滑动 | 物理惯性继续滑动动画的实现，根据不同速度实现不同动画效果
2021/03/26: 参考如下:有惯性,有回顶效果:使用手势 QT使用之 :手指滑动后物理惯性滑动-动画的实现,根据不同速度有不同的效果一. 前言首先,因为是使用手指滑动,所以控件要求能够支持 ...
点击左右箭头实现内容滑动
实现效果: 1.通过点击左右箭头实现内容滑动 2.点击+添加标签 3.点击×删除标签 4.点击标签实现思路: 1.position布局 1 .通过点击左右箭头实现内容滑动代码: html < ...
Android自定义View，跟随手指滑动效果
Android自定义View,实现跟随手指滑动效果, 效果如下: 一,重写onTouchEvent方法最后返回true 二,在MotionEvent.ACTION_MOVE情况下改变自定义view ...
androidstudio判断手指滑动方向_方向盘的黑科技有多“黑”
Mercedes-Benz 从第一辆汽车发明到现在的一个多世纪里,有数不清的汽车品牌诞生,也有不少品牌衰败.而他们中间,真正敢说"我为汽车技术的革命与进步做出了贡献"的品牌却寥寥无 ...
jquery 手指滑动多半屏_JS拖拽专题(五)——「玩出花儿来」移动端滑动事件的封装...
欢迎来到我的JS拖拽专题系列文章,本章节将是拖拽系列的最后一篇.感谢大家的支持^_^ 上一章节我们说到了拖拽让图片相互之间交换位置,相对来说是一个比较综合的示例,涉及到了矩形的碰撞检测,勾股定理计算两 ...
C++旋转二维MxN矩阵的算法(附完整源码)
C++旋转二维MxN矩阵的算法 C++旋转二维MxN矩阵的算法完整源码(定义,实现,main函数测试) C++旋转二维MxN矩阵的算法完整源码(定义,实现,main函数测试) #include < ...
怎么输出一个二维数组_LeetCode54与59，一个口诀教会你旋转二维数组
Halo, 好久不见各位小伙伴,这几天工作是在是太忙了,忙到都没有足够的时间去继续写算法题目,那么今天一次性带来两道比较类似的题目,在LeetCode中属于中等难度的题目.但其实只要你掌握其中的要点, ...
北师大版图形的旋转二教案_新北师大版八年级下册数学《图形的旋转(2)》教案...
第三章图形的平移与旋转 2. 图形的旋转(二) 一.学生起点分析学生已对轴对称.平移这两种简单的全等变换有了很好的认识,并对旋转有了初步的了解.教材将旋转变换安排至此,目的是力求让学生从动态的角 ...

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

箭头随着手指滑动而旋转（二）相关推荐

最新文章

热门文章