wehub-resource-sync
52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import compassDialUrl from '../assets/compass_dial.svg';
|
|
|
|
/**
|
|
* CompassDial - 使用原生矢量资源渲染指南针圆盘。
|
|
*
|
|
* compass_dial.svg 由 VectorDrawable 转为 SVG，包含 360° 刻度线、度数标签、
|
|
* 方向文字(N/E/S/W)、红色北指针三角和中心十字。
|
|
*
|
|
* 整个 SVG 根据 headingDeg 旋转，固定三角指示器在圆盘外部不动。
|
|
*/
|
|
export function CompassDial(props: {
|
|
size?: number;
|
|
headingDeg?: number;
|
|
directionText?: string;
|
|
}) {
|
|
const { size = 290, headingDeg = 69, directionText = '东' } = props;
|
|
|
|
return (
|
|
<div className="relative" style={{ width: size, height: size }}>
|
|
{/* Fixed pointer (small triangle at top, does NOT rotate) */}
|
|
<div className="absolute -top-5 left-1/2 -translate-x-1/2">
|
|
<div
|
|
className="w-0 h-0"
|
|
style={{
|
|
borderLeft: '7px solid transparent',
|
|
borderRight: '7px solid transparent',
|
|
borderBottom: '12px solid rgba(255,255,255,0.95)',
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* Native compass dial SVG - rotates based on heading */}
|
|
<img
|
|
src={compassDialUrl}
|
|
alt=""
|
|
width={size}
|
|
height={size}
|
|
className="block"
|
|
style={{
|
|
transform: `rotate(${-headingDeg}deg)`,
|
|
filter: 'drop-shadow(0 0 0 rgba(0,0,0,0))',
|
|
}}
|
|
draggable={false}
|
|
/>
|
|
|
|
{/* Accessibility label */}
|
|
<div className="sr-only">{directionText}{headingDeg}°</div>
|
|
</div>
|
|
);
|
|
}
|