6.7 拖放图像

本节实质上是结合前两节的概念，来演示如何拖放一副图像。

操作步骤

按照以下步骤，来拖放一副图像：

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. 定义drawImage()函数，该函数实例化一个Events对象，并设置用来覆盖图像的矩形区域的初始位置：

function drawImage(challengerImg){
  var events  = new Events("myCanvas");
  var canvas  = events.getCanvas();
  var context  = events.getContext();
  var rectX  = canvas.width  /  2  - challengerImg.width  /  2;
  var rectY  = canvas.height  /  2  - challengerImg.height  /  2;
  var draggingRect  = false;
  var draggingRectOffsetX  =  0;
  var draggingRectOffsetY  =  0;

4. 定义stage，如果布尔变量draggingRect的值为true，该函数首先根据鼠标的坐标来设置图像的坐标：

events.setStage(function(){
  var mousePos  = this.getMousePos();
  if  (draggingRect)  {
  rectX  = mousePos.x  - draggingRectOffsetX;
    rectY  = mousePos.y  - draggingRectOffsetY;
}

5. 清除画布，并输出一条消息：

//清除画布
  this.clear();
  writeMessage(context, "Drag and drop the car...");

6. 开始一个新区域，绘制图像，绘制矩形区域来定义图像路径，附加事件监听器，并关闭路径：

  this.beginRegion();
  context.drawImage(challengerImg, rectX, rectY, challengerImg.width, challengerImg.height);
  
  //为图像绘制矩形区域
  context.beginPath();
  context.rect(rectX, rectY, challengerImg.width, challengerImg.height);
  context.closePath();
  
  this.addRegionEventListener("mousedown", function(){
    draggingRect  = true;
    var mousePos  = events.getMousePos();
    draggingRectOffsetX  = mousePos.x  - rectX;
    draggingRectOffsetY  = mousePos.y  - rectY;
  });
  
  this.addRegionEventListener("mouseup", function(){
      draggingRect  = false;
  });
  
  this.addRegionEventListener("mouseover", function(){
      document.body.style.cursor  = "pointer";
  });
  
  this.addRegionEventListener("mouseout", function(){
      document.body.style.cursor  = "default";
  });
  
  this.closeRegion();
});
}

7. 页面加载完成后，加载图像，并调用drawImage()函数：

 window.onload  = function(){
  //加载图像
  challengerImg  = new Image();
  challengerImg.onload  = function(){
      drawImage(this);
  };
  challengerImg.src  = "challenger.jpg";
};
</script>

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

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

工作原理

要拖放图像，我们可以在图像上绘制一个不可见的矩形路径，来为图像提供路径，并为路径附加mousedown, mouseup, 和 mousemove事件，方法跟上一节类似的方法来处理拖放的三个阶段。

当用户拖放图像时，实际上他/他同时拖放了图像和相应的矩形路径。

• 第3章 绘制图像
• 拖放图形