SVG를 이용한 정오각형 그리기

1. 정오각형 특징

 

정다각형은 모든 각의 크기가 같으며 모든 변의 길이도 같은 다각형이다.

 

오각형의 내각의 합은 540°이다. 따라서 정오각형의 한 각의 크기는 108˚이다.

또한 각 꼭짓점에서 중심점으로 이루는 선분들의 각이 72˚이다.

2. 삼각함수를 이용한 꼭짓점 위치 계산

 

정오각형은 원에 내접함으로 무게 중심을 (0, 0)이라고 하고 반지름을 h라고 했을 때 각 꼭짓점의 위치를 다음과 같이 나타낼 수 있다.

3. y축 방향 변경, 중점 변경

 

수학에서의 y좌표는 값이 증가할수록 위쪽으로 가지만 svg에서는 증가할수록 아래쪽으로 간다. 따라서 sin 값을 계산할때는 180˚를 더해주어야한다. 중점도 0, 0으로 두어 계산할 경우 음수값이 생길 수 있어 svg 크기를 (h * 2, h * 2)로 설정후 중점을 (h, h)로 잡아야 한다. 이때 stroke-width에 따라 다시 조절이 필요할 수 있다.

 

4. javascript에서는 cos, sin 함수를 사용할 경우 라디안 값이 필요

 

따라서 디그리를 라디안으로 변환해야 한다!

 

5. 코드

- codepen.io/hwanlee/pen/KKNvyVM

svg의 polygon 요소에 points 값에 계산한 점의 위치를 넣어주면 다각형을 만들어준다!

 

<div class="input_area">
  <label for="input_radius">반지름: </label><input id="input_radius" type="text" value="50"><button id="button_ok" class="button_ok" type="button">확인</button>
</div>
<div class="pentagon_area">
  <strong class="title">생성된 정오각형</strong>
  <svg id="pentagon_svg" width="100" height="100">
  <circle id="pentagon_circle" cx="50" cy="50" r="50" fill="#2d3436" />
  <polygon id="pentagon" stroke="#ffeaa7" fill="none"
   points="50,0 97.5528, 34.5492 79.3893, 90.4508 20.6107, 90.4508 2.4471 34.5492 50, 0"/>
  </svg>
</div>

 

// 입력한 반지름을 가진 원에 내접한 정오각형을 그려준다.

let pentagonSVG = document.getElementById('pentagon_svg');
let pentagonCircle = document.getElementById('pentagon_circle');
let pentagon = document.getElementById('pentagon');
let inputRadius = document.getElementById('input_radius');
let buttonOk = document.getElementById('button_ok');
let radius = inputRadius.value;
let cx, cy, degree, pentagonPoints, radian, pointStr;

buttonOk.addEventListener('click', () => { 
  pentagonPoints = [];
  degree = 90;
  radius = cx = cy = parseInt(inputRadius.value);
  
  pentagonSVG.setAttribute('width', radius * 2);
  pentagonSVG.setAttribute('height', radius * 2);
  pentagonCircle.setAttribute('cx', cx);
  pentagonCircle.setAttribute('cy', cy);
  pentagonCircle.setAttribute('r', radius);
  
  for (let i = 0; i < 5; i++) {
    radian = Math.PI / 180 * degree; // radian으로 변환
    pentagonPoints.push({
      x: radius * Math.cos(radian) + radius,
      y: radius * Math.sin(radian + Math.PI) + radius
    });
    degree += 72;
  }
  
  pointStr = pentagonPoints.reduce((acc, point) => {
    acc += `${point.x}, ${point.y} `
    return acc;
  }, '');
  pentagon.setAttribute('points', pointStr);
});

 

참고

- imcts.github.io/math-hodobub/

수포자가 필요해서 정리하는 수학공식

- m.blog.naver.com/PostView.nhn?blogId=sctivcrmnfe&logNo=220911486225&proxyReferer=https:%2F%2Fwww.google.com%2F

19. 정오각형의 넓이와 대각선의 길이.

- tgbasics.weebly.com/types-of-polygons.html

Types of Polygons