TS-LOG

프로그래밍/그래픽

환형 그리기

환형(annular sector)부채꼴 다음으로 호를 이용해서 많이 그리는 도형은도넛 모양, 반지 모양이라고 불리우는 환형 도형이다. 원형 차트에서 부채꼴이나 환형으로 표시되는 것을많이 보았을 것이다. 환형 역시 호(arc)를 그릴수 있다면약간의 응용으로 쉽게 구현할 수 있다. 환형 그리기환형이 부채꼴과 다른점이 있다면중심점과 하나의 호가 연결된 형태가 아닌두 개의 호가 연결된다는 점이다.그리는 순서는 다음과 같다. 1. 안쪽 호를 그린다.캔버스 크기는 600 x 600 이므로 중점에서 40 만큼의 반지름의 호를 그린다.시작 각도는 180도, 종료 각도는 320도다. draw() { const gpArc = new PIXI.Graphics(); //시작 각도 const stAngle =..

프로그래밍/그래픽

부채꼴 그리기

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

프로그래밍/그래픽

호 그리기

호(Arc)위키에는 다음과 같이 설명하고 있다."호는 원의 둘레 또는 닫혀 있는 곡선" 아래 이미지로 설명하자면원의 둘레인 흰색 선도 호이고,0도 ~ 180도까지 그리고 있는 반원의 녹색 선도 호이다. 호 그리기Canvas에 호를 그릴려면 arc() 메서드를 사용한다.Pixi.js나 Create.js 같은 그래픽 라이브러리를 사용한다면약간의 차이는 있을수 있지만 거의 동일하다.여기서는 Pixi.js 기준으로 설명한다./** *@number cx 중점의 x좌표값 @number cy 중점의 y좌표값 @number radius 반지름 @number startAngle 호가 시작되는 각도 @number endAngle 호..

프로그래밍/그래픽

각도계

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