HTML5畫布繪製拖放

Question

我已經例如用於HTML 5圓如下

http://i.stack.imgur.com/SVPO9.jpg

在這裏描繪爲這個繪圖腳本（HTML5和jQuery）

http://jsfiddle.net/eGjak/275/

$.each(circles, function() { 
    drawCircle(this); 
    drawLine(mainCircle, this); 
}); 

我需要升級它才能拖放（用戶可以用線拖動兒童圈繞主要圓圈）

我該如何使用html5，css3，jQuery來做到這一點？

Answer 1

http://jsfiddle.net/eGjak/503/

你必須找到在畫布上的局部x和y，然後計算距離（認爲畢達哥拉斯定理，aSquared + BSQUARE = cSquared），看看如果距離小於的半徑圓（又名鼠標的圓圈內）

的代碼之後添加此代碼，您目前擁有

var focused_circle, lastX, lastY ; 

function test_distance(n, test_circle){ //see if the mouse is clicking circles 
    var dx = lastX - test_circle.x, 
    dy = lastY - test_circle.y; 

    //see if the distance between the click is less than radius 
    if(dx * dx + dy * dy < test_circle.r * test_circle.r ){ 
     focused_circle = n; 
     $(document).bind('mousemove.move_circle' , drag_circle); 
     $(document).bind('mouseup.move_circle' , clear_bindings); 
     return false; // in jquery each, this is like break; stops checking future circles 
    } 
} 
$('#cv').mousedown(function(e){ 
    lastX = e.pageX - $(this).offset().left; 
    lastY = e.pageY - $(this).offset().top; 
    $.each(circles, test_distance); 
}); 

function drag_circle(e){ 
    var newX = e.pageX - $('#cv').offset().left, 
     newY = e.pageY - $('#cv').offset().top; 

    //set new values 
    circles[ focused_circle ].x += newX - lastX; 
    circles[ focused_circle ].y += newY - lastY; 

    //remember these for next time 
    lastX = newX, lastY = newY; 

    //clear canvas and redraw everything 
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); 
    drawCircle(mainCircle); 
    $.each(circles, function() { 
     drawCircle(this); 
     drawLine(mainCircle, this); 
    }); 

} 

function clear_bindings(e){ // mouse up event, clear the moving and mouseup bindings 
    $(document).unbind('mousemove.move_circle mouseup.move_circle'); 
    focused_circle=undefined; 
} 

還有其他的方法可以做到這一點，辦法救速度，雖然這應該做的伎倆。