6.6 拖放图形
本节,我们将介绍事件监听器的必杀技——拖放。如果没有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事件监听器,来把鼠标光标恢复为指针,以表明鼠标已经不在元素上了。
相关参考
- 第3章 拖放图像