HTML5 서클 방지 캔버스 밖으로 끌어 방지 충돌

Question

나는 HTML 5 원 드래그를 가지고 예를 드롭,

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

내가 일

1. 를 따르십시오 캔버스의 외부 드래그 서클을 방지

2. 원 위에 선이 표시되지 않습니다.

3. 다른 원 내가 거기에 몇 가지 코드하지만 행운 재생

을 통해 드래그를 방지 할 수 있습니다. 아무도 날 논리, 도움이되는 자원으로 도와 주실 수 있습니까?

Answer 1

1. 이것은 쉬운 것입니다. 단순히 x가 화면의 왼쪽 또는 오른쪽을 떠나지 않고 y가 화면의 상단 또는 하단을 떠나지 않음을 확인하는 것입니다.

   if (x> 0 || x < (canvas.width - circle.width) & & Y> 0 || Y < (canvas.height - circle.height)) 다음은 선/원의 충돌 체크를 할 필요가 {

   ...update... 
   

   }

2. . See here.

3. 이 경우 원/원형 충돌 감지가 필요합니다. 그렇지 않은 경우는 false 충돌하면 아래에 true를 돌려줍니다 :

   this.isIntersecting = function(c1center, c1radius, c2center, c2radius) 
   { 
   
       var dX = Math.pow(c1center.x - c2center.x, 2); 
       var dY = Math.pow(c1center.y - c2center.y, 2); 
       var r2 = Math.pow(c1radius.radius() + c2radius.radius(), 2); 
       return (dX + dY <= r2); 
   } 
   

c1center 및 c2center는 X와 객체이며, y 속성 (예 : c1center = {x:0, y:0 })