Flutter
정다각형
#
Find similar titles
-
최초 작성자
chzhfptgywls@gmail.com
- 최근 업데이트
Structured data
- Category
- Programming
Table of Contents
정다각형의 특징 #
정 n 각형이 있을 때, 정 n 각형은 다음과 같은 성질을 만족한다.
- n개의 각의 크기가 모두 같은 다각형이다.
- n개의 변의 길이가 모두 같은 다각형이다.
- 내각의 크기는 180 * (n-2) / 2 이다.
- 꼭짓점에서 중심으로 선을 그었을 때의 각의 크기는 360 / n 이다.
정오각형 예시 #
그림 1. 정 오각형 내부 각도 (출처)
삼각형 공식 #
정다각형을 그리기 위해서 다음과 같은 삼각형 공식이 필요하다.
그림 2. 한 변의 길이와 끼인 각을 알 경우 (출처)
- 두 선분 사이에 끼인 각이 a이고 한 변의 길이가 x일 때, 위와 같이 나머지 두 선분의 길이를 구할 수 있다.
정다각형 그리기 #
정다각형 #
그림 3. 좌표 평면상에서의 정오각형 (출처)
위와 같이 정오각형을 그리기 위해서는 먼저 기준점의 좌표를 잡아야 한다.
- 점 A를 기준점으로 잡는다.
- 점 A의 좌표를 (0, x)라고 한다.
그림 4. 점 B의 좌표 구하기 (출처)
이후, 점 B의 좌표를 구하기 위해서는 위의 삼각형 공식을 이용한다.
삼각형 AOB에서 각 ABO 가 72이고 한 변의 길이가 x일 때,
- 점 B의 x 좌표 값은 x * sin 72 이다.
- 점 B의 y 좌표 값은 x * cos 72 이다.
그림 5. 점 C의 좌표 구하기 (출처)
같은 방법으로 점 C의 좌표를 구할 수 있다.
삼각형 AOC에서 각 AOC가 144이고 한 변의 길이가 x일 때,
- 점 C의 x 좌표 값은 x * sin 144 이다.
- 점 C의 y 좌표 값은 x * cos 144 이다.
나머지 점들(점 D, 점 E)도 같은 방법으로 진행하면 된다. 이는 규칙성을 가지고 있고, 반복문으로 표현하면 다음과 같다.
for(var i=1; i<side; i++){
point[i].X = x * sin(angle * i);
point[i].Y = x * cos(angle * i);
}
Flutter에서 정다각형 #
좌표계 #
- Flutter에서의 좌표계는 기존 안드로이드에서의 좌표계와 같다.
- 좌측 상단이 (0, 0)이다.
- 우측 하단이 (width, height)이다.
- 즉, 화면 중앙에 도형을 그리기 위해서는 화면의 절반씩 이동해줘야 한다.
정다각형 그리기 #
- CustomPainter를 상속받는다.
- 좌표계를 화면의 중심으로 이동한다.
- Path를 사용하여 경로를 기록한다.
- LineTo를 사용하여 점끼리 선을 잇는다.
- Canvas에 path를 그린다.
예시 #
코드 #
자세한 코드는 아래의 GitHub 링크에서 확인할 수 있다.
앱 내 화면 #
그림 6. 3 입력 시 (출처)
그림 7. 5 입력 시 (출처)
그림 8. 10 입력 시 (출처)