Skip to content

Commit

Permalink
[update] show matrioltan route line path
Browse files Browse the repository at this point in the history
  • Loading branch information
wodndb committed Feb 11, 2023
1 parent 4a7f564 commit a614533
Show file tree
Hide file tree
Showing 4 changed files with 142 additions and 581 deletions.
63 changes: 4 additions & 59 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,62 +1,7 @@
import { Circle, Group, Layer, Line, Stage, Text } from "react-konva";
import Metropolitan from "assets/Metropolitan.svg";

const stations: string[] = [
"암사",
"천호",
"강동구청",
"몽촌토성",
"잠실",
"석촌",
"송파",
"가락시장",
"문정",
"장지",
"복정",
"남위례",
"산성",
"남한산성입구",
"단대오거리",
"신흥",
"수진",
"모란",
];

function App() {
return (
<Stage width={window.innerWidth} height={window.innerHeight}>
<Layer>
<Line
points={[30, 30, 30, 30 + 50 * (stations.length - 1)]}
stroke="#E6186C"
strokeWidth={10}
lineCap="round"
lineJoin="round"
/>
{stations.map((item, idx) => {
return (
<Group>
<Circle
x={30}
y={30 + 50 * idx}
radius={8}
fill="white"
stroke="black"
strokeWidth={3}
/>
<Text
x={30 + 30}
y={30 + 50 * idx}
text={item}
fontSize={16}
verticalAlign="center"
offsetY={6}
/>
</Group>
);
})}
</Layer>
</Stage>
);
}
const App = () => {
return <img src={Metropolitan} alt="map" />;
};

export default App;
Loading

0 comments on commit a614533

Please sign in to comment.