Перетащите изображение на холсте

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

Вам необходимо будет записать текущее смещение изображения по мере его перемещения и использовать его (в дополнение к смещению в верхнем левом углу холста) с каждой мульдауном, чтобы определить начальное смещение.

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

Вы, вероятно, следует рассматривать это как псевдокод как я не проверял это в любом случае ... ;-)