Moscow metro map on Canvas
The idea to try to draw a map appeared after viewing the subway map on Wikipedia in SVG format . In Firefox, it opens for a long time, besides, at a resolution of 1600x1300, it does not fit into the screen, and scrolling on it also works for a very long time. It became interesting, but in the Canvas it will also slow down? I decided to draw my version of the subway map as the next demo for the dbCartajs project.
Canvas does not support all the features that SVG has. For example, as it turned out, it partially supports the drawing of dashed lines: the setDashLine method only supports Chrome, and Firefox uses its mozDash property. But Canvas supports Bezier Curve for drawing smooth bends.
I added the possibility of using the bezierCurveTo method in dbCartajs if the third parameter is the 'Q' symbol, for example, for an object with coordinates [[1,1, 'Q'], [2,2, 'Q'], [3 , 3, 'Q'], [4,4, 'Q'], [5,5, 'Q'], [6,6, 'Q']], the bezierCurveTo method will be called 2 times. Also added a check to support the Dash Line, which can be set as a dash property in mopt.
')
Pixel coordinates of lines, stations, canals, rivers, railway tracks are converted to degrees with longitude and latitude. The new coordinates of the objects are stored in the mosmetro.js file.
From the stations formed a drop-down list. Selecting a station in it centers it on the map.
In general, it turns out that a map is drawn in Canvas much faster than in SVG. This is especially noticeable on the tablet.
Canvas does not support all the features that SVG has. For example, as it turned out, it partially supports the drawing of dashed lines: the setDashLine method only supports Chrome, and Firefox uses its mozDash property. But Canvas supports Bezier Curve for drawing smooth bends.
I added the possibility of using the bezierCurveTo method in dbCartajs if the third parameter is the 'Q' symbol, for example, for an object with coordinates [[1,1, 'Q'], [2,2, 'Q'], [3 , 3, 'Q'], [4,4, 'Q'], [5,5, 'Q'], [6,6, 'Q']], the bezierCurveTo method will be called 2 times. Also added a check to support the Dash Line, which can be set as a dash property in mopt.
')
Pixel coordinates of lines, stations, canals, rivers, railway tracks are converted to degrees with longitude and latitude. The new coordinates of the objects are stored in the mosmetro.js file.
From the stations formed a drop-down list. Selecting a station in it centers it on the map.
In general, it turns out that a map is drawn in Canvas much faster than in SVG. This is especially noticeable on the tablet.
Source: https://habr.com/ru/post/193778/
All Articles