TS-LOG

프로그래밍/그래픽

부채꼴 그리기

부채꼴(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..

프로그래밍/그래픽

라디안과 도

우리는 일상에서 각도는 주로 도를 사용한다.수학 시간에 배운 '90도', '180도', '360도' 처럼 말이다.  하지만 프로그래밍에서는 '도' 외에도 '라디안' 이라는 단위도 사용한다.정확히는 '라디안'이 프로그래밍에서 각을 구하는데 더 알맞은 단위이다.그래서 각을 구함에 있어서 라디안 단위로 계산을 많이 하게 된다. 라디언과 도의 변환 공식프로그래밍에서 삼각함수나 호를 그릴때는 라디안 값을 사용한다.회전 같은 경우는 도값으로 동작하는 경우도 있지만보통은 라디안으로 계산한다고 봐야 한다. 하지만 사용자에게 각도를 입력받거나각도를 표시해줘야 하는 경우는 도를 사용한다. 그래서 도 에서 라디안으로또는 라디안에서 도로변환하는 일이 자주 발생한다. 공식은 다음과 같다. // 도를 라디안으로 변환 ..