HTML5畫布中的可拖動和可調整大小元素

Question

是否可以使HTML5 Canvas元素內的元素可拖動和可調整大小。有沒有什麼辦法讓下面的代碼動態圖像可移動：

var ctx, imgArray; 

function initAll() { 
    ctx = document.getElementById("canvas").getContext("2d"); 
    imgArray = ["http://i46.tinypic.com/nqe1dt.jpg", 
        "http://i50.tinypic.com/i21phi.jpg", 
        "http://i49.tinypic.com/1zmfcrq.jpg", 
        "http://i50.tinypic.com/v8g6mo.jpg", 
        "http://i49.tinypic.com/21kh7ah.jpg"]; 
    drawCanvas(); 
    document.getElementById("checkgroup").onchange = drawCanvas; 
} 

function drawCanvas() { 
    ctx.clearRect(0, 0, 600, 400); 
    for(var i=0; i < imgArray.length; ++i) { 
     var img = new Image(); 
     img.posX = (i < 3) ? i*200 : (i-2.5)*200; 
     img.posY = (i < 3) ? 0 : 200; 
     img.src = imgArray[i]; 
     img.onload = function() { 
     ctx.drawImage(this, this.posX, this.posY, 150, 150); 
     } 
    } 
} 
window.onload = initAll; 

該項目在JSBin發現：http://jsbin.com/welcome/7209/edit

Answer 1

使用KineticJS提供畫布形狀對象的支持。

KineticJS將提供其形狀的鼠標事件，從而可以更輕鬆地實現拖放式功能：

http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-tutorial/