Перетащите изображение на холст - PullRequest
Новая
       9

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

0 голосов
/ 04 января 2012

Я пытаюсь перетащить изображение вокруг элемента canvas.Хотя у меня была работа с перетаскиванием, она не работает, как мне бы хотелось.

По сути, изображение всегда больше, чем элемент canvas, но левая сторона изображения в пределах canvas не можетдальше вправо, чем на левой стороне холста, так же правой стороне не разрешается идти «правее», чем на правой стороне холста.По сути, изображение ограничено, чтобы не показывать пробел пространство холста.

Проблема с перетаскиванием состоит в том, что всякий раз, когда я начинаю перетаскивать изображение, «всплывает» обратно, чтобы вести себя как 00 от местоположения мыши, тогда как я на самом деле хочу переместить изображение из текущей позиции. 

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

Это то, что у меня есть сейчас, где я как бы получаю эффект параллелизма.

1 Ответ

0 голосов
/ 05 января 2012

Вам потребуется записать текущее смещение изображения при его перемещении и использовать его (в дополнение к смещению от верхнего левого угла холста) при каждом 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));
};

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

...