html5拖动图像的关键字,6.7 拖放图像 - HTML5 Canvas 实战

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

操作步骤

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

1.链接到Events类：

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

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";

};

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

工作原理

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

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

第3章 绘制图像

拖放图形