Flot을 사용하여 프로젝트의 이미지를 플롯합니다. line, pie과 같은 사전 정의 된 모양의 경우 flot.tooltip을 통해 툴팁을 추가 할 수 있습니다.HTML5 Canvas : 사용자 정의 도면에 대한 툴팁 생성
그러나 우리는 Here과 같은 Html5 캔버스 API를 통해 그려지는 이미지가 있습니다. 빨간색 사각형에 대한 툴팁과 빈 영역에 대한 다른 툴팁을 추가하고 싶습니다. 모든 라이브러리가 작동하게하려면 어떻게해야합니까?
캔버스를 사용하면 마우스가 특정 그리기 된 항목 위로 마우스를 가져갈 때 감지 할 수있는 좋은 방법이 아닙니다. 그것은 단지 버퍼 일 뿐이며, 어떤 작업을 사용했는지 전혀 알지 못합니다. Flot의 자체 호버 탐색에는 캔버스에 그려진 것의 개념이 없습니다. 예를 들어 파이는 특정 지점에서 시작하여 바깥쪽으로 특정 수의 픽셀로 확장됩니다.
아무리해도 마우스 이벤트를 허용하는 함수를 작성하고 이미지를 그리는 데 사용 된 데이터를 검사 한 다음 해당 데이터를 결정해야합니다.
여기서 Flot은 내장 된 호버 기능을 사용자가 직접 오버라이드 할 수있는 방법을 제공합니다. 툴팁 플러그인은 사용자의 기능과 함께 작동합니다. 현재 그렇게 할 수 없으므로 a) 함수를 사용하기 위해 툴팁 플러그인을 수정하거나 b) 자신의 mousemove 리스너를 오버레이 요소에 등록한 다음 툴팁 플러그인에 대한 '가짜'plothover 이벤트를 생성합니다 소비하기 위해.
플로트 그래프 위에 이미지를 그립니다. – Mark
이 경우에는 'Flot'이 없으며 '$ .plot()'과 같은 코드는 없습니다. – Joy