Skip to content

Flutter 정다각형 #

Find similar titles

7회 업데이트 됨.

Edit
  • 최초 작성자
  • 최근 업데이트
    jmkang

Structured data

Category
Programming

정다각형의 특징 #

정 n 각형이 있을 때, 정 n 각형은 다음과 같은 성질을 만족한다.

  • n개의 각의 크기가 모두 같은 다각형이다.
  • n개의 변의 길이가 모두 같은 다각형이다.
  • 내각의 크기는 180 * (n-2) / 2 이다.
  • 꼭짓점에서 중심으로 선을 그었을 때의 각의 크기는 360 / n 이다.

정오각형 예시 #

오각형

그림 1. 정 오각형 내부 각도 (출처)

삼각형 공식 #

정다각형을 그리기 위해서 다음과 같은 삼각형 공식이 필요하다.

삼각형

그림 2. 한 변의 길이와 끼인 각을 알 경우 (출처)

  • 두 선분 사이에 끼인 각이 a이고 한 변의 길이가 x일 때, 위와 같이 나머지 두 선분의 길이를 구할 수 있다.

정다각형 그리기 #

정다각형 #

기본 좌표

그림 3. 좌표 평면상에서의 정오각형 (출처)

위와 같이 정오각형을 그리기 위해서는 먼저 기준점의 좌표를 잡아야 한다.

  • 점 A를 기준점으로 잡는다.
  • 점 A의 좌표를 (0, x)라고 한다.

점 B

그림 4. 점 B의 좌표 구하기 (출처)

이후, 점 B의 좌표를 구하기 위해서는 위의 삼각형 공식을 이용한다.

삼각형 AOB에서 각 ABO 가 72이고 한 변의 길이가 x일 때,

  • 점 B의 x 좌표 값은 x * sin 72 이다.
  • 점 B의 y 좌표 값은 x * cos 72 이다.

점 C

그림 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 링크에서 확인할 수 있다.

앱 내 화면 #

예제화면1

그림 6. 3 입력 시 (출처)

예제화면2

그림 7. 5 입력 시 (출처)

예제화면3

그림 8. 10 입력 시 (출처)

Suggested Pages #

0.0.1_20231010_1_v71