javascript - 平移 Canvas 效果

确实，这更多是一个问题，但是我根本不知道从哪里开始。我目前正在一个网站上，我们引用了以下网站作为参考：

http://exhibitions.guggenheim.org/storylines/
http://www.apple.com/uk/start-something-new/

如您所见，两者具有相同的效果，并允许您在视口内平移“画布”。我已经搜寻了很多东西，但是找不到任何有关此类事情的文档或插件。我找到的最接近但仍然不允许您使用mouseMove平移的是：http://jmpressjs.github.io/jmpress.js/#/home

就像我说的那样，它与我要达到的目标仍然相去甚远。人们可能知道的任何想法，想法，建议或插件，将不胜感激！

最佳答案

用鼠标平移画布

您可以使用ctx.translate(x,y)函数平移画布，但是此函数是相对的，如果您不了解矩阵数学，可能会很难使用。或使用ctx.setTransform(1,0,0,1,x,y)，其中最后两个数字设置画布上的原点位置。此功能是绝对的，因此您无需跟踪当前的转换矩阵。原点是坐标0,0所在的位置。

使用setTransform

因此，如果将原点设置为

ctx.setTransform(1,0,0,1,canvas.width/2,canvas.height/2)

然后在0,0处画一个圆

ctx.beginPath();
ctx.arc(0,0,100,0,Math.PI*2);
ctx.fill();

它会出现在画布中心，因为它是新原点所在的位置。

实施中

现在，您只需要使用鼠标平移即可。

首先创建var以跟踪原点位置

var originX = 0;  // default to the top left of the canvas.
var originY = 0;

根据您渲染的方式，以下内容将标记何时更新画布变换

var panOnMouse = true;  // if you are using requestAnimationFrame
                        // or another realtime rendering method this should
                        // be false

然后创建一个辅助函数来设置原点

function setCanvasOrigin(ctx){
    ctx.setTransform(1,0,0,1,originX,originY);
}

鼠标

现在，鼠标事件侦听器并跟踪鼠标移动。首先是一个对象，以保存鼠标信息。

var mouse = {
    x : 0,  // holds the current mouse location
    y : 0,
    lastX : null,  // holds the previous mouse location for use when mouse down
    lastY : null,  // as this is unknown start with null
    buttonDown : false, // true if mouse button down;
    panButtonID : 1,  // the id of the pan button 1 left 2 middle 3 right
}

然后创建一个事件侦听器以获取mousemove，mousedown和mouseup

function mouseEvent(event){
    if(buttonDown){  // if mouse button is down save the last mouse pos;
        mouse.lastX = mouse.x;
        mouse.lastY = mouse.y;
    }
    mouse.x = event.offsetX;
    mouse.y = event.offsetY;
    if (mouse.x === undefined) {  // for browsers that do not support offset
       mouse.x = event.clientX;
       mouse.y = event.clientY;
    }
    // now handle the mouse down
    if (event.type === "mousedown" && event.which === mouse.panButtonID ) {
        mouse.buttonDown = true; // flag the pan button is down;
        mouse.lastX = mouse.x;   // set the last pos to current
        mouse.lastY = mouse.y;
    }

    // now do the pan is the mouse is down
    //
    if(mouse.buttonDown){
        originX += mouse.x - mouse.lastX; // add the mouse movement to origin
        originY += mouse.y - mouse.lastY;
        if(panOnMouse ){
            setCanvasOrigin(ctx);
        }
    }
    // handle the mouse up only for the pan button
    if (event.type === "mouseup" && event.which === mouse.panButtonID) {
        mouse.buttonDown = false;
    }
}

如果panOnMouse为false，则在主渲染循环开始时调用setCanvasOrigin。

现在所需要做的就是将鼠标事件侦听器添加到画布。

canvas.addEventListener("mousemove",mouseEvent);
canvas.addEventListener("mousedown",mouseEvent);
canvas.addEventListener("mouseup",mouseEvent);

最后的笔记

因此，现在当用户使用正确的鼠标按钮单击并拖动时，画布原点将被拖动到所需的任何位置。它甚至可以不在屏幕上。像平时一样画所有东西。

要重置锅，只需将原点设置为零

originX = 0;  // default to the top left of the canvas.
originY = 0;
setCanvasOrigin(ctx);  // set the transform

由于原点已移动，因此鼠标在画布上的位置与平移的画布坐标不匹配。要获得鼠标在平移画布上的位置，只需从鼠标中减去原点即可。您可以将其添加到鼠标事件功能的末尾

mouse.realX = mouse.x - originX;  // get the mouse position relative to the
mouse.realY = mouse.y - originY;  // panned origin

如果用户在平移时从画布上移开，则可能会丢失鼠标上移事件并按下按钮。您可以监听mouseout和mouseover事件以控制在这些情况下发生的情况。

这就是如何用鼠标平移画布。

关于javascript - 平移 Canvas 效果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35475468/