[canvasピット1]キャンバスドラッグ効果

効果を確認してくださいhttp://philippica.github.io/  ドラゴをクリックします
前の絵と似ていますので、一部を省略しました.
 
マウスを押した時に現在のキャンバスの内容をppImgDataに保存し、初期点の位置を記録し、マウスが移動した時にppDrag関数を呼び出します.

 1     $('#myCanvas').unbind();
 2     $('#myCanvas').mousemove(function(e)
 3     {
 4         if(ppMousePressed)
 5         {
 6             var mouseX = e.pageX - this.offsetLeft;
 7             var mouseY = e.pageY - this.offsetTop;
 8             context.clearRect(0, 0, ppCanvasWidth, ppCanvasHeight);//  
 9             ppDrag(mouseX, mouseY);
10         }
11     });
12     $('#myCanvas').mousedown(function(e)
13     {
14         if(e.which == 1)//     
15         {
16             ppMousePressed = true;
17             ppImgData = context.getImageData(0, 0, ppCanvasWidth, ppCanvasHeight);//      
18             var mouseX = e.pageX - this.offsetLeft;
19             var mouseY = e.pageY - this.offsetTop;
20             ppInitialPoint = new ppPoint(mouseX, mouseY);//        
21         }
22     });
23     $(window).mouseup(function(e){
24         ppMousePressed = false;
25     });

 
ポイントはppDragです.どう書きますか?
 
その後も簡単です.putImageData関数の後の二つのパラメータは画像の左上隅座標を描いて、マウスの初期位置、マウスの現在位置から現在の位置を計算します.
 

1 function ppDrag(curX, curY)
2 {
3     var dX = curX - ppInitialPoint.x;
4     var dY = curY - ppInitialPoint.y;
5     console.info(dX+" "+dY);
6     context.putImageData(ppImgData, dX, dY);
7 }