28 lines
1022 B
TypeScript
28 lines
1022 B
TypeScript
|
arcForCircle(radius: number, gapSize: number) {
|
||
|
|
const svgSize = 100
|
||
|
|
const translate = svgSize / 2
|
||
|
|
|
||
|
|
const MAX_RADIANS = 2 * Math.PI
|
||
|
|
const gap = (gapSize === 0 ? 0.5 : gapSize) * MAX_RADIANS;
|
||
|
|
|
||
|
|
const startOffset = gap / 2
|
||
|
|
const availableTheta = MAX_RADIANS - gap
|
||
|
|
const largeArc = 1 // The full circle always goes around the large path
|
||
|
|
|
||
|
|
const thetaStart = MAX_RADIANS * 0.75 - startOffset;
|
||
|
|
const thetaEnd = thetaStart - availableTheta
|
||
|
|
|
||
|
|
if (gap < 0.1)
|
||
|
|
console.log(gap, startOffset, thetaStart, thetaEnd)
|
||
|
|
|
||
|
|
const [x1, y1] = [Math.cos(thetaStart) * radius + translate, -Math.sin(thetaStart) * radius + translate]
|
||
|
|
const [x2, y2] = [Math.cos(thetaEnd) * radius + translate, -Math.sin(thetaEnd) * radius + translate]
|
||
|
|
|
||
|
|
if (gapSize === 0)
|
||
|
|
return `M ${x1} ${y1}
|
||
|
|
A ${radius} ${radius} 0 1 0 ${x2} ${y2}
|
||
|
|
M ${x2} ${y2}
|
||
|
|
A ${radius} ${radius} 0 1 0 ${x1} ${y1}`
|
||
|
|
else
|
||
|
|
return `M ${x1} ${y1} A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2}`
|
||
|
|
}
|