HTML5極限運動圖像轉換成畫布

canvas.onmousemove = function (e) { 
if (isDown === true) { 
    var pos = getMousePos(canvas, e); 
    var x = pos.x; 
    var y = pos.y; 

    //translate difference from now and start 
    element.translate(x - startX, y - startY); 
    drawImage(); 

    //update start positions for next loop 
    startX = x; 
    startY = y; 
}}

http://jsfiddle.net/braziel/nWyDE/HTML5極限運動圖像轉換成畫布

朋友們，我需要幫助時，放大的畫面內，以限制圖像的運動。

我把鏈接，你可以看到圖像時放大和拖動它超過了圖像的限制。

圖像必須始終保持在畫布內，永遠不會移動更多。

謝謝大家！

來源

2013-07-02 Max William Vitorino

第一步是跟蹤圖像的絕對位置。爲此，我在全球增加這樣的：

var ix=0, iy=0;

接下來，在mousemove事件，我們計算新位置和舊的區別：

var dx = x - startX; 
var dy = y - startY;

然後我們需要找到與diffence放大的圖像和畫布之間。由於畫布不知道它是縮放的（有點 - 我們使用的座標始終爲1：1），因此我們需要將其與縮放的畫布大小進行比較。由於我們及時瞭解當前的規模，我們只與一個因素相乘，減去圖像尺寸和2分的一切居中：

var diffX = (canvas.width * currentScale - image.width)/2; 
var diffY = (canvas.height * currentScale - image.height)/2;

現在我們可以檢查我們的邊界 - 如果外我們重置增量值爲0，因此沒有被翻譯：

if (ix + dx < -diffX || 
    ix + dx + image.width > canvas.width * currentScale - diffX) dx = 0; 

if (iy + dy < -diffY || 
    iy + dy + image.height > canvas.height * currentScale - diffY) dy = 0;

最後，我們更新的增量值的翻譯，我們有：

ix += dx; //image position 
iy += dy; 
element.translate(dx, dy);

由於增量將是0，如果外BOU ndaries在這種情況下，每個軸都沒有改變。如上所述，我們使用座標，就好像沒有任何東西被縮放和旋轉，因爲只有畫布項目我們必須翻譯矩陣。因此我們不需要擔心旋轉。

得到的演示在這裏：

Modified fiddle

另外 - 因爲我們遇到的風險，同時四處移動圖像具有外畫布上的光標，鼠標向上事件絕不會在畫布上註冊。因此，我們聽窗口，所以我們肯定（除了從iframe中如同小提琴時），我們可以重置移動：

window.onmouseup = function (e) { 
    isDown = false; 
}

來源

2013-07-03 05:59:12 K3N

HTML5極限運動圖像轉換成畫布

回答

相關問題