Question

我想要想象一个在HTML5画布中绘制的巨大图表。如下图所示，让我们想象一下世界地图，用“体面”细节同时将它们全部可视化是不可能的。因此，在我的画布中，我希望能够使用鼠标平移它以查看其他不可见的国家。

有没有人知道如何在HTML5画布中实现这种平移？另一个功能是放大和缩小。

canvas diagram 我已经看过一些例子，但我无法让它们工作，也没有找到解决我的问题。

提前致谢！

Answer 1

要实现具有窥视孔的平移功能，只需两次绘制操作，一次完整，一次剪切。

To get this result 您可以执行以下操作（ see full code here ）：

设置变量：

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

对于缩放画布我相信这已经在这篇文章中得到了解答 - 你应该能够将其与这里给出的答案合并：
Zoom Canvas to Mouse Cursor

Answer 2

要做你所要求的事情，只需要有2幅画布，每幅画都有不同的z-index。一个画布比另一个小，并且位置设置为鼠标的x和y。

然后，您只需在小画布上显示基于小画布上x和y相对于较大画布的位置的正确图像。

然而，你的问题是要求一个特定的解决方案，除非有人已经完成并且他们愿意转储他们的代码，否则你很难得到完整的答案。我希望它顺利。

使用背景图像移动HTML5 Canvas

2 个答案: