6.5 为图像附加事件监听器

优质

小牛编辑

126浏览

2023-12-01

本节，我们将为图像附加事件监听器。在使用Events类时，我们只能为路径附加事件监听器，而画布上绘制的图像不属于路径的范畴，我们可以创建一个覆盖在图像上矩形区域，以便能为这个矩形区域附加事件，其结果就是为图像附加事件监听器。

操作步骤

按照以下步骤，绘制两个不同图像，并为它们附加mouseover, mouseout, mousedown, 和mouseup事件监听器：

1. 链接到Events类：

<script src="events.js">
</script>

2. 定义writeMessage()函数，该函数输出一条消息：

<script>
function writeMessage(context, message){
  context.font  = "18pt Calibri";
  context.fillStyle  = "black";
  context.fillText(message,  10,  25);
}

3. 创建一个图像加载函数，该函数先加载一组图像，然后，每当所有图像都加载完成，就调用callback函数：

/* 加载一组图像，当所有图像都加载完成后，以这组图像对象为入参，调用callback函数 */
function loadImages(sources, callback) {
  var loadedImages  =  0;
  var numImages  =  0;
  var images  =  {};
  //获取sources中图像的数目
  for  (var src in sources)  {
      numImages++;
  }
  //加载图像
  for  (var src in sources)  {
    images[src]  = new Image();
    images[src].onload  = function(){
      // 所有图像加载完成后，调用callback函数
      if  (++loadedImages  >= numImages)  {
           callback(images);
      }
    };
    images[src].src  = sources[src];
  }
}

4. 定义drawImages()函数，该函数实例化一个Events对象，并开始定义stage()函数：

function drawImages(images){
  var events  = new Events("myCanvas");
  var canvas  = events.getCanvas();
  var context  = events.getContext();
  var message  = "";
  events.setStage(function(){ this.clear();

5. 开始一个新区域，绘制左边的图像，定义一个矩形区域来表示图像路径，为矩形区域附加事件监听器，再关闭路径。重复上述步骤绘制右侧的矩形。然后，输出一条消息：

  this.beginRegion();
  context.drawImage(images.challengerImg,  50,  70,  240,  143);
  //为图像绘制矩形区域
  context.beginPath();
  context.rect(50,  70,  240,  143); 
  context.closePath();
  this.addRegionEventListener("mouseover", function(){
      message  = "Dodge Challenger mouseover!";
  });
  this.addRegionEventListener("mouseout", function(){
      message  = "Dodge Challenger mouseout!";
  });
  this.addRegionEventListener("mousedown", function(){
      message  = "Dodge Challenger mousedown!";
  });
  this.addRegionEventListener("mouseup", function(){
      message  = "Dodge Challenger mouseup!";
  });
  this.closeRegion();
  this.beginRegion();
  context.drawImage(images.cobraImg,  350,  50,  200,  150);
  //为图像绘制矩形区域
  context.beginPath();
  context.rect(350,  50,  200,  150); 
  context.closePath();
  this.addRegionEventListener("mouseover", function(){
      message  = "AC Cobra mouseover!";
  });
  this.addRegionEventListener("mouseout", function(){
      message  = "AC Cobra mouseout!";
  });
  this.addRegionEventListener("mousedown", function(){
      message  = "AC Cobra mousedown!";
  });
  this.addRegionEventListener("mouseup", function(){
      message  = "AC Cobra mouseup!";
  });
  this.closeRegion();
  writeMessage(context, message);
  });
}

6. 页面加载完成后，创建一组图像，并把它们作为loadImages()函数的入参：

window.onload  = function(){
  var sources  =  {
    challengerImg: "challenger.jpg", cobraImg: "cobra.jpg"
  };
  loadImages(sources, drawImages);
};
</script>

7. 在HTML文档的body部分嵌入canvas标签：

<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>

工作原理

页面加载完成后，我们可以使用图像加载函数，来加载两幅图像。当两幅图像都加载完成后，调用drawImages()函数，并实例化一个Events对象。在stage()函数中，我们调用beginRegion()函数开始一个新区域，绘制第一幅图像，再绘制一个矩形路径来定义图像路径，使用addRegionEventListener()方法附加事件，然后关闭路径。接下来，重复这个过程，来创建第二幅图像，并附加自己的一组事件监听器。

6.5 为图像附加事件监听器

操作步骤

工作原理

相关参考