6.1 定义Events类

在第5章 通过动画给画布带来生机，我们创建了一个自定义的类来处理动画。跟第5章类似，本章我们将创建一个自定义的类，来处理画布事件。

由于图形无法作为对象进行访问（真无赖！），我们就不能像下面的div元素那样来附加事件监听器：

document.getElementById("foo").addEventListener("mouseup", function()
{
  // do stuff
}, false);

那我们该怎么办呢？在画布API中，一个图形的开始由beginPath()方法定义，一个图形的结束由closePath()方法定义，如果遵循画布API的模式，通过引入区域的概念（区域就是多个图形的封装），就可以更进一步扩展我们的思路。而且，如果能像下面为DOM元素添加事件监听器那样，为一个区域添加事件监听器，那就太好了：

this.addRegionEventListener("mouseup", function()  { 
  // do stuff
});

Events类的目标是，通过引入区域，来扩展画布API，使其能够支持画布事件。区域既能支持像mousedown, mouseup, mouseover, mouseout, mousemove桌面事件监听器，也能支持像touchstart, touchend, touchmove的移动事件监听器。

操作步骤

按照以下步骤创建Events类，它将使我们能够为画布上的图形和区域附加事件监听器：

1. 定义Events类的构造函数：

var Events  = function(canvasId) {
  this.canvas  = document.getElementById(canvasId); 
  this.context  = this.canvas.getContext("2d");
  this.stage  = undefined;
  this.listening  = false;
  //桌面事件标志
  this.mousePos  = null;
  this.mouseDown  = false;
  this.mouseUp  = false;
  this.mouseOver  = false;
  this.mouseMove  = false;
  //移动事件标志
  this.touchPos  = null;
  this.touchStart  = false;
  this.touchMove  = false;
  this.touchEnd  = false;
  //区域事件
  this.currentRegion  = null;
  this.regionIndex  =  0;
  this.lastRegionIndex  =  -1;
  this.mouseOverRegionIndex  =  -1;
};

2. 定义getContext()方法，该方法返回画布上下文对象：nbsp;nbsp;nbsp;

 Events.prototype.getContext  = function() {
  return this.context;
};

3. 定义getCanvas()方法，该方法返回画布的DOM元素：nbsp;nbsp;nbsp;

Events.prototype.getCanvas  = function() {
  return this.canvas;
};

4. 定义clear()方法，该方法清除画布：nbsp;nbsp;nbsp;

Events.prototype.clear  = function(){
  this.context.clearRect(0,  0, this.canvas.width, this.canvas. height);
};

5. 定义getCanvasPos()方法，该方法返回画布的位置：nbsp;nbsp;nbsp;

Events.prototype.getCanvasPos  = function() {
  var obj  = this.getCanvas();
  var top  =  0;
  var left  =  0;
  while  (obj.tagName  != "BODY")  {
    top  += obj.offsetTop;
    left += obj.offsetLeft;
    obj  = obj.offsetParent;
  }
  return  {
    top: top,
    left: left
  };
};

6. 定义setStage()方法，该方法设置stage()函数：nbsp;nbsp;nbsp;

Events.prototype.setStage  = function(func){
  this.stage  = func;
  this.listen();
};