TS-LOG

프로그래밍/그래픽

부채꼴 그리기

부채꼴(circular sector)코드로 도형을 그리게 된다면 많이 그리게 되는도형중 하나가 부채꼴이다.부채꼴은 원형 차트, 로딩 UI 등 많은 곳에서 사용된다. 호(arc)를 그릴 수 있다면 부채꼴을 그리는건크게 어렵지 않다. 부채꼴 그리기원이나 사각형은 전용 드로잉 메서드가 제공되지만그 외의 도형은 포인트끼리 연결해서 구현한다.순서는 다음과 같다.호를 그리는 중점으로 포인트 이동호 그리기중점으로 포인트 연결Path 닫기 // 부채꼴 그리기 draw() { const gpArc = new PIXI.Graphics(); //시작 각도 const stAngle = this.degreesToRadians(0); // 종료 각도 const edAngle = this.degree..

프로그래밍/그래픽

각도계

프로그래밍의 각도계프로그래밍에서 각도는 3시를 0도로 하여 오른쪽 방향으로 증가한다. 더 설명을 하자면...각도가 증가하면 시계 방향으로 각이 생성되고감소하면 반시계 방향으로 각이 생성된다. 호를 그려서 확인해 보자.호는 시작 각도에서 끝나는 각으로 시계방향으로 그리도록 한다.그래픽 라이브러리는 Pixi.js를 사용했다.0도에서 시작해서 30도로 호를 그리면 아래와 같이 그려진다. // 도를 라디안으로 변환 degreesToRadians($degrees) { const radians = ($degrees * Math.PI) / 180; console.log(radians); return radians; } // 호 그리기 drawArc() { const gpArc = new..