StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The radius surely in the example above would be the length of the white lines, so any length you want??</p> <p>If what you want is to equally divide the sector into n sub-sectors of equal arc length then you need to decide on what the maximum angle at the centre is going to be, in the above example its 90deg or pi/2 radians.</p> <p>Ultimately, max angle, subsector arc length, subsector angle and radius are all connected through:</p> <p>subsector_arc_length = radius * subsector_angle</p> <p>subsector_angle = max_angle/n</p> <p>or// subsector_arc_length = radius * max_angle/n (Note these require radians)</p> <p>But if your aim is draw this to canvas then something like:</p> <pre><code>var canvas = '<canvas id="canvas" width="500" height="500" style="border: 1px solid black; width: 500px; height: 500px; background: lightblue;"></canvas>' document.body.innerHTML += canvas; var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var max_angle = Math.PI/2; //rad - 90deg var no_of_flows = 10; var radius = 200; //pixels ctx.lineWidth = 5; ctx.strokeStyle = '#333'; ctx.translate(250,350); ctx.beginPath(); ctx.rotate(-Math.PI/2); ctx.rotate(-Math.PI/2 + max_angle/2); for (var i=0; i<no_of_flows; i++) { ctx.moveTo(0,0); ctx.lineTo(0, radius); ctx.stroke(); ctx.rotate(-1*max_angle/(no_of_flows-1)); }; </code></pre> <p>Your main problem would you could probably generate a better image off canvas. + the event structure for the menu.</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