방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com Html 캔버스/Html 캔버스 튜토리얼 (내가만든 차트!)23 Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 23 : 최종 정리 캔버스와 관련된 마지막 시간이다. 이번장에서는 내용을 조금 정리해 보려 한다. Html에서 제공하는 캔버스는 내부에 그림을 그리는 효과를 나타내는 엘리먼트이다. 그러한 캔버스는 그리는 것 이외의 다른 이벤트, 영역 등에 대한 효과를 제공하지 않는다. * 그리는 효과는 단순히 그림만 그리는 효과라는 뜻은 아닙니다. ^^; 그렇기 때문에 모든 이벤트 처리 방법에 대해서는 사용자가 직접 구현해야 한다. 물론, Path2D 라는 조금 손쉽게 이벤트를 처리하는 객체가 존재하지만, 구형 브라우저 및 익스플로러에서는 동작하지 않기 때문에 사용하기가 매우 아쉽다. 사용자들이 익스플로러를 안쓰면 되긴하는데..대한민국에서는 아직 그건 무리이기 때문이다. 앞선 시간까지 살펴본 원형 차트에 여러 계산식을 더해주면 아래 코드처.. 2020. 2. 24. Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 22 : 원 차트 5 이번시간에는 텍스트를 실제로 넣어보도록 소스코드를 변경해보겠다. 기존에 만들었던 반복문을 함수로 바꾼뒤에 계산식을 조근 변경하고 strokeRect 함수 부분을 텍스트로 바꾸어주자. 텍스트 그리는 방법은 예전 방법과 동일하다. 길이를 계산해서 빼 주는 방법이 추가가 되어야 중앙정렬된 모습이 나타나게 된다. function makeText(index){ event_array.forEach((itm, idx) => { var half = (itm[1] - itm[0]) / 2; var degg = itm[0] + half; var xx = Math.cos(degreesToRadians(degg)) * radius * 0.7 + width / 2; var yy = Math.sin(degreesToRadians.. 2020. 2. 24. Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 21 : 원 차트 4 저번시간까지 이벤트를 부여하는 방법에 대해서 살펴 보았다. 이번시간에는 부채꼴 내부에 텍스트를 넣어보도록 하겠다. 앞전 시간에 알게된 사실은 아래 내용이다. 1. 원의 반지름 2. 원의 중심점 3. 점과 점사이의 각(degree) 구하는 방법 4. 이벤트 영역의 시작각(degree) ~ 종료각(degree) 범위 배열 여기에 수학적 방법(?)을 동원하면 텍스트가 들어갈 위치를 만들어낼 수 있다. 아래 고등학교(?) 시절 배웠던 사인과 코사인을 보도록 하자. 위 내용을 토대로 텍스트가 들어갈 영역을 만들어 낼 수 있다. 이벤트가 담긴 event_array 영역에서의 시작각 ~ 종료각 차이를 구한뒤에 절반으로 나누게 되면 텍스트가 해당 영역의 가운데 들어가게 될 것 이다. 말이 어려우므로 아래 코드를 살펴보.. 2020. 2. 24. Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 20 : 원 차트 3 저번시간에는 이벤트를 부여하는 첫번째 방법으로 반지름 이내에 마우스가 들어온 경우에 대해서 감지하는 방법까지 알아 보았다. 이번시간에는 각 그려진 부채꼴 영역별로 감지된 도(degree)를 통해서 범위내에 들어온 경우에 대해서 살펴보도록 하겠다. 앞 시간 마지막 부분에서 아크탄젠트(탄젠트의 역함수)를 통해 중심점부터 마우스가 클릭한 곳 까지의 라디안 값을 구한뒤에 도(degree) 값으로 변환하였다. 해당 값을 보면 값이 -180 ~ 180 사이의 값이 나오게 되므로 이를 사용하기 쉽게 하려면 +180을 더해주면 된다. 그러면 0~ 360 값이 나오게 되므로 해당 값을 가지고 부채꼴 영역에 들어왔는지 판별하면 된다. isInsideArc함수를 수정하여보자. function isInsideArc(x1, y.. 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. Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 18 : 원 차트 1 이번시간부터 부채꼴 모양으로 이루어진 원형 차트를 만드려고한다. 원형 차트는 검색해보면 대략 아래 이미지처럼 생겼다. 사용자가 어떠한 데이터를 입력하면 그 데이터의 전체 합계에서 비율에 맞추어서 차트가 만들어지게 되는 것 이다. 그렇다면 예를들어 첫번째 데이터가 100, 두번째 데이터도 100인 값이 들어왔다고 하자. 두 데이터의 합은 200이며, 그 200중 100이 차지하는 비율은 100/200 = 0.5 이며, 또다른 100이 차지하는 비율은 100/200 = 0.5이다. 위 예로든 데이터가 들어오면 각각 절반씩 채워진 차트가 탄생을 해야 되는 것 이다. 이런식으로 데이터가 들어오면 아래 사진처럼 차트가 그려져야 할 것 이다. 이번 원형 차트의 핵심은 이러한 비율을 잘 고려하여 그리는 것이라 볼 수.. 2020. 2. 20. 이전 1 2 3 4 다음
