[canvas入坑1]canvas 画布拖拽效果

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

查看效果请到 http://philippica.github.io/ 点击drag

和上一篇画图很像，所以有些部分做了省略

当鼠标按下时保存当前画布上的内容到ppImgData中,并且记录下初始点的位置,当鼠标移动时调用ppDrag函数

$('#myCanvas').unbind();
$('#myCanvas').mousemove(function(e)
{
if(ppMousePressed)
{
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
context.clearRect(0, 0, ppCanvasWidth, ppCanvasHeight);//清屏
ppDrag(mouseX, mouseY);
}
});
$('#myCanvas').mousedown(function(e)
{
if(e.which == 1)//茹果是左键
{
ppMousePressed = true;
ppImgData = context.getImageData(0, 0, ppCanvasWidth, ppCanvasHeight);//保存当前画布
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
ppInitialPoint = new ppPoint(mouseX, mouseY);//记录鼠标初始位置
}
});
$(window).mouseup(function(e){
ppMousePressed = false;
});

所以关键就是ppDrag怎么写

然后也挺简单的,putImageData函数的后两个参数是画出图像的左上角坐标,然后就可以根据鼠标的初始位置、鼠标当前位置计算（其实就是做个差）出当前应该画的位置了

function ppDrag(curX, curY)
{
var dX = curX - ppInitialPoint.x;
var dY = curY - ppInitialPoint.y;
console.info(dX+" "+dY);
context.putImageData(ppImgData, dX, dY);
}