キャンバス上のモスクワ地下鉄地図

ウィキペディアでメトロマップをSVG形式で表示した後、マップを描画しようとするアイデアが浮上しました。 Firefoxでは、長時間開いており、さらに1600x1300の解像度では画面に収まりませんし、スクロールも非常に長い間機能します。 面白くなりましたが、Canvasでも遅くなりますか？ メトロマップのバージョンをdbCartajsプロジェクトの別のデモとして描くことにしました。









Canvasは、SVGで利用可能なすべての機能をサポートしているわけではありません。 たとえば、判明したように、点線の描画を部分的にサポートしています。setDashLineメソッドはChromeのみをサポートし、FirefoxはmozDashプロパティを使用します。 ただし、Canvasは滑らかなベンドをレンダリングするためのベジェ曲線をサポートしています。

たとえば、座標[[1,1、 'Q']、[2,2、 'Q']、[3 、3、 'Q']、[4,4、 'Q']、[5,5、 'Q']、[6,6、 'Q']] bezierCurveToメソッドは2回呼び出されます。 また、ダッシュラインをサポートするチェックを追加しました。これは、moptでダッシュプロパティとして設定できます。



路線、駅、水路、河川、鉄道線路のピクセル座標は、経度と緯度を使用して度に変換されます。 オブジェクトの新しい座標は、mosmetro.jsファイルに保存されます。



ステーションからドロップダウンリストが作成されます。 その中のステーションを選択すると、マップの中央に配置されます。



一般に、CanvasではマップがSVGよりもはるかに高速に描画されます。 これは特にタブレットで顕著です。