[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);
}