キャンバスに画像をドラッグ

Question

canvas要素の周りに画像をドラッグしようとしています。私はドラッグをしていましたが、私が好きなように動作していません。

イメージはキャンバス要素よりも常に大きくなりますが、キャンバス内のイメージの左側はキャンバスの左側よりも右には移動できません。同様に、右側は "キャンバスの右側よりも「より右」になります。基本的には、画像には何も表示されないように制限されています空白キャンバススペース。

ドラッグの問題は、私が実際に現在の位置から画像を移動したいのとは反対に、画像が「ポップ」して0,0がマウスの位置から来ているように振り戻すときです。

document.onmousemove = function(e) { 
    if(mouseIsDown) { 
     var mouseCoords = getMouseCoords(e); 
     offset_x += ((mouseCoords.x - canvas.offsetLeft) - myNewX); 
     offset_y += ((mouseCoords.y - canvas.offsetTop) - myNewY); 

     draw(offset_x, offset_y); 

     // offset_x = ((mouseCoords.x - canvas.offsetLeft) - myNewX); 
     // offset_y = ((mouseCoords.y - canvas.offsetTop) - myNewY); 

     // offset_x = (mouseCoords.x - canvas.offsetLeft) - myNewX; 
     // offset_y = (mouseCoords.y - canvas.offsetTop) - myNewY; 

     offset_x = prevX; 
     offset_y = prevY; 
    } 

    /*if(mouseIsDown) { 
     var mouseCoords = getMouseCoords(e); 
     var tX = (mouseCoords.x - canvas.offsetLeft); 
     var tY = (mouseCoords.y - canvas.offsetTop); 

     var deltaX = tX - prevX; 
     var deltaY = tY - prevY; 

     x += deltaX; 
     y += deltaY; 

     prevX = x; 
     prevY = y; 

     draw(x, y); 
    }*/ 
}; 

私は現在、私が平凡な効果を得ているものですか？

Answer 1

イメージの現在のオフセットを移動しながら記録し、それを各mousedownとのオフセット（キャンバスの左上からのオフセットに加えて）を使って初期オフセットを決定する必要があります。

var dragging = false, 
    imageOffset = { 
     x: 0, 
     y: 0 
    }, 
    mousePosition; 

function dragImage(coords) { 
    imageOffset.x += mousePosition.x - coords.x; 
    imageOffset.y += mousePosition.y - coords.y; 

    // constrain coordinates to keep the image visible in the canvas 
    imageOffset.x = Math.min(0, Math.max(imageOffset.x, canvas.width - imageWidth)); 
    imageOffset.y = Math.min(0, Math.max(imageOffset.y, canvas.height - imageHeight)); 

    mousePosition = coords; 
} 

function drawImage() { 
    // draw at the position recorded in imageOffset 
    // don't forget to clear the canvas before drawing 
} 

function getMouseCoords(e) { 
    // return the position of the mouse relative to the top left of the canvas 
} 

canvas.onmousedown = function(e) { 
    dragging = true; 
    mousePosition = getMouseCoords(e); 
}; 
document.onmouseup = function() { 
    dragging = false; 
}; 
document.onmousemove = function(e) { 
    if(dragging) dragImage(getMouseCoords(e)); 
}; 

私はどのような方法でそれをテストしていないとして、あなたは、おそらく私がjsfiddleにこれをコピー＆ペーストした場合、それは行動を再作成します...擬似コードとして;-)