Databases
StackOverflow2013
Postsdbo
PODraw Zoomable Time Line With Scroll Bars On Html5 Canvas
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODraw Zoomable Time Line With Scroll Bars On Html5 Canvas
    text
    copied!<p>I need a Time Line For My Web Project. Something like <a href="http://vorg.github.com/timeline.js/examples/cssAnimation.html" rel="nofollow noreferrer">this</a> - I read the code of this Time Line but did not understand it because it is not documented enough.</p> <p>My problem is the math behind all of this (not the interaction with the canvas).<br> I <a href="https://stackoverflow.com/questions/10374273/scrollbar-math-formula-bug">have</a> <a href="https://stackoverflow.com/questions/10257421/custom-scrollbar-maths-in-jquery-javascript?rq=1">read</a> <a href="http://csdgn.org/inform/scrollbar-mechanics" rel="nofollow noreferrer" title="This page open just in IE for some reason">several</a> articles about the math of the scroll bars, but none of them talk about zoom.<br> Some <a href="http://digitalarts.bgsu.edu/faculty/bonniem/Spring11/artc4330_1/notes/notes35.html" rel="nofollow noreferrer">articles</a> suggest to hold canvas element with very large width value - and to display just the <a href="http://en.wikipedia.org/wiki/Viewport" rel="nofollow noreferrer" title="Wikipedia Disambiguation Page">View Port</a>.<br> I don't think that's the right way to do it - I want to draw just the correct viewport.</p> <p>In my project, I have array of <code>n</code> points.<br> Each point holds time value represented in seconds, but not all of the points are within the Viewp Port.</p> <p>Considering the current zoom level, how do I calculate: <li>What points should be drawn and where to draw them?</li> <li>What is the size and position of the thumb?</li> <li>Any articles / tutorials about such a thing?</li></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload