HTML5 Canvas实战
6.7 拖放图像
阅读(

路径和文本

图形及组合

处理图像和视频

画布变换

动画给画布带来生机

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

创建一个Events类

使用画布鼠标坐标

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

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

为图像附加事件监听器

拖放图形

拖放图像

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

操作步骤

按照以下步骤,来拖放一副图像:

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章 绘制图像
  • 拖放图形

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验