'직선그리기'에 해당되는 글 1건

  1. 2008.07.30 선그리기

Graphics클래스에서 제공하는 선드로잉은 직선과 커브선을 제공하고 있다. 점선은 수학적 계산을 구하여 표현해야한다. 그리고 Graphics를 내장한 디스플레이 객체에서 graphics 메서드로 작업을 해야한다.

[ 직선그리기 ]
우선 드로잉이 가능한 객체에 직접 선을 그릴수 있도록 lineStyle()을 설정한다. 그리고 실제 좌표에 의해 선을 그리는 메서드인 lineTo(x,y)를 통해 직선을 그릴수 있다. 선상의 좌표외에 다른 좌표점부터 시작하는 선을 새로 그리려면 moveTo(x,y)를 통해 새로 선을 그릴 포인트로 이동해야 한다.



1) 사용할 선을 설정
this.graphics.lineStyle(1,0xFF0000)
2) 선을 그릴 시작점 설정
this.graphics.moveTo(100,100)
3) 시작점에서 부터 이어질 끝점 설정
this.graphics.lineTo(400,100)
4) 종료된 선의 끝점에서 이어질 끝점 설정
this.graphics.lineTo(400,200)
5) 새로 그릴 시작점 설정
this.graphics.moveTo(100,300)
6) 시작점에서 이어지 선의 끝점 설정
this.graphics.lineTo(400,300)


[ 커브선 그리기 ]
커브선은 일러스트의 베져라인을 생각하면 된다. 사용방법은 직선그리기와 같이 lineStyle()를 설정한 후에 curveTo( controlX , controlY, anchorX , anchorY )메서드로 커브선을 그리게 된다. curveTo에는 4개의 파라미터가 필요한데 앞에 2개의 값은 controlX와 controlY로서 제어점을 설정하는 값이고 뒤에 2개는 시작점부터 이어질 끝점의 좌표를 표현한다. 제어점을 제외하면 lineTo와 같은 역할을 한다.

* 제어점
제어점은 두점사이 이어진 선이 거쳐가야하는 점을 의미한다. 정확하게는 선에 힘을 가하여 자신의 좌표로 끌어당기는 중력과도 같은 역할을 하는데 선이 반드시 그점까지 미치지는 않는다. 우주에 블랙홀이 지나가는 우주선을 당겼을 때 그 우주선의 궤도는 블랙홀 쪽으로 이끌리다가 다시 자신의 궤도로 돌아오는 것 처럼 궤적을 이루는 커브선이라고 생각하면 조금 쉬울지 모르겠다.

사용자 삽입 이미지


















위와 같이 작용하는 제어점은 시작점은 0,0에서 끝점 200,200인 선이 있을 때 제어점의 위치를 0,200인 빨간점으로 설정한다. 반대로 제어점을 200,0으로 설정하였다면 위쪽으로 굽은 곡선이 만들어 질 것이다.


[ 점선 그리기 ]
점선은 lineTo나 curveTo등을 사용하여 작은 라인을 그리고 moveTo를 통하여 시작점을 일정한 간격대로 벌려나가야 한다.



 

Posted by 버터백통