js实现canvas绘制的图形的拖动效果

最近在学习canvas突然发现canvas的元素也可以实现拖动，原来写过DOM元素的拖动效果，感觉挺简单的，所以自己试着写了一个在canvas里拖动绘制图形的效果。
首先得先在canvas里绘制一个我们想要操作的图形，这时候就要用canvas的绘制功能了，绘制代码如下：

<canvas width="400" height="400" id="cvs"></canvas>
var oldPosition = {'x':100,'y':100};//图形的起始点
var area = {'w' : 50 , 'h' : 50};//绘制图形的宽高
var cvs = document.getElementById('cvs');
drawing : function(){
var ctx = this.canvas.getContext('2d');//得到画笔
ctx.clearRect(0,0,this.canvas.width,this.canvas.height);//每次绘制前先清除之前绘制的图形
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.fillRect(this.oldPosition.x,this.oldPosition.y,this.area.w,this.area.h);
ctx.closePath();
}

图形绘制完了，下一步就要考虑的问题就是怎样去定位到canvas里绘制的元素。和DOM元素不同，DOM元素可以通过getElementById或者getElementsByTagName等方法获得DOM元素，然后通过鼠标事件对其进行操作。在canvas里就要通过边界的临界值判断绘制方块咋canvas里的位置。
当我们通过鼠标点击页面的时候，浏览器通过事件对象传递给监听器一个鼠标的坐标，而此坐标是窗口的坐标，不是相对与canvas的坐标。大部分情况下，我们需要知道发生点击事件的点相对于canvas的位置，而不是在窗口的位置。so，我们需要一个方法将鼠标的坐标转换成canvas上的坐标，下面的方法就实现了转换的功能：

window2Canvas : function(x,y){
var bbox = this.canvas.getBoundingClientRect();
return {x : x-bbox.left ,y : y-bbox.top}
}

做好了坐标转换，下一步就要去判断绘制图形的位置了，下面的方法则是实现了判断绘制图形位置功能：

isInRect : function(e){
var position = this.window2Canvas(e.clientX,e.clientY);
if(position.x < this.oldPosition.x || position.x > this.oldPosition.x+this.area.w){
return false;
}
if(position.y < this.oldPosition.y || position.y > this.oldPosition.y+this.area.h){
return false;
}
return true;
}

找到了绘制的图形，下一步就是让他动起来。拖动主要用到三个鼠标事件，分别是mousedown、mousemove、mouseup。通过上述的三个事件就可以实现拖动的效果了。实现事件的方法如下：

cursorMouseMove : function(e){//当鼠标移到绘制图形上的时候改变鼠标的状态
if(this.isInRect(e)){
this.canvas.style.cursor = 'move';
}else{
this.canvas.style.cursor = 'default';
}
},
mouseDown : function(e){//当鼠标按下时调用
if(this.isInRect(e)){
var startPosition = this.window2Canvas(e.clientX,e.clientY);

var startPositionX = startPosition.x - this.oldPosition.x;
var startPositionY = startPosition.y - this.oldPosition.y;

var _this = this;
this.canvas.onmousemove = function(e){//鼠标移动的时候
var newPosition = _this.window2Canvas(e.clientX,e.clientY);
_this.oldPosition.x = newPosition.x - startPositionX;
_this.oldPosition.y = newPosition.y - startPositionY;
//判断绘制的图形是否超出canvas的边界
if(_this.oldPosition.x < 0) _this.oldPosition.x = 0;

if(_this.oldPosition.x + _this.area.w > _this.canvas.width)
_this.oldPosition.x = _this.canvas.width - _this.area.w;

if(_this.oldPosition.y < 0 ) _this.oldPosition.y = 0;

if(_this.oldPosition.y + _this.area.h > _this.canvas.height)
_this.oldPosition.y = _this.canvas.height - _this.area.h;
//边移动边在新的位置绘制图形
_this.drawing();
}
}
},
mouseUp : function(e){//鼠标抬起的时候调用
var _this = this;
this.canvas.onmousemove = null;
this.canvas.onmousemove = function(e){
_this.cursorMouseMove(e);
}
}

事件处理方法完了，下面对事件方法进行初始化就可以了。初始化代码如下：

initEvent : function(){
var _this = this;
this.canvas.onmousemove = function(e){_this.cursorMouseMove(e);};
this.canvas.onmousedown = function(e){_this.mouseDown(e);}
this.canvas.onmouseup = function(e){_this.mouseUp(e);}
}

拖动所需要的方法基本上就写完了，下面对整个拖动的功能同意来个初始化方法就可以了，初始化的代码如下：

init : function(){
this.drawing();
this.initEvent();
}

好了，基本就这些，下面让我们去new一个就可以了

var drag = new Drag(oldPosition,area,'steelblue',cvs);
drag.init();

完成！上面的代码有点乱，下面附上完整的js代码：

var oldPosition = {'x':100,'y':100};//图形的起始点
var area = {'w' : 50 , 'h' : 50};//绘制图形的宽高
var cvs = document.getElementById('cvs');

var Drag = function(oldPosition,area,color,canvas){
this.oldPosition = oldPosition;
this.area = area;
this.color = color;
this.canvas = canvas;
}
Drag.prototype = {
init : function(){
this.drawing();
this.initEvent();
},
drawing : function(){
var ctx = this.canvas.getContext('2d');//得到画笔
ctx.clearRect(0,0,this.canvas.width,this.canvas.height);//每次绘制前先清除之前绘制的图形
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.fillRect(this.oldPosition.x,this.oldPosition.y,this.area.w,this.area.h);
ctx.closePath();
},
window2Canvas : function(x,y){
var bbox = this.canvas.getBoundingClientRect();
return {x : x-bbox.left ,y : y-bbox.top}
},
isInRect : function(e){
var position = this.window2Canvas(e.clientX,e.clientY);
if(position.x < this.oldPosition.x || position.x > this.oldPosition.x+this.area.w){
return false;
}
if(position.y < this.oldPosition.y || position.y > this.oldPosition.y+this.area.h){
return false;
}
return true;
},
initEvent : function(){
var _this = this;
this.canvas.onmousemove = function(e){_this.cursorMouseMove(e);};
this.canvas.onmousedown = function(e){_this.mouseDown(e);}
this.canvas.onmouseup = function(e){_this.mouseUp(e);}
},
cursorMouseMove : function(e){//当鼠标移到绘制图形上的时候改变鼠标的状态
if(this.isInRect(e)){
this.canvas.style.cursor = 'move';
}else{
this.canvas.style.cursor = 'default';
}
},
mouseDown : function(e){//当鼠标按下时调用
if(this.isInRect(e)){
var startPosition = this.window2Canvas(e.clientX,e.clientY);

var startPositionX = startPosition.x - this.oldPosition.x;
var startPositionY = startPosition.y - this.oldPosition.y;

var _this = this;
this.canvas.onmousemove = function(e){//鼠标移动的时候
var newPosition = _this.window2Canvas(e.clientX,e.clientY);
_this.oldPosition.x = newPosition.x - startPositionX;
_this.oldPosition.y = newPosition.y - startPositionY;
//判断绘制的图形是否超出canvas的边界
if(_this.oldPosition.x < 0) _this.oldPosition.x = 0;

if(_this.oldPosition.x + _this.area.w > _this.canvas.width)
_this.oldPosition.x = _this.canvas.width - _this.area.w;

if(_this.oldPosition.y < 0 ) _this.oldPosition.y = 0;

if(_this.oldPosition.y + _this.area.h > _this.canvas.height)
_this.oldPosition.y = _this.canvas.height - _this.area.h;
//边移动边在新的位置绘制图形
_this.drawing();
}
}
},
mouseUp : function(e){//鼠标抬起的时候调用
var _this = this;
this.canvas.onmousemove = null;
this.canvas.onmousemove = function(e){
_this.cursorMouseMove(e);
}
}
}
var drag = new Drag(oldPosition,area,'steelblue',cvs);
drag.init();