Dyomedea
/
dyomedea
1
1
Fork 0
Code Issues 4 Pull Requests Projects 3 Releases 1 Wiki Activity

Reticle (improved)

This commit is contained in:
Eric van der Vlist 2022-10-09 11:29:43 +02:00
parent 27305c4b21
commit 0762a4da7a
1 changed files with 16 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/map/Reticle.tsx
View File

@ -69,7 +69,7 @@ const Reticle: React.FC<{}> = () => {
<circle
cx={center.x}
cy={center.y}
r={radius}
r={unitPxStep * nbUnits}
fill='transparent'
stroke='black'
strokeWidth={1}
@ -86,7 +86,9 @@ const Reticle: React.FC<{}> = () => {
strokeWidth={0.5}
/>
<g id='reticle-east'>
<path stroke='red' className='reticle'
<path
stroke='red'
className='reticle'
strokeWidth={0.5}
d={_.range(1, nbSubUnits + 1)
.map(
@ -94,27 +96,33 @@ const Reticle: React.FC<{}> = () => {
)
.join(' ')}
/>
<path stroke='red' className='reticle'
<path
stroke='red'
className='reticle'
d={_.range(1, nbUnits + 1)
.map((i) => `M ${center.x + i * unitPxStep},${center.y - 20} v 40`)
.join(' ')}
strokeWidth={0.5}
/>
</g>
<use stroke='red' className='reticle'
<use
stroke='red'
className='reticle'
href='#reticle-east'
transform={`rotate(90, ${center.x}, ${center.y})`}
/>
<use className='reticle'
<use
className='reticle'
href='#reticle-east'
transform={`rotate(180, ${center.x}, ${center.y})`}
/>
<use className='reticle'
<use
className='reticle'
href='#reticle-east'
transform={`rotate(-90, ${center.x}, ${center.y})`}
/>
<text x={center.x + unitPxStep - 15} y={center.y - 20}>
{`${radiusUnitValue} ${radiusUnit}`}
<text x={center.x + unitPxStep * nbUnits - 15} y={center.y - 20}>
{`${radiusUnitValue * nbUnits} ${radiusUnit}`}
</text>
</g>
);