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畫布效果

回答

相關問題