호 그리기

호(Arc)

위키에는 다음과 같이 설명하고 있다.

"호는 원의 둘레 또는 닫혀 있는 곡선"

 

아래 이미지로 설명하자면

원의 둘레인 흰색 선도 호이고,

0도 ~ 180도까지 그리고 있는 반원의 녹색 선도 호이다.

 

호 그리기

Canvas에 호를 그릴려면 arc() 메서드를 사용한다.

Pixi.js나 Create.js 같은 그래픽 라이브러리를 사용한다면

약간의 차이는 있을수 있지만 거의 동일하다.

여기서는 Pixi.js 기준으로 설명한다.

/**
 *@number   cx            중점의 x좌표값
  @number   cy            중점의 y좌표값
  @number   radius        반지름
  @number   startAngle    호가 시작되는 각도
  @number   endAngle      호가 끝나는 각도
  @boolean  anticlockwise 호가 그려지는 방향
 */
arc(cx: number, cy: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean | undefined)

 

주석 설명을 보면 알겠지만 사용법은 간단하다.

화면의 중점에서 반지름 80픽셀을 가지면서

0도에서 시작하여 90도로 끝나는 호를 그린다면

아래 처럼 작성하면 된다.

  // 호 그리기
  drawArc() {
    const gpArc = new PIXI.Graphics();

    //시작 각도
    const stAngle = this.degreesToRadians(0);
    // 종료 각도
    const edAngle = this.degreesToRadians(90);

    // 캔버스 크기 600x600 의 중점에서 반지름 80의 호를 그린다.
    gpArc.lineStyle(4, 0x00ff00);
    gpArc.arc(300, 300, 80, stAngle, edAngle);
    this.addChild(gpArc);
  }

 

마지막 파라미터(anticlockwis)는 생략하고 있는데,

해당값은 반시계 방향 여부이며 디폴트 값은 false 이다.

 

만약 해당값을 true로 넘겨주면

시작 각도에서 종료 각도까지

반시계 방향으로 호를 그려준다.

 gpArc.arc(300, 300, 80, stAngle, edAngle, true);

 

호는 원의 일부 각도를 가지고 있고

시작, 종료 각도와 그리는 방향에 따라서

내각 또는 외각으로 그려지므로 주의해야 한다.

 

예시로 아래 코드는 동일한 모양의 호를 그려준다.

경우에 따라서 시작각과 종료각을 바꿔주는게 맞을수도 있고,

그려지는 방향을 바꿔주는게 맞을 수도 있다.

호가 그려지는 이러한 프로세스를 정확히 이해하자.

gpArc.arc(300, 300, 80, stAngle, edAngle, true);
gpArc.arc(300, 300, 80, edAngle, stAngle);