将图像拖到画布上

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

您可能应该将其视为伪代码，因为我还没有以任何方式测试它......;-)