6.6 拖放图形

优质

小牛编辑

130浏览

2023-12-01

本节，我们将介绍事件监听器的必杀技——拖放。如果没有Events或其它轻量级的JavaScript库，拖放操作将很难开发。我们可以使用Events来为矩形附加mouseover, mousedown, mousemove, mouseup, 和mouseout事件，来处理不同阶段的拖放操作。

操作步骤

按照以下步骤，来拖放一个矩形：

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. 页面加载完成后，实例化一个Events对象，定义被拖放矩形的起始位置，定义拖放操作的draggingRect,draggingRectOffsetX, draggingRectOffsetY变量：

window.onload  = function(){
  events  = new Events("myCanvas");
  var canvas  = events.getCanvas();
  var context  = events.getContext();
  var rectX  = canvas.width  /  2  -  50;
  var rectY  = canvas.height  /  2  -  25;
  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 box...");
  this.beginRegion();
  //绘制矩形
  context.beginPath();
  context.rect(rectX, rectY,  100,  50); 
  context.lineWidth  =  4;
  context.strokeStyle  = "black"; 
  context.fillStyle  = "#00D2FF"; 
  context.fill();
  context.stroke();
  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();
  });
};
</script>

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

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

工作原理

拖放处理分为三个阶段：

1. 在开始操作的图形上检测mousedown事件

2. 使用mousemove事件监听器，根据鼠标坐标来定位图形

3. 当鼠标释放时（mouseup），放置图形

在stage()函数中，如果布尔变量draggingRect的值为true，我们可以相对于鼠标的坐标，来设置矩形的位置。然后，调用beginRegion()方法，开始一个新区域，绘制矩形，使用addRegionEventListener()方法附加事件监听器。我们可以增加mousedown事件监听器，把draggingRect变量设置为true，再计算draggingRectOffsetX 和draggingRectOffsetY变量的值，这两个变量表示鼠标和矩形左上角之间的位置偏移。接下来，我们增加mouseup事件监听器，把draggingRect变量设置为false，来完成拖放操作。我们也可以增加mouseover事件监听器，来把鼠标光标变成手型，以表明可以与该元素进行互动，也可以增加mouseout事件监听器，来把鼠标光标恢复为指针，以表明鼠标已经不在元素上了。

6.6 拖放图形

操作步骤

工作原理

相关参考