之前《Canvas事件处理及示例代码分析》一文介绍了处理Canvas中的鼠标和键盘事件的方式,本文以此为基础,参照参考文献1,学习并实现基于Canvas的物体捕获及拖拽。
物体捕获
所谓物体捕获,是指鼠标位于Canvas中的物体边界内部时,程序能识别并进行相应的处理。一般来说,主要是通过鼠标左键点击以捕获物体,也即程序应能处理Canvas的mousedown事件,并识别鼠标是否位于物体边界之内。
本文中的物体为圆形,鼠标是否位于物体边界之内,主要判据是鼠标到圆心的距离,其函数实现如下所示:
window.tools.CheckMouse=function(mouse,bX,bY,bR)
{
var dx=mouse.x-bX;
var dy=mouse.y-bY;
var distance=Math.sqrt(dx*dx+dy*dy);
if(distance<bR)
{
return true;
}
else
{
return false;
}
}
参考文献1中给出的物体捕获示例主要分两种:捕获静态物体及动态物体,其实这两类操作的核心都一样,都是在鼠标点击时判断鼠标与圆心的位置是否超出了圆的半径,未超出则捕获成功,否则未捕获。其关键代码是mousedown事件的响应函数:
...
var cnv=$$("canvas");
...
cnv.addEventListener("mousemove",function()
{
if(window.tools.CheckMouse(mouse,ballX,ballY,ballR))
{
....
}
else
{
...
}
},false);
捕获静态圆及动态圆的示意图如下所示:
物体拖拽
物体拖拽功能基于物体捕获,不过除了mousedown事件,还需要处理mousemove和mouseup事件。其主要逻辑是鼠标按下时判断是否捕获圆形,捕获成功的话,则增加mousemove和mouseup事件响应函数,在mousemove事件响应函数中根据鼠标的位置更新圆形的位置,当鼠标按起时,取消mousemove和mouseup事件响应函数。关键代码如下所示:
cnv.addEventListener("mousedown",function()
{
if(window.tools.CheckMouse(mouse,ballX,ballY,ballR))
{
dx=mouse.x-ballX;
dy=mouse.y-ballY;
cnv.addEventListener("mouseup",onMouseUp,false);
cnv.addEventListener("mousemove",onMouseMove,false);
txt.innerHTML="捕获成功";
}
},false);
物体拖拽的示意图如下所示:
参考文献:
[1]从0到1 HTML5 Canvas动画开发