방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com Html custom chart2 Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 20 : 원 차트 3 저번시간에는 이벤트를 부여하는 첫번째 방법으로 반지름 이내에 마우스가 들어온 경우에 대해서 감지하는 방법까지 알아 보았다. 이번시간에는 각 그려진 부채꼴 영역별로 감지된 도(degree)를 통해서 범위내에 들어온 경우에 대해서 살펴보도록 하겠다. 앞 시간 마지막 부분에서 아크탄젠트(탄젠트의 역함수)를 통해 중심점부터 마우스가 클릭한 곳 까지의 라디안 값을 구한뒤에 도(degree) 값으로 변환하였다. 해당 값을 보면 값이 -180 ~ 180 사이의 값이 나오게 되므로 이를 사용하기 쉽게 하려면 +180을 더해주면 된다. 그러면 0~ 360 값이 나오게 되므로 해당 값을 가지고 부채꼴 영역에 들어왔는지 판별하면 된다. isInsideArc함수를 수정하여보자. function isInsideArc(x1, y.. 2020. 2. 24. 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. 이전 1 다음
