Question

我想做一个策略/管理游戏。我希望用户能够单击背景来移动内容。（全部内容无法在屏幕上显示，因为它应该更大）这是一个常见的功能，但我无法弄清楚如何做到这一点。这有什么东西可以内置吗？任何图书馆可能吗？

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

/// we start off with setting sizes
setSize();

/// load background, then start
img = new Image();
img.onload = update;
img.src = 'http://www.mytripolog.com/wp-content/uploads/2011/05/large-size-world-map.jpg';

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;
}

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;
    }
}

/// window resize so recalc canvas and rect
window.onresize = setSize;

/// 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]);
}

/// correct mouse position by making it relative to canvas
function getPos(e) {
    var r = canvas.getBoundingClientRect(),
        x = e.clientX - r.left,
        y = e.clientY - r.top;
    return [x, y];
}

/// 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();
}

<canvas id="canvas"></canvas>

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

使用此css隐藏滚动条

   html, body {margin:0;padding:0;overflow:hidden}

点击并拖动整个背景（类似游戏）

1 个答案: