본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


Javascript canvas16

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 캔버스) 튜토리얼 (차트만들기!) - 16 : 바 차트 4 이번시간에는 부여한 이벤트에 색상을 바꾸는 기능을 추가해 보겠다. mosemove에서 해당 영역안에 마우스가 올라오면 색이 변해야되고, 마우스가 out되면 색이 원래대로 되돌어 가야한다. 그렇다면 이러한 개념을 글로 풀어보면, 1. 마우스가 차트의 bar 내부에 있으면 색이 변해야한다. 2. 마우스가 차트bar의 외부로 나가면 색이 기존으로 돌아와야한다. 2가지 개념으로 정리가 된다. 다시그리기 개념을 적용하면 위 2가지 조건을 만족시킬 수 있다. 이를 함수로 표현하여보자. function hoverDrawing(hoverIdx){ ctx.clearRect(0,0,width, height); //초기화 value.forEach( (data, idx) => { ctx.save(); //정보저장 if(idx.. 2020. 2. 19.
Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 15 : 바 차트 3 이번시간에는 차트에 이벤트를 부여하는 방법이다. 맨 처음에 설명하였듯이 캔버스는 1개의 객체로 이루어져 있기 때문에 이벤트를 부여하는 방법은 데이터를 통해서 직접 계산식으로 구현해야 된다고 했었다. 앞선시간에 이벤트 부여하는 방법 3가지를 해 보았었다. 1. 사각형에 이벤트 부여 https://lts0606.tistory.com/284 2. 원에 이벤트 부여 https://lts0606.tistory.com/285 3. 다각형에 이벤트 부여 https://lts0606.tistory.com/286 여기서는 Bar 차트이므로 1번 사각형에 이벤트를 부여하는 방법을 적용해 보도록 하겠다. 캔버스에서의 위치는 캔버스가 html로부터 띄어진 높이와, html 좌측에서부터 멀어진 거리를 빼 주어야 위치값이 나온다.. 2020. 2. 19.
Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 14 : 바 차트 2 앞전시간에는 도형을 그리고, 애니메이션을 주는 부분까지하여 단순한 차트의 형태를 구성하여 보았다. 이번에는 차트를 깔끔하게 그리는 방법과, 입력된 데이터가 하단에 표시되는 방법에 대해서 알아보겠다. 캔버스 내부에 차트를 그릴때 strokeRect함수를 사용해서 계속해서 그렸다. 그러다보니 내부에 줄이 그어진 상태로 차트가 완성되어서 되게 보기 불편한 모양이 되었다. 이러한 현상을 좀 해결하려면 가장 간단한 방법인 "지우고, 다시그리고" 방법을 써 주면 된다. 애니메이션을 주는 방법이 "지우고, 다시그리고" 방법이 짧은 시간동안 지속되면 마치 움직이는 효과를 나타내는 것 이라고 했으므로 처음 그리는 방법에서의 코드를 간단하게 수정하면 깔끔한 모양의 차트가 나오게 된다. 앞 시간 코드의 setInterval.. 2020. 2. 13.