preview
This commit is contained in:
36
src/pages/route-preview/TravelPath.tsx
Normal file
36
src/pages/route-preview/TravelPath.tsx
Normal file
@ -0,0 +1,36 @@
|
||||
import { Graphics } from "pixi.js";
|
||||
import { useCallback } from "react";
|
||||
import { PATH_COLOR, PATH_WIDTH } from "./Constants";
|
||||
|
||||
|
||||
interface TravelPathProps {
|
||||
points: {x: number, y: number}[];
|
||||
}
|
||||
|
||||
export function TravelPath({
|
||||
points
|
||||
}: Readonly<TravelPathProps>) {
|
||||
|
||||
const draw = useCallback((g: Graphics) => {
|
||||
g.clear();
|
||||
g.moveTo(points[0].x, points[0].y);
|
||||
for (let i = 1; i < points.length - 1; i++) {
|
||||
g.lineTo(points[i].x, points[i].y);
|
||||
}
|
||||
g.stroke({
|
||||
color: PATH_COLOR,
|
||||
width: PATH_WIDTH
|
||||
});
|
||||
}, [points]);
|
||||
|
||||
if(points.length === 0) {
|
||||
console.error("points is empty");
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<pixiGraphics
|
||||
draw={draw}
|
||||
/>
|
||||
);
|
||||
}
|
Reference in New Issue
Block a user