使用背景圖像移動HTML5 Canvas

Question

我想要想象一個在HTML5畫布中繪制的巨大圖表。 如下圖所示，讓我們想象一下世界地圖，用“體面”細節同時將它們全部可視化是不可能的。 因此，在我的畫布中，我希望能夠使用鼠標平移它以查看其他不可見的國家。

有誰知道如何在HTML5畫布中實現這種平移？ 另一個功能是放大和縮小。

我已經看過幾個例子，但是我無法讓它們工作，也不能解決我的問題。

提前致謝！

Answer 1

為了實現具有窺視孔的平移功能，它只需要兩個繪制操作，一個完整和一個剪切。

要獲得此結果，您可以執行以下操作（ 請參閱此處的完整代碼 ）：

設置變量：

var ctx = canvas.getContext('2d'),

    ix = 0, iy = 0,           /// image position
    offsetX = 0, offsetY = 0, /// current offsets
    deltaX, deltaY,           /// deltas from mouse down
    mouseDown = false,        /// in mouse drag
    img = null,               /// background
    rect,                     /// rect position
    rectW = 200, rectH = 150; /// size of highlight area

根據窗口大小設置用於設置大小的主要功能（包括調整大小）：

/// calc canvas w/h in relation to window as well as
/// setting rectangle in center with the pre-defined
/// width and height
function setSize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    rect = [canvas.width * 0.5 - rectW * 0.5,
            canvas.height * 0.5 - rectH * 0.5,
            rectW, rectH]
    update();
}

/// window resize so recalc canvas and rect
window.onresize = setSize;

其中的主要功能是繪圖功能。 這里我們在鼠標移動計算的位置上繪制圖像（參見下一節）。

• 獲得褪色外觀的第一步是將alpha設置為約0.2（您還可以在頂部繪制透明矩形，但效率更高）。
• 然后繪制完整的圖像。
• 重置alpha
• 使用具有校正的源偏移的削波來繪制窺視孔。

-

/// main draw
function update() {
    if (img === null) return;

    /// limit x/y as drawImage cannot draw with negative
    /// offsets for clipping
    if (ix + offsetX > rect[0]) ix = rect[0] - offsetX;
    if (iy + offsetY > rect[1]) iy = rect[1] - offsetY;

    /// clear background to clear off garbage
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    /// make everything transparent
    ctx.globalAlpha = 0.2;

    /// draw complete background
    ctx.drawImage(img, ix + offsetX, iy + offsetY);

    /// reset alpha as we need opacity for next draw
    ctx.globalAlpha = 1;

    /// draw a clipped version of the background and
    /// adjust for offset and image position
    ctx.drawImage(img, -ix - offsetX + rect[0],  /// sx
                       -iy - offsetY + rect[1],  /// sy
                       rect[2], rect[3],         /// sw/h

                       /// destination
                       rect[0], rect[1], rect[2], rect[3]);

    /// make a nice sharp border by offsetting it half pixel
    ctx.strokeRect(rect[0] + 0.5, rect[1] + 0.5, rect[2], rect[3]);
}

現在這是處理鼠標按下，移動和向上並計算偏移量的問題 -

在鼠標按下時，我們存儲當前鼠標位置，我們將用它來計算鼠標移動時的增量：

canvas.onmousedown = function(e) {

    /// don't do anything until we have an image
    if (img === null) return;

    /// correct mouse pos
    var coords = getPos(e),
        x = coords[0],
        y = coords[1];

    /// store current position to calc deltas
    deltaX = x;
    deltaY = y;

    /// here we go..
    mouseDown = true;
}

在這里，我們使用增量來避免圖像跳躍將角落設置為鼠標位置。 增量作為偏移量傳輸到update功能：

canvas.onmousemove = function(e) {

    /// in a drag?
    if (mouseDown === true) {

        var coords = getPos(e),
            x = coords[0],
            y = coords[1];

        /// offset = current - original position
        offsetX = x - deltaX;
        offsetY = y - deltaY; 

        /// redraw what we have so far
        update();
    }
}

最后，在鼠標上移動時，我們將偏移作為圖像位置的永久部分：

document.onmouseup = function(e) {

    /// was in a drag?
    if (mouseDown === true) {
        /// not any more!!!
        mouseDown = false;

        /// make image pos. permanent
        ix += offsetX;
        iy += offsetY;

        /// so we need to reset offsets as well
        offsetX = offsetY = 0;
    }
}

對於縮放畫布我相信這已經在這篇文章中得到了解答 - 你應該能夠將其與這里給出的答案合並：
將畫布縮放到鼠標光標

Answer 2

為了做你所要求的事情，只需要有2幅畫布，每幅畫都有不同的z-index。 一個畫布比另一個小，並且位置設置為鼠標的x和y。

然后，您只需在小畫布上顯示基於小畫布上x和y相對於較大畫布的位置的正確圖像。

然而，你的問題是要求一個特定的解決方案，除非有人做了，他們願意只是轉儲他們的代碼，你會發現很難得到一個完整的答案。 我希望它順利。