Aplikasi metro Moskow untuk Windows Store

Saya ingin membuat aplikasi untuk metro Moskow segera setelah Artemy Lebedev dan studionya menggambar skema metro dalam bentuk saat ini.

1. Sumber data

Sekarang peta metro resmi dapat diunduh dalam PDF dari situs resmi Metro Moskow . Pada saat pembuatan aplikasi (pertengahan 2013), sirkuit itu tersedia sebagai file .ai (Adobe Illustrator) di situs web Lebedev Studio. Bagaimanapun, langkah selanjutnya adalah menyiapkan data di Illustrator.

2. Persiapan data

Buka PDF di Illustrator, nyalakan mode pratinjau dan pingsan.


Setelah kerja yang panjang dan melelahkan (di sini saya datang dengan pengalaman bertahun-tahun di surat kabar periklanan Moskow, pertama di departemen desain dan tata letak, kemudian di departemen TI)


Apa yang telah dilakukan:

• Banyak puing, prasasti, dll dihapus.
• setiap jalur metro dibagi menjadi beberapa bagian di antara stasiun. Garis putus di bawah gambar stasiun, sehingga ketika menggambar rute yang dibangun, tidak ada sambungan dan celah yang terlihat.

- semua "potongan" garis dan semua stasiun yang terkait dengan setiap baris dikelompokkan menjadi beberapa lapisan, sesuai urutannya.

3. Konversi gambar ke XAML

XAML menggunakan Microsoft Expression Design untuk menerjemahkan gambar . Semuanya sederhana di sini - buka ai-file, ekspor ke XAML.

4. Mulai pemrograman (akhirnya)

Saat ini, Visual Studio 2015 dan MVVM-framework MVVM-light digunakan untuk pengembangan. Sayangnya, file XAML yang diperoleh pada tahap sebelumnya tidak dapat digunakan secara langsung dalam aplikasi, kecuali untuk lapisan statis dengan sungai dan rute "aeroexpress".

Oleh karena itu, sedikit lebih banyak pekerjaan yang dilakukan secara manual - dan dalam sumber daya aplikasi kami menghasilkan file XML final yang digunakan untuk merender skema metro. Ketika dimuat, objek jalur metro dan stasiun metro terbentuk, tautan antara stasiun dalam jalur yang sama terbentuk, transisi antar jalur, garis cincin "tertutup". Omong-omong, transisi antar garis terbentuk secara terprogram. Antara dua stasiun - garis dengan gradien isian ditarik, antara tiga stasiun - busur lingkaran yang dibangun pada tiga titik - pusat stasiun yang menyusun transisi - dibangun.

Contoh layer View yang bertanggung jawab untuk membuat busur transisi antara tiga stasiun (untuk singkatnya, sumber daya yang bertanggung jawab untuk animasi, dll.):

<ItemsControl x:Name="ArcCrossings" ItemsSource="{Binding CrossingArcTypeList}" Visibility="Visible" Height="1760" Width="1765"> <ItemsControl.ItemTemplate> <DataTemplate> <Grid x:Name="grid" Opacity="{Binding Dimmed, Converter={StaticResource BooleanToOpacityConverter}}"> <Path StrokeThickness="7.7" Stroke="{Binding CrossBrush}"> <Path.Data> <PathGeometry> <PathGeometry.Figures> <PathFigureCollection> <PathFigure StartPoint="{Binding GradientLineStartPoint}"> <PathFigure.Segments> <PathSegmentCollection> <ArcSegment Point="{Binding GradientLineEndPoint}" Size="{Binding ArcSize}" SweepDirection="Clockwise"/> </PathSegmentCollection> </PathFigure.Segments> </PathFigure> </PathFigureCollection> </PathGeometry.Figures> </PathGeometry> </Path.Data> </Path> <Path StrokeThickness="2.4" Stroke="{Binding SettingsVM.BackMainBrush, Source={StaticResource Locator}}"> <Path.Data> <PathGeometry> <PathGeometry.Figures> <PathFigureCollection> <PathFigure StartPoint="{Binding BlackLineStartPoint}"> <PathFigure.Segments> <PathSegmentCollection> <ArcSegment Point="{Binding BlackLineEndPoint}" Size="{Binding ArcSize}" SweepDirection="Clockwise"/> </PathSegmentCollection> </PathFigure.Segments> </PathFigure> </PathFigureCollection> </PathGeometry.Figures> </PathGeometry> </Path.Data> </Path> </Grid> </DataTemplate> </ItemsControl.ItemTemplate> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <Canvas/> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> </ItemsControl> 

Untuk mencari rute, digunakan algoritma gelombang dengan variasi kecil. Sebagai contoh, jika rute optimal ditemukan mengandung dua transisi atau lebih, rute tambahan dibangun di mana dilarang untuk menggunakan jalur metro "menengah". Hasilnya terkadang merupakan pilihan perjalanan yang sangat paradoksal dan tidak terduga (lihat tangkapan layar di bawah).

Untuk mencari mobil yang diperlukan untuk transisi yang nyaman ke jalur metro lain, pendekatan berikut digunakan: setiap jalur diatur ke arah "maju" dan "kembali". Oleh karena itu, penting bagi kita dari sisi mana kita mendekati stasiun penyeberangan, dan kadang-kadang masih penting bagi kita ke arah mana kita akan pergi sepanjang garis yang kita lintasi.

Sebuah fragmen file XML yang menggambarkan stasiun Kitay-Gorod dari jalur Tagansko-Krasnopresnenskaya dan transisi karakteristiknya ke jalur Kaluga-Riga:

 <Station name="-" lat="55.755361" lon="37.632361" Width="16.8277" Height="16.8282" Canvas.Left="1011.71" Canvas.Top="741.034" Data="F1 M 1017.45,746.771C 1015.97,748.25 1015.97,750.646 1017.45,752.125C 1018.93,753.604 1021.33,753.603 1022.8,752.125C 1024.29,750.646 1024.28,748.25 1022.81,746.77C 1021.33,745.292 1018.93,745.292 1017.45,746.771 ZM 1014.2,755.425C 1010.91,752.15 1010.88,746.824 1014.15,743.524C 1017.43,740.225 1022.75,740.2 1026.05,743.473C 1029.35,746.744 1029.38,752.071 1026.1,755.371C 1022.83,758.672 1017.51,758.695 1014.2,755.425 Z " TextLabel.Left="2" TextLabel.Top="-15" ShowPad="1" IsCrossPlatform="true" CrossPlatformColor="FFF37025"> <transfers> <forward> <transfer LineID="400" station="-"> <forward vagons="11111"/> <backward vagons="00100"/> </transfer> </forward> <backward> <transfer LineID="400" station="-"> <forward vagons="00100"/> <backward vagons="11111"/> </transfer> </backward> </transfers> </Station> 

5. Beberapa tangkapan layar dari rute yang dibuat (dapat diklik)

6. Paket

Pada saat awal pengembangan aplikasi (saya mengingatkan Anda bahwa ini adalah awal atau pertengahan 2013), Windows 8 - 8.1 telah dibahas. Sebenarnya, aplikasi ini masih "non-UWP". Dengan demikian, aplikasi ini masih memiliki "tanda lahir" Windows 8.1, khususnya, lokasi ambigu pengaturan aplikasi. Apa yang bisa saya katakan, di Windows 10 "pesona" pengaturan "a la Windows 8.1" terlihat agak asing. Seiring waktu, ini mungkin akan berubah.


Dalam pembaruan terakhir, saya harus "memotong" informasi tentang pintu keluar ke kota (yaitu, sekarang tidak ada petunjuk tentang mobil mana yang masuk untuk membuatnya nyaman untuk masuk ke kota). Ini dalam waktu dekat.

Perbarui

YouTube: Demonstrasi Aplikasi