react-native-trace-line

react-native를 이용해 따라그리기를 구현해 보았습니다.

"react-native-svg"와 "svg-path-properties" 사용

Preview

Scenario

svg의 path를 이용해 경로를 추출해 내고(d 속성) 해당 경로를 leadLine 으로 지칭한다.

const leadLine =
  'M195.774 51.8061C179.122 51.8061 163.331 49.3063 148.504 56.9318C137.569 62.5554 126.858 70.9182 115.756 75.4411C98.7638 82.364 89.5769 93.3369 79.0224 106.907C53.3603 139.901 57.3807 188.15 57.3807 228.072C57.3807 244.355 58.5865 279.354 75.3205 289.58C83.1559 294.368 90.2168 299.901 98.386 304.103C113.305 311.776 128.029 315.121 144.232 319.622C174.204 327.947 206.219 326.408 236.494 320.903C259.394 316.74 282.932 289.416 291.168 268.508C296.774 254.276 307.325 241.968 310.532 226.648C312.864 215.502 311.803 203.699 314.233 192.762C319.485 169.13 305.968 150.796 285.473 139.085C272.681 131.775 255.085 128.58 240.908 125.132C224.348 121.104 206.44 118.602 189.651 116.019C173.53 113.539 146.239 123.029 137.398 138.942C126.539 158.489 133.204 181.778 134.266 203.013C135.883 235.367 175.578 229.187 198.336 225.936C217.21 223.24 228.305 209.088 223.822 188.918C220.264 172.906 206.837 172.259 193.211 172.259';

getPathProperty함수는 svg-path-properties라이브러리를 이용해 leadLine을 원하는 만큼 나눈다.

const getPathProperty: (path: string, totalSlice: number) => Point[]

예를 들어 const points = getPathProperty(leadLine, 30)을 실행하면 leadLine을 따라 찍힌 30개의 점 좌표들을 가진 배열을 리턴한다.

그래서 점선을 따라 움직일 화살표는 points의 인덱스를 따라 움직이도록 설정한다.

<G x={points[index - 1].x} y={points[index - 1].y}>
...
</G>

HTHstudy/react-native-trace-line

react-native-trace-line

Preview

Scenario