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

一、需求：

用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

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

箭头随着手指滑动而旋转（二）
一.说明这篇文章和我的上一篇文章 <箭头随着手指滑动而旋转(一)> 有所不同,上一篇文章中的箭头方向始终指向触摸点的位置,这篇文章的箭头方向是在上一次方向的基础上进行改变. 话不多说,开 ...
androidstudio判断手指滑动方向_方向盘的黑科技有多“黑”
Mercedes-Benz 从第一辆汽车发明到现在的一个多世纪里,有数不清的汽车品牌诞生,也有不少品牌衰败.而他们中间,真正敢说"我为汽车技术的革命与进步做出了贡献"的品牌却寥寥无 ...
QT使用之手指滑动 | 物理惯性继续滑动动画的实现，根据不同速度实现不同动画效果
2021/03/26: 参考如下:有惯性,有回顶效果:使用手势 QT使用之 :手指滑动后物理惯性滑动-动画的实现,根据不同速度有不同的效果一. 前言首先,因为是使用手指滑动,所以控件要求能够支持 ...
jquery 手指滑动多半屏_JS拖拽专题(五)——「玩出花儿来」移动端滑动事件的封装...
欢迎来到我的JS拖拽专题系列文章,本章节将是拖拽系列的最后一篇.感谢大家的支持^_^ 上一章节我们说到了拖拽让图片相互之间交换位置,相对来说是一个比较综合的示例,涉及到了矩形的碰撞检测,勾股定理计算两 ...
Android BackgroundViewPager：类似桌面背景壁纸随手指滑动
Android BackgroundViewPager:类似桌面背景壁纸随手指滑动 Android BackgroundViewPager要实现的功能和Android桌面极为类似,即,假设用户的 ...
uniapp 简单有效判断手指滑动方向
@touchstart="touchStart"@touchend="touchEnd"@touchmove='move' 首先是在uniapp中运用这三个方 ...
table 手机滑动_【推荐下载】html5手机端手指滑动选项卡滚动切换效果(转)
html5 手机端手指滑动选项卡滚动切换效果 ( 转 ) 2017/09/25 41 !DOCTYPE html html lang="en" head meta charset= ...
手机html5翻页效果代码,jquery html5手机端翻书效果_手指滑动书本翻页效果代码
特效描述:jquery html5手机端翻书手指滑动书本翻页效果.显现手机端翻书效果,支持手拖动翻页代码结构 1. 引入JS 2. HTML代码 function loadApp() { // ...
点击左右箭头实现内容滑动
实现效果: 1.通过点击左右箭头实现内容滑动 2.点击+添加标签 3.点击×删除标签 4.点击标签实现思路: 1.position布局 1 .通过点击左右箭头实现内容滑动代码: html < ...

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

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

最新文章

热门文章