guneysus
3/9/2018 - 9:52 PM

Generate the path for an annular sector svg

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(" ");
}