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/

당신은 다음 (피타고라스의 정리, aSquared + BSQUARE = ​​cSquared 생각) 거리를 계산하고, 거리의 반경보다 작은 경우를 참조하십시오 캔버스의 로컬 x와 y를 찾을 수있다 이 트릭을해야하지만 원, 현재 속도에 저장하기 위해 다른이 작업을 수행 할 수있는 방법과 방법이 있습니다

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; 
} 

이

코드 후이 코드를 추가 (일명 마우스를 원 안에).