'graphics API'에 해당되는 글 4건

  1. 2008.07.30 색채우기
  2. 2008.07.30 원그리기
  3. 2008.07.30 사각형 그리기
  4. 2008.07.30 선그리기

앞서 lineTo나 drawRect , drawCircle...메서드등을 통해 그림을 그리게 되었다. 이제 그려놓은 객체에 색을 채워야 하는데 마찬가지로 Graphics클래스에서 다음의 메서드를 제공한다.

beginFill 
-  단색을 채우는 메서드로 채울 색값과 투명도를 설정하는 2개의 파라미터가 필요하다.

* 매개변수
color:uint — 채우기 색상(0xRRGGBB)입니다.
alpha:Number (default = 1.0) — 채우기의 알파 값(0.0 ~ 1.0)입니다. 

beginGradientFill
- 그라디언트 색을 채우는 8개의 파라미터가 있고 설정값은 그라디언트 속성을 참고하면 된다.

beginBitmapFill
- 외부에서 받은 이미지나 데이터를 bitmapData를 통해서 채우게 되며 4개의 파라미터가 있다.

* 매개변수
 bitmap:BitmapData — 표시할 비트를 포함하는 투명 또는 불투명 비트맵 이미지입니다. 
 
 matrix:Matrix (default = null) — 비트맵의 변형을 정의하는 데 사용할 수 있는 행렬 객체(flash.geom.Matrix 클래스)입니다.
예를 들어, 다음 행렬을 사용하여 비트맵을 45도(pi/4 라디안) 회전할 수 있습니다.
  matrix = new flash.geom.Matrix();
  matrix.rotate(Math.PI/4);
  
 
 repeat:Boolean (default = true) — true이면 비트맵 이미지가 반복되어 바둑판식 패턴을 이루고, 값이 false이면 비트맵 이미지가 반복되지 않고 해당 비트맵을 넘는 채우기 영역에 비트맵의 가장자리가 사용됩니다.
예를 들어, 다음과 같은 20 x 20픽셀의 바둑판 모양 비트맵을 생각해 볼 수 있습니다.

사용자 삽입 이미지

 

다음 예제와 같이 repeat가 true로 설정된 경우에는 비트맵 채우기가 비트맵을 반복합니다.

사용자 삽입 이미지

 




repeat가 false로 설정된 경우에는 비트맵 채우기가 비트맵 바깥쪽의 채우기 영역에 대해 가장자리 픽셀을 사용합니다.

사용자 삽입 이미지

 
 

 

smooth:Boolean (default = false) — false이면 확대된 비트맵 이미지가 최단입점 알고리즘을 사용하여 렌더링되며 픽셀화되어 나타납니다. true이면 확대된 비트맵 이미지가 쌍선형 알고리즘을 사용하여 렌더링됩니다. 일반적으로 최단입점 알고리즘을 사용한 렌더링이 더 빠릅니다.  

마지막으로 이러한 채우기메서드를 사용하였으면 반드시 endFill()로 마무리를 지어야 채우기가 완성된다.
 

Posted by 버터백통
원을 그리는 방법은 Graphics에 drawCircle()와 drawEllipse()를 사용한다.
 
drawCircle는 위치와 반지름을 설정하도록 3개의 매개변수를 설정하여 정원을 그리는 매서드이며, drawEllipse는 위치와 폭,높이를 설정하여 타원을 그릴수 있도록 한다.
이 둘은 중심점에 차이가 있다.
사용자 삽입 이미지
drawCircle를 사용하여 그린 원은 가운데를 중심으로하고 drawEllipse를 사용하여 그린것은 좌측 상단을 중심으로한다.
Posted by 버터백통

사각형을 그리고자 한다면 Graphics에 drawRect()와 모서리가 둥근 사각형인  drawRoundRect()와 drawRoundRectComplex()메서드를 사용하여 그릴 수 있다.

drawRect는 일반적인 사각박스로 위치와 크기를 설정하는 4개의 매개변수를 필요로한다.

drawRoundRect는 모서리가 둥근 사각박스로 위치와 크기변수 외에 둥근정도를 설정하는 ellipseWidth와 ellipseHeight가있다. 이 두개의 값은 같은 타원을 4개의 모서리에 일괄 적용하는 원의 지름 값으로 사용한다.

사용자 삽입 이미지


drawRoundRectComplex는 모서리가 둥근 정도를 보다 구체적으로 설정하는데 drawRect와 같이 위치와 크기를 설정하는 값 외에 각 모서리에 사용할 원의 지름을 설정할 수 있도록 4개의 원을 따로 그릴 수 있는 값이 추가 되어있다. 이때의 값은 drawRoundRect와 달리 원의 반지름을 설정하게 된다.
사용자 삽입 이미지



 


 

Posted by 버터백통

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 버터백통