Paths
SVG path data, boolean ops, measurement and sampling.
1import { Canvas, Circle, Path, pathLength, pathPointAtLength } from 'react-native-tgfx'
2
3const route = 'M40 300 C 130 -20, 270 420, 362 70'
4const at = pathPointAtLength(route,
5 pathLength(route) * )
6
7<Canvas style={{ flex: 1 }}>
8 <Path path={route} style="stroke"
9 strokeWidth={12} color="#0ea5e9"
10 end={} />
11 <Circle cx={at.x} cy={at.y} r={16}
12 color="#7c3aed" />
13</Canvas>
9:41
Paths are SVG path strings.
import { Path, pathOp } from 'react-native-tgfx'
const plate = 'M0 0 L120 0 L120 120 L0 120 Z'
const hole = 'M40 40 L80 40 L80 80 L40 80 Z'
<Path path={pathOp(plate, hole, 'difference')} color="#4F8EF7" />| Function | Returns |
|---|---|
pathOp | path: union / difference / intersect / xor (PathOp) |
pathBounds | PathBounds |
pathContains | boolean |
pathTransform | path, by PathMatrix |
pathLength | number |
pathPointAtLength | PathPoint with angle in radians |
pathSegment | sub-path between two distances |
Along a path
const route = 'M8 170 q90 -70 170 0 t160 -6'
const at = pathPointAtLength(route, pathLength(route) * progress)
<Group transform={[{ translateX: at.x }, { translateY: at.y }, { rotate: at.angle }]}>
<Path path={arrow} color="#FF3B30" />
</Group>Trim and dash
start and end on PathProps trim the path to
fractions of its length.
Add DashPathEffect or
CornerPathEffect as children.
<Path path={route} style="stroke" strokeWidth={4} end={progress}>
<DashPathEffect intervals={[10, 5]} phase={march} />
</Path>