부채꼴 그리기

부채꼴(circular sector)

코드로 도형을 그리게 된다면 많이 그리게 되는

도형중 하나가 부채꼴이다.

부채꼴은 원형 차트, 로딩 UI 등 많은 곳에서 사용된다.

 

호(arc)를 그릴 수 있다면 부채꼴을 그리는건

크게 어렵지 않다.

 

부채꼴 그리기

원이나 사각형은 전용 드로잉 메서드가 제공되지만

그 외의 도형은 포인트끼리 연결해서 구현한다.

순서는 다음과 같다.

1. 호를 그리는 중점으로 포인트 이동
2. 호 그리기
3. 중점으로 포인트 연결
4. Path 닫기

  // 부채꼴 그리기
  draw() {
    const gpArc = new PIXI.Graphics();

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

    // 캔버스 크기 600x600 의 중점에서 반지름 80의 호를 그린다.
    gpArc.lineStyle(4, 0x00ff00);
    gpArc.moveTo(300, 300); // 호의 중점으로 이동
    gpArc.arc(300, 300, 80, stAngle, edAngle); // 호 그리기
    gpArc.lineTo(300, 300); // 호의 중점으로 연결
    gpArc.closePath(); // 패스 종료

    this.addChild(gpArc);
  }

 

결과