환형 그리기

환형(annular sector)

부채꼴 다음으로 호를 이용해서 많이 그리는 도형은

도넛 모양, 반지 모양이라고 불리우는 환형 도형이다.

 

원형 차트에서 부채꼴이나 환형으로 표시되는 것을

많이 보았을 것이다.

 

환형 역시 호(arc)를 그릴수 있다면

약간의 응용으로 쉽게 구현할 수 있다.

 

환형 그리기

환형이 부채꼴과 다른점이 있다면

중심점과 하나의 호가 연결된 형태가 아닌

두 개의 호가 연결된다는 점이다.

그리는 순서는 다음과 같다.

 

1. 안쪽 호를 그린다.

캔버스 크기는 600 x 600 이므로 중점에서 40 만큼의 반지름의 호를 그린다.

시작 각도는 180도, 종료 각도는 320도다.

  draw() {
    const gpArc = new PIXI.Graphics();

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

    const centerX = 300;
    const centerY = 300;
    const radius0 = 40;
    const radius1 = 80;

    gpArc.lineStyle(4, 0x00ff00);
    gpArc.arc(centerX, centerY, radius0, stAngle, edAngle);
    this.addChild(gpArc);
  }

 

2. 바깥쪽에 그릴 호의 시작 위치까지 선을 긋는다.

첫 번째 호는 시계 방향으로 그려졌다.

그러므로 현 패스의 위치는 호의 320도에 있다.

 

두 번째 호는 반지름 길이 80으로 그릴것이므로

삼각함수를 이용하여 현 패스 위치에서

호의 시작 위치까지 선을 그려주면 된다.

  draw() {
    const gpArc = new PIXI.Graphics();
    //시작 각도
    const stAngle = this.degreesToRadians(180);
    // 종료 각도
    const edAngle = this.degreesToRadians(320);

    const centerX = 300;
    const centerY = 300;
    const radius0 = 40;
    const radius1 = 80;

    gpArc.lineStyle(4, 0x00ff00);
    gpArc.arc(centerX, centerY, radius0, stAngle, edAngle);

    // 다음 호 시작 좌표 계산
    const x0 = centerX + radius1 * Math.cos(edAngle);
    const y0 = centerY + radius1 * Math.sin(edAngle);

    gpArc.lineTo(x0, y0);

    this.addChild(gpArc);
  }

 

3.바깥쪽 호를 그린다.

안쪽 호는 시계 방향으로 그렸지만

바깥쪽 호는 반시계 방향으로 그려야 한다.

시작 각도와 종료 각도를 바꾸고 반시계 방향으로 true 처리 해준다.

  draw() {
    const gpArc = new PIXI.Graphics();
    //시작 각도
    const stAngle = this.degreesToRadians(180);
    // 종료 각도
    const edAngle = this.degreesToRadians(320);

    const centerX = 300;
    const centerY = 300;
    const radius0 = 40;
    const radius1 = 80;

    gpArc.lineStyle(4, 0x00ff00);
    gpArc.arc(centerX, centerY, radius0, stAngle, edAngle);

    // 다음 호 시작 좌표 계산
    const x0 = centerX + radius1 * Math.cos(edAngle);
    const y0 = centerY + radius1 * Math.sin(edAngle);

    gpArc.lineTo(x0, y0);
    gpArc.arc(centerX, centerY, radius1, edAngle, stAngle, true);

    this.addChild(gpArc);
  }

 

 

4. 안쪽 호의 시작 좌표로 선을 긋고 패스를 닫는다.

2번과 크게 다르지 않다.

패스를 닫지 않으면 도형이 완성된 것이 아니므로 꼭 닫아주자.

draw() {
    const gpArc = new PIXI.Graphics();
    //시작 각도
    const stAngle = this.degreesToRadians(180);
    // 종료 각도
    const edAngle = this.degreesToRadians(320);

    const centerX = 300;
    const centerY = 300;
    const radius0 = 40;
    const radius1 = 80;

    gpArc.lineStyle(4, 0x00ff00);
    gpArc.arc(centerX, centerY, radius0, stAngle, edAngle);

    // 다음 호 시작 좌표 계산
    const x0 = centerX + radius1 * Math.cos(edAngle);
    const y0 = centerY + radius1 * Math.sin(edAngle);

    gpArc.lineTo(x0, y0);
    gpArc.arc(centerX, centerY, radius1, edAngle, stAngle, true);

    // 안쪽 호 시작 좌표
    const x1 = centerX + radius0 * Math.cos(stAngle);
    const y1 = centerY + radius0 * Math.sin(stAngle);

    gpArc.lineTo(x1, y1);
    gpArc.closePath();

    this.addChild(gpArc);
  }

---

나는 안쪽부터 그렸지만 바깥부터 그려도 무방하다.

꼼수지만 부채꼴을 그리고 가운데 배경색과 같은 원을 그리는 것도

쉽게 환형을 표시하는 방법이 될 수 있다.