Skip to content

Instantly share code, notes, and snippets.

@buschtoens
Created December 2, 2012 19:14
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save buschtoens/4190516 to your computer and use it in GitHub Desktop.
Save buschtoens/4190516 to your computer and use it in GitHub Desktop.
Generate the path for an annular sector svg
function deg2rad(deg) {
return deg * Math.PI / 180;
}
function annularSector(centerX, centerY, startAngle, endAngle, innerRadius, outerRadius) {
startAngle = deg2rad(startAngle + 180);
endAngle = deg2rad(endAngle + 180);
var p = [
[centerX + innerRadius * Math.cos(startAngle), centerY + innerRadius * Math.sin(startAngle)]
, [centerX + outerRadius * Math.cos(startAngle), centerY + outerRadius * Math.sin(startAngle)]
, [centerX + outerRadius * Math.cos(endAngle), centerY + outerRadius * Math.sin(endAngle)]
, [centerX + innerRadius * Math.cos(endAngle), centerY + innerRadius * Math.sin(endAngle)]
];
var angleDiff = endAngle - startAngle
, largeArc = (angleDiff % (Math.PI * 2)) > Math.PI ? 1 : 0;
var commands = [];
commands.push("M" + p[0].join());
commands.push("L" + p[1].join());
commands.push("A" + [outerRadius, outerRadius].join() + " 0 " + largeArc + " 1 " + p[2].join());
commands.push("L" + p[3].join());
commands.push("A" + [innerRadius, innerRadius].join() + " 0 " + largeArc + " 0 " + p[0].join());
commands.push("z");
return commands.join(" ");
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment