Question

这真的是一个问题，但我不知道从哪个开始。我目前正在网站上工作，我们引用了以下网站作为参考：

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

如您所见，两者都具有相同的效果，并允许您在视口中平移“画布”。我搜索高低，但找不到任何文档或插件这样的事情。我找到的最接近但仍然不允许您使用mouseMove平移的是：http://jmpressjs.github.io/jmpress.js/#/home

就像我说的那样，它仍然远离我想要实现的目标。任何人们可能知道的想法，想法，建议或插件都会受到大力赞赏！

Answer 1

使用鼠标平移画布

您可以使用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事件来控制在这些情况下发生的事情。

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

可掠过的画布效果

1 个答案: