Canvas实现物体捕获及拖拽

  之前《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动画开发