I need to display a very long area (without defined length) with many polygons (simple shapes - circles, squares, some text). Obviously I need only small fragment visible at a time. Main problems are efficient scrolling and handing mouse events. I write in GWT. Things i considered so far:
1) canvas. create a canvas with the size of visible area. Create buffer canvas larger then visible area. Render to the buffer (only changes - if something is changed in the visible area or new parts to the right/left during scrolling). And when required, render proper part of the buffer to visible canvas. This seems to work fast enough. But! I have to implement this smart buffering, decide which part needs to be rerendered and which not. And I need to remember all object to detect mouse clicks and mouseovers (and it should be some nice structure like interval tree or segment tree, as mouseover checks are very frequent - but this is already implemented in the browser, sounds like reinventing the wheel) - this is A LOT OF WORK! Maybe there is something ready?
2) html (divs/images) - so, the idea is to render all elements with divs and images (images can be generated on canvas first, doesn't metter). Position them absolutely on a long div and use browser scrolling to scroll the div. Works until you reach the end of this long div and you need to reposition everything so there is more space to scroll (and this will freeze scrolling for some time). So maybe it would be possible to render in a second div in the meanwhile and then switch them.. It might work, but this sounds like a hack and it will probably have serious problems with multiple objects visible at a time. Plus for mouse events implemented in the browser.
3) SVG - I haven't tried, but I think I will run into the same performance problems as with html/divs (when scrolling to right/left)
Any ideas? Which approach is the best? Is there anything better? WebGL (it won't work in IE and porting to IE would be hard prob). How should I implement this?
