HTML5 Canvas实战
6.1 定义Events类
阅读(

路径和文本

图形及组合

处理图像和视频

画布变换

动画给画布带来生机

与画布交互:为图形和区域附加事件监听器

定义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();
};

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验