最簡潔的拖放代碼在Javascript畫布

我正在尋找最快最輕鬆的方式來拖放形狀和精靈在JS畫布上的遊戲開發目的。最簡潔的拖放代碼在Javascript畫布

我已經開始通過使用當前鼠標位置和圓圈的起源進行距離檢查。它可以工作，但是當它們重疊時，我們會遇到問題，並且我不知道在每個「框架」上測試多個精靈和其他形狀時它會如何工作。

任何意見或更好的方法指針表示讚賞！

我寧願不使用像jQuery這樣的庫，因爲我要求純粹的速度和輕量級，當然要學習實際的方法！這裏是我在哪裏：

//add the canvas listeners and functions 

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

function mousemove(e){ 
    mouseX = e.layerX - canvas.offsetLeft; 
    mouseY = e.layerY - canvas.offsetTop; 

//for each circle stored in my array of Circle objects, is my mouse within its'   
//bounds? If so, set the circles' (X,Y) to my mouse's (X,Y) 

    for(i=0;i<circArray.length;i++){ 
     dx = mouseX - circArray[i].x; 
     dy = mouseY - circArray[i].y; 
     dist = Math.sqrt((dx*dx) + (dy*dy)); 
     if(draggable && dist < circArray[i].r){   
      circArray[i].x = mouseX; 
      circArray[i].y = mouseY; 
     } 
    } 
} 

function mousedown(){ 
     draggable = true; 
} 

function mouseup(){ 
     draggable = false; 
}

來源

2011-12-16 Verne

你在考慮jQuery UI可拖動（http://jqueryui.com/demos/draggable/）。即使你不使用jQuery，我也會強烈建議檢出一個未經版本化的版本並查看它們的功能。開發人員已經明確地考慮了其中的一些性能問題。由於自由許可，您可能會刪除一小部分代碼庫。 – buley 2011-12-16 00:35:39

你可能想看看[fabric.js]（https://github.com/kangax/fabric.js）。這是一個演示：http://kangax.github.com/fabric.js/stickman/ – 2011-12-16 01:18:18

這是我用來拖動單個項目的設置。我不知道你是否想拖動多個東西，這只是一個小小的修改。換句話說：在mousedown中，在保留順序中搜索一個命中對象時，你畫出了對象（所以最上面的項目首先被命中），存儲這個命中項目，然後mousedrag只是將座標/三角洲連接到該項目。

//start with only the mousedown event attached 
canvas.addEventListener("mousedown",mousedown); 

//and some vars to track the dragged item 
var dragIdx = -1; 
var dragOffsetX, dragOffsetY; 

function mousedown(e){ 
    //...calc coords into mouseX, mouseY 
    for(i=circArray.length; i>=0; i--){ //loop in reverse draw order 
     dx = mouseX - circArray[i].x; 
     dy = mouseY - circArray[i].y; 
     if (Math.sqrt((dx*dx) + (dy*dy)) < circArray[i].r) {   
      //we've hit an item 
      dragIdx = i; //store the item being dragged 
      dragOffsetX = dx; //store offsets so item doesn't 'jump' 
      dragOffsetY = dy; 
      canvas.addEventListener("mousemove",mousemove); //start dragging 
      canvas.addEventListener("mouseup",mouseup); 
      return; 
     } 
    } 
} 

function mousemove(e) { 
    //...calc coords 
    circArray[dragIdx].x = mouseX + dragOffsetX; //drag your item 
    circArray[dragIdx].y = mouseY + dragOffsetY; 
    //...repaint(); 
} 

function mouseup(e) { 
    dragIdx = -1; //reset for next mousedown 
    canvas.removeListener(.... //remove the move/up events when done 
}

我的js現在很生鏽，但這應該會給出這個想法。 dragOffsetX/Y用於防止點擊時項目跳轉到光標。您也可以只存儲舊的鼠標座標併爲您的項目添加一個增量。

另外，不是將索引存儲到拖動項目中，而是可以存儲對其的引用，也可以是用於拖動多個項目的引用數組。而不是直接操縱你的物品，你可以把一個mousedown /拖/上界面，讓他們處理它。這可以使其他類型的項目更容易混合。

我不確定的另一件事是如何計算座標。我做了一些不同的事情，但它是舊的代碼，我猜你的方式措施也是如此。 -t

來源

2011-12-29 09:13:17 Trochoid

最簡潔的拖放代碼在Javascript畫布

回答

相關問題