javascript - 可平移 Canvas 效果

Question

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

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

如您所见，两者具有相同的效果并允许您在视口(viewport)内平移“ Canvas ”。我到处搜索，但找不到任何文档或插件。我找到的最接近但它仍然不允许您使用 mouseMove 平移的是:http://jmpressjs.github.io/jmpress.js/#/home

不过就像我说的，它离我想要达到的目标还有很远的距离。人们可能知道的任何想法、想法、建议或插件都将不胜感激!

Answer 1

用鼠标平移 Canvas

您可以使用 ctx.translate(x,y) 函数平移 Canvas ，但此函数是相对的，如果您不了解矩阵数学，则使用起来可能会很棘手。或者使用 ctx.setTransform(1,0,0,1,x,y)，其中最后两个数字设置 Canvas 上的原点位置。这个函数是绝对的，所以你不需要跟踪当前的变换矩阵。原点是坐标 0,0 所在的位置。

使用设置转换

所以如果你将原点设置为

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

它将出现在 Canvas 的中心，因为那是新原点所在的位置。

实现

现在您只需使用鼠标进行平移。

首先创建var来追踪原点位置

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

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

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 。

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

最后的笔记

因此，现在当用户使用正确的鼠标按钮单击并拖动时， Canvas 原点将被拖动到任何需要的地方。它甚至可以在屏幕外。像往常一样画出所有内容。

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

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

因为原点移动了 Canvas 上的鼠标位置与平移的 Canvas 坐标不匹配。要获得鼠标在平移 Canvas 上的位置，只需从鼠标中减去原点。可以在鼠标事件函数的末尾加上

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

如果用户在平移时离开 Canvas ，您可能会丢失鼠标弹起事件并使按钮卡住。您可以监听 mouseout 和 mouseover 事件来控制在这些情况下发生的事情。

这就是如何用鼠标平移 Canvas 。