问题描述:

This I guess is more of a maths question or maybe an SVG question. I was looking at modifying some example code I found on the raphael.js site. I already modified it to have a custom centre point. Now I want to modify it so that I can specify at which angle the arc is started at. (similar to d3.js so I can use it to have something like a bar chart with the middle missing).

However I have no idea where or how to begin. My maths is terrible, I have no idea what alpha is and the a variable does. Or why x and y are calculated that way. I have been reading the SVG specification over and over but I am missing some crucial basic knowledge and I don't know.

Can someone point me in the right direction so I can begin to understand this stuff?

`window.onload = function () {`

var r = Raphael("holder", 600, 600),

R = 200,

init = true,

param = {stroke: "#fff", "stroke-width": 30};

// Custom Attribute

r.customAttributes.arc = function (xPos, yPos, value, total, R) {

var alpha = 360 / total * value,

a = (90 - alpha) * Math.PI / 180,

x = xPos + R * Math.cos(a),

y = yPos - R * Math.sin(a),

var path = [["M", xPos, yPos - R], ["A", R, R, 0, +(alpha > 180), 1, x, y]];

return {path: path};

};

var sec = r.path().attr(param).attr({arc: [300, 300, 3, 60, R]});

};

Running the code produces:

`<svg height="600" version="1.1" width="600" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;">`

<path style="" fill="none" stroke="#bfb5b5" d="M300,100A200,200,0,0,1,361.8033988749895,109.7886967409693" stroke-width="30">

</svg>

Also I have no idea how the arc parameters work together to draw what they are drawing.

Apologies for the lack of focus on the question.

EDIT:

It's based on the polar clock example. http://raphaeljs.com/polar-clock.html

I think the author of the example is trying to create a custom attribute in order to make it easy to create arcs based on clock rotation.
Basically the `total`

paramter of the custom attribute represents the total movement of the clock (60 seconds) while `value`

(3 in your case) represents the length (in seconds) of the arc you are trying to draw. So basically you have an arc of 3 seconds.

Now for the math:

`alpha`

: the angle (in degrees) of the arc. You notice the conversion from seconds to degrees: 3 seconds -> 18 degrees`a`

: the angle in radians. Trigonometric formulas use radians not degrees, so you need this conversion. For some reason that I don't understand, this is the complementary angle (`90 - alpha`

)

**Edit**: the complementary angle is (probably) used to compensate for the fact that in trigonometry the y-axis points upwards while on the svg canvas it points downwards.`x, y`

: ending points of the path (arc) you are drawing. These are caculated using elementary trigonometry (sorry..you're not getting any help here).

The parameters for the svg arc are described here: http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands