StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The geometry isn't really that bad, at least it's not as annoying as the <a href="http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands">elliptical arc path syntax in SVG</a>. Both are manageable. </p> <p>Here's a function that will generate a series of arc segments as paths, handing each one (along with arbitrary metadata for that item) to a callback function:</p> <pre><code>function generateRadialNav( paper, // Raphael's paper object cx, cy, // x and y coordinates of the center of the circle from which the arcs will be calculated inner_radius, // pixels from origin to interior arc radial_thickness, // width of navigation area in pixels menu_items, // an object with one key per menu item; the value of each key is arbitrary callback, // a finalization callback for menu items which should accept three arguments: the menu_items key, the path element, and the menu_items value. The first and third parameters are taken directly from the menu_items object. options ) // Unused but added out of habit. { options = options || {}; var start_radians = options.start_radians || 0; var end_radians = options.end_radians || Math.PI / 2; var menu_item_count = 0; for ( var k in menu_items ) menu_item_count++; var slice_radians = ( end_radians - start_radians ) / menu_item_count; var index = 0; for ( var k in menu_items ) { var path = []; path.push( "M", cx + Math.cos( start_radians + slice_radians * index ) * inner_radius, cy + Math.sin( start_radians + slice_radians * index ) * inner_radius ); path.push( "L", cx + Math.cos( start_radians + slice_radians * index ) * ( inner_radius + radial_thickness ), cy + Math.sin( start_radians + slice_radians * index ) * ( inner_radius + radial_thickness ) ); path.push( "A", inner_radius + radial_thickness, inner_radius + radial_thickness, slice_radians, 0, 1, cx + Math.cos( start_radians + slice_radians * ( index + 1 ) ) * ( inner_radius + radial_thickness ), cy + Math.sin( start_radians + slice_radians * ( index + 1 ) ) * ( inner_radius + radial_thickness ) ); path.push( "L", cx + Math.cos( start_radians + slice_radians * ( index + 1 ) ) * inner_radius, cy + Math.sin( start_radians + slice_radians * ( index + 1 ) ) * inner_radius ); path.push( "A", inner_radius, inner_radius, slice_radians, 0, 0, cx + Math.cos( start_radians + slice_radians * index ) * inner_radius, cy + Math.sin( start_radians + slice_radians * index ) * inner_radius ); path.push( "Z" ); var element = paper.path( path ).attr( { fill: 'none', stroke: 'none' } ); callback( k, element, menu_items[k] ); index++; } } </code></pre> <p>This function will essentially calculate the region for each navigational item, generate a path with that shape, and then pass the menu definition to a callback. Any support for icons would have to be added separately, but I would suggest that the data in the menu_items definition could easily be augmented to support it. For an example of this method in use, check out <a href="http://voidblossom.com/tests/radialNav.php">my test page</a> -- pardoning the rough edges of haste, of course!</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