많은 폴리곤 (간단한 모양 - 원, 사각형, 텍스트)이있는 매우 긴 영역 (길이가 정의되지 않은)을 표시해야합니다. 분명히 한 번에 볼 수있는 작은 조각 만 있으면됩니다. 주요 문제는 마우스 이벤트를 효율적으로 스크롤하고 전달하는 것입니다. 나는 GWT에 글을 쓴다. 내가 지금까지 고려한 것들 :매우 긴 영역에서 렌더링 할 여러 객체, 캔버스?
1) 캔버스. 보이는 영역 크기의 캔버스를 만듭니다. 버퍼 캔버스를 더 크게 표시 영역을 만듭니다. 버퍼로 렌더링합니다 (스크롤하는 동안 보이는 부분에서 변경되거나 새로운 부분이 오른쪽/왼쪽으로 변경되는 경우에만 변경됨). 그리고 필요한 경우 버퍼의 적절한 부분을 보이는 캔버스에 렌더링하십시오. 이것은 충분히 빨리 작동하는 것 같습니다. 그러나! 이 스마트 버퍼링을 구현하고, 다시 렌더링되어야하는 부분과 그렇지 않은 부분을 결정해야합니다. 그리고 마우스 클릭과 마우스 오버를 감지하기위한 모든 객체를 기억해야합니다 (마우스 오버 검사가 매우 빈번한 것처럼 간격 트리 또는 세그먼트 트리와 같은 멋진 구조 여야 함 - 그러나 이것은 브라우저에 이미 구현되어 있으며 휠 재발 명처럼 들립니다) - 이건 많은 일! 아마도 준비가 되었나요?
2) html (divs/images) - 아이디어는 모든 요소를 div 및 이미지로 렌더링하는 것입니다. 이미지는 캔버스에서 먼저 생성 될 수 있으며 metter는 아닙니다. 긴 div에 절대적으로 배치하고 브라우저 스크롤을 사용하여 div를 스크롤합니다. 이 긴 div의 끝에 도달 할 때까지 작동하고 스크롤 할 공간이 더 많아 지도록 모든 위치를 바꿔야합니다. 그러면 스크롤이 일정 시간 멈 춥니 다. 어쩌면 두 번째 div에서 렌더링 한 다음 전환 할 수도 있습니다. 작동 할 수도 있지만 해킹처럼 들리며 한 번에 여러 개체를 볼 수있는 심각한 문제가 발생할 수 있습니다. 브라우저에 구현 된 마우스 이벤트 용 플러스.
3) SVG는 - 나는 시도하지 않은,하지만 왼쪽/오른쪽)
어떤 아이디어로 스크롤 할 때 나는 HTML/div의 (와 같은 성능 문제로 실행됩니다 생각? 어떤 접근 방식이 가장 좋습니까? 더 좋은 점이 있습니까? WebGL (IE에서는 작동하지 않고 IE로 이식하는 것은 어려운 문제입니다.) 어떻게 구현해야합니까?
전체 캔버스를 렌더링 할 수 없으며 영역이 무한 할 수 있습니다. – mabn
필자의 경우, 캔버스는 무한한 시간대이기도합니다. 한 번에 10 초를 표시하지만 30 초 길이의 캔버스를 렌더링합니다.그런 식으로 모든 새로운 프레임에서 캔버스를 다시 렌더링 할 필요가 없습니다. 단지 * 버퍼가 다 떨어질 때만입니다. –