HTML5 Canvas实战
6.6 拖放图形
阅读(

路径和文本

图形及组合

处理图像和视频

画布变换

动画给画布带来生机

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

创建一个Events类

使用画布鼠标坐标

为区域附加鼠标事件监听器

为移动设备上的区域附加触摸事件监听器

为图像附加事件监听器

拖放图形

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

拖放图形
图6-5 拖放图形

操作步骤

按照以下步骤,来拖放一个矩形:

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事件监听器,来把鼠标光标恢复为指针,以表明鼠标已经不在元素上了。

相关参考

  • 第3章 拖放图像

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验