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/