방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com html canvas custom chart2 Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 21 : 원 차트 4 저번시간까지 이벤트를 부여하는 방법에 대해서 살펴 보았다. 이번시간에는 부채꼴 내부에 텍스트를 넣어보도록 하겠다. 앞전 시간에 알게된 사실은 아래 내용이다. 1. 원의 반지름 2. 원의 중심점 3. 점과 점사이의 각(degree) 구하는 방법 4. 이벤트 영역의 시작각(degree) ~ 종료각(degree) 범위 배열 여기에 수학적 방법(?)을 동원하면 텍스트가 들어갈 위치를 만들어낼 수 있다. 아래 고등학교(?) 시절 배웠던 사인과 코사인을 보도록 하자. 위 내용을 토대로 텍스트가 들어갈 영역을 만들어 낼 수 있다. 이벤트가 담긴 event_array 영역에서의 시작각 ~ 종료각 차이를 구한뒤에 절반으로 나누게 되면 텍스트가 해당 영역의 가운데 들어가게 될 것 이다. 말이 어려우므로 아래 코드를 살펴보.. 2020. 2. 24. Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 19 : 원 차트 2 이번시간에는 원형 차트에 대한 이벤트에 대해서 살펴보도록 하겠다. 기존에 보았던 이벤트보다도 난이도가 조금 높다고 생각한다. 먼저 원형 이벤트에대해서 고려해야될 점이 2가지로 구분되어진다. 1. 원 반지름 내부에 들어왔는가? 2. 부채꼴 데이터가 이루고있는 각(degree) 범위에 존재하는가? 먼저 1번에 대한 해답은 예전시간에 피타고라스의 정리를 통해서 구하는 방법으로 해결하였었다. * 기억이 안나면 : https://lts0606.tistory.com/285 그러면 이제 2번에 대해서 해결방법을 찾아야한다. 아래사진을 보자. 사용자가 1번영역을 클릭하였다고하자. 피타고라스의 정리 계산을 통해서 우리는 원 내부에 마우스가 들어왔는지 여부를 판별 할 수 있다. 그런데..반지름까지는 판별했는데 1번인지 2.. 2020. 2. 21. 이전 1 다음
