삼각함수와 플래시 - 3. 원의 영역으로 드래그

startDrag 라는 메서드를 이용할때 제한적인 영역속에서 드래그를 가능하게 할수 있다.
as3에서는 startDrag메서드의 두번재 인자로 RectAngle 객체를 전달하여
드래그 영역을 제한하게 되는데 문제는 RectAngle 이라는 이름에서 알수 있듯이
이 제한적인 영역은 '사각형'이다.

원형의 모양을 가지는 RectAngle 객체를 나타내기 위한 방법을 찾아보았으나 찾지못했다.
혹시 matrix 를 이용하면 될까 싶었는데 mat의 m만 생각해도 머리가 아프므로 일찌감치 패스

그렇다면 특정 원의 영역안에서만 드래그를 가능하게 할려면 어떻게 해야 할까


Step1 - startDrag가 아니라면?



startDrag의 효과를 내기위해
MOUSE_MOVE ,ENTER_FRAME ,Timer 등을 이용해서 움직이고싶은 객체의 좌표에
마우스의 좌표를 대입하는 방법이 있다.



Step 2 -영역의 내외 확인



위의 여러가지 지속적으로 반복되는 이벤트중에
마우스의 좌표가 원의 영역안이라면 드래그,
마우스의 좌표가 원의 영역밖으로 나가면 드래그중단을 시켜야 한다.
여기서 드래그란 객체의 x,y속성에 마우스좌표를 대입시키는걸 말한다.

원점이 (0.0) 이고 반지름이 100인 원이 있고 마우스가
원의 영역안인지 밖인지 알아보기 위해선 원점과 마우스와의 거리를 알아야 한다.
거리가 반지름인 100이하이면 영역안, 100이상이면 영역밖이 된다.

거리는 피타고라스의 법칙을 이용해 구할수있다.

 var xmouse:int = mouseX;
 var ymouse:int = mouseY;
 var tempx:int = xmouse-_cx;
 var tempy:int = ymouse-_cy;
 var distance:int = Math.sqrt(tempx*tempx+tempy*tempy);



Step 3 - 영역을 넘어갈 경우



마우스의 좌표와 원의 중심점의 거리가 반지름을 넘어 영역을 넘어간 경우
단순히 드래그가 중단되는게 아니라 좌표는 움직이되
영역끝자락에서 걸친상태로 움직여야 한다.

이를 구현할려면

① 원점과 마우스좌표가 만드는 각도를 구한다
② 해당각도에 해당하는 원의 영역 끝 좌표를 구한다.
③객체의 좌표에 ②에서 구한 좌표를 대입한다.

① x축에 대하여 두점을 잇는 직선의 각은 tan함수의 역함수인 atan함수를 이용한다.

atan y/x = T

Math 클래스에서 atan함수를 지원한다. 플래시버전으로 고친다면 아래와 같이 된다.
 
var tempx:int = xmouse-_cx;
var tempy:int = ymouse-_cy;
var radian:Number = Math.atan2(tempy,tempx)

② Math.atan2함수는 다행스럽게도 각도를 라디안값으로 반환한다.

각도와 원의 반지름을 알면 삼각함수와 플래시 - 1.원의 좌표 편에서
만든 함수를 통해 해당하는 좌표를 구해낼수 있다.

  var radian:Number = Math.atan2(tempy,tempx)
  var tgPoint:Point=getCirclePos(radian,영역원의반지름,영역원의반지름,_cx,_cy);

function getCirclePos(radian:Number,Radius:Number=100,hRadius:Number=100,cx:Number=0,cy:Number=0):Point {  
   var tx:Number = cx+wRadius*Math.cos(radian);
   var ty:Number = cy+hRadius*Math.sin(radian);
   return new Point(tx,ty);
}

③대입

dragInstance.x =tgPoint.x
dragInstance.y = tgPoint.y

 

import myas.utils.MathUtil;
var _cx:Number =250;
var _cy:Number =200;
var _radius:Number=100;
circle.addEventListener(MouseEvent.MOUSE_DOWN,onDragStart);

function onDragStart(e:MouseEvent):void {
     trace("마우스다운");
     stage.addEventListener(MouseEvent.MOUSE_MOVE,onMove);
     stage.addEventListener(MouseEvent.MOUSE_UP,onReleaseOut);
}
function onMove(e:MouseEvent):void {
     var xmouse:int = mouseX;
     var ymouse:int = mouseY;
     var tempx:int = xmouse-_cx;
     var tempy:int = ymouse-_cy;
     var distance:int = Math.sqrt(tempx*tempx+tempy*tempy);
     if (distance >_radius) {
          var radian:Number = Math.atan2(tempy,tempx)
          var tgPoint:Point=MathUtil.getCirclePos(radian,_radius,_radius,_cx,_cy);
          circle.x =tgPoint.x
          circle.y = tgPoint.y;
     } else {
          trace("범위안");
          circle.x = xmouse;
          circle.y = ymouse;
     }
}
function onReleaseOut(e:MouseEvent):void{    
     trace("마우스업");
     stage.removeEventListener(MouseEvent.MOUSE_MOVE,onMove);
     stage.removeEventListener(MouseEvent.MOUSE_UP,onReleaseOut);
}

큰원속의 작은 원은 큰원의 영역안에서만 드래그가 된다.