mirror of
https://github.com/grey-cat-1908/metro.git
synced 2024-09-22 19:22:00 +03:00
переходы
This commit is contained in:
parent
e74d1a6127
commit
b37a992834
2 changed files with 52 additions and 15 deletions
|
@ -3,10 +3,15 @@ import {Map} from "./models/map.ts";
|
|||
import {Branch} from "./models/branch.ts";
|
||||
import { onMounted } from 'vue'
|
||||
import {Station} from "./models/station.ts";
|
||||
import {ConnectedStation} from "./models/connectedStation.ts";
|
||||
import {ExtraBranch} from "./models/extraBranch.ts";
|
||||
|
||||
onMounted(() => {
|
||||
let station1: Station = new Station("Охотный ряд", false, [], 500)
|
||||
let station2: Station = new Station("Лубянка", true, [], 0)
|
||||
let extraBranch1: ExtraBranch = new ExtraBranch("Таганско-Краснопресненская", "#800080", 2)
|
||||
let extraStation1: ConnectedStation = new ConnectedStation("Кузнецкий\nмост", extraBranch1)
|
||||
|
||||
let station1: Station = new Station("Охотный ряд", false, [], 0)
|
||||
let station2: Station = new Station("Лубянка", true, [extraStation1], 500)
|
||||
|
||||
let branch: Branch = new Branch('Best','#FF0000', 1, [station1, station2])
|
||||
let map: Map = new Map(branch)
|
||||
|
|
|
@ -3,6 +3,9 @@ import { SVG } from '@svgdotjs/svg.js'
|
|||
|
||||
import {Branch} from "./branch.ts";
|
||||
import {Station} from "./station.ts";
|
||||
import {ConnectedStation} from "./connectedStation.ts";
|
||||
|
||||
const yMax = (window.innerHeight-50) / 4;
|
||||
|
||||
export interface MetroMap {
|
||||
branch: Branch;
|
||||
|
@ -22,28 +25,57 @@ export class Map implements MetroMap {
|
|||
this.branch = branch
|
||||
}
|
||||
|
||||
private drawStations(stations: Array<Station>) {
|
||||
const yMax = (window.innerHeight-50) / 4;
|
||||
private getTextPosition(up: boolean): number {
|
||||
if (up) {
|
||||
return yMax - 60;
|
||||
} else {
|
||||
return yMax + 60;
|
||||
}
|
||||
}
|
||||
|
||||
private drawConnectedStations(stations: Array<ConnectedStation>, up: boolean, cx: number, scy: number) {
|
||||
for (let i = 0; i < stations.length; i++) {
|
||||
let cy;
|
||||
if (up) {
|
||||
cy = scy + (i + 1) * 50
|
||||
} else {
|
||||
cy = scy - (i + 1) * 50
|
||||
}
|
||||
this.draw.circle(40).fill(stations[i].branch.color).cx(cx).cy(cy)
|
||||
|
||||
let text = this.draw.text(stations[i].branch.number.toString()).fill('white').font({ size: 28}).cx(cx).cy(cy);
|
||||
text.font({
|
||||
family: 'Onest',
|
||||
weight: '750',
|
||||
})
|
||||
|
||||
let naming = this.draw.text(stations[i].name).fill('black').font({ size: 25});
|
||||
naming.cx(cx + 30 + (naming.bbox().width / 2)).cy(cy);
|
||||
naming.font({
|
||||
family: 'Onest',
|
||||
weight: '750',
|
||||
leading: 1
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
private drawStations(stations: Array<Station>) {
|
||||
let last = 200;
|
||||
|
||||
for (let i = 0; i < stations.length; i++) {
|
||||
let cx = last + stations[i].step;
|
||||
if (stations[i].connectedStations.length > 0) {
|
||||
this.draw.circle(50).fill('#f06').cx(last + stations[i].step).cy(yMax)
|
||||
this.draw.circle(25).fill('white').cx(last + stations[i].step).cy(yMax)
|
||||
this.draw.circle(50).fill('#f06').cx(cx).cy(yMax)
|
||||
this.draw.circle(25).fill('white').cx(cx).cy(yMax)
|
||||
|
||||
this.drawConnectedStations(stations[i].connectedStations, stations[i].up, cx, yMax);
|
||||
} else {
|
||||
this.draw.rect(15, 50).fill('#f06').cx(last + stations[i].step).cy(yMax)
|
||||
this.draw.rect(15, 50).fill('#f06').cx(cx).cy(yMax)
|
||||
}
|
||||
|
||||
let y;
|
||||
let textPosition: number = this.getTextPosition(stations[i].up)
|
||||
|
||||
if (stations[i].up) {
|
||||
y = yMax - 60;
|
||||
} else {
|
||||
y = yMax + 60;
|
||||
}
|
||||
|
||||
let text = this.draw.text(stations[i].name).font({ size: 35}).cx(last + stations[i].step).cy(y);
|
||||
let text = this.draw.text(stations[i].name).font({ size: 35}).cx(last + stations[i].step).cy(textPosition);
|
||||
text.font({
|
||||
family: 'Onest',
|
||||
weight: '750',
|
||||
|
|
Loading…
Reference in a new issue