Pannable画布效果

这实际上更像是一个问题，但我不知道从哪一个开始。我工作的网站在此刻，我们已经列举了以下网站作为参考：Pannable画布效果

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

正如你所看到的，都具有相同的效果，让你平移“画布“在视口内。我搜索高低，但无法找到任何文件或插件这样的事情。我发现最近的，但它仍然不允许你与mouseMove平移是这样的：http://jmpressjs.github.io/jmpress.js/#/home

就像我说的那样，它离我想要达到的距离还很远。任何想法，想法，建议或插件人们可能会知道会大受赞赏！

来源

2016-02-18 user1374796

鼠标

潘画布您可以平移与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假随后致电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事件来控制在这些情况下发生的事情。

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

来源

2016-02-18 21:00:49 Blindman67

Pannable画布效果

回答

相关问题