Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use HTML5 Canvas to achieve interactive subway line map, the article is very detailed, has a certain reference value, interested friends must read it!

Interface generation

The underlying p is generated through the ht.graph.GraphView component, and then you can use the good method provided by HTforWeb to call the canvas brush to draw casually. First, let's take a look at how to generate the underlying p:

Vardm=newht.DataModel (); / / data container

Vargv=newht.graph.GraphView (dm); / / Topology component

Gv.addToDOM (); / / add topology diagram components to body

The addToDOM function is declared as follows:

AddToDOM=function () {

Varself=this

View=self.getView ()

Style=view.style

Document.body.appendChild (view); / / add the underlying component p to the body

The default component of style.left='0';// is absolute positioning, so set the location

Style.right='0'

Style.top='0'

Style.bottom='0'

Window.addEventListener ('resize',function () {self.iv ();}, false); / / window change event

}

Now I can doodle on this p. First of all, I get the points on the downloaded subway map, and I put them in subway.js. This js file is all downloaded. I didn't make any other changes, mainly assigning these points to the array according to the route, such as:

Mark_Point13= []; / / the line array contains the start and end coordinates of the line and the name of the line.

Tweak Point13 = []; / / change to the transfer site coordinates in the line and the site name in the site array

The small site array contains the coordinates of the small site in the line and the name of the small site.

Mark_Point13.push ({name:' Line 13', value: [113.4973 Magi 23.1095]})

Mark_Point13.push ({name:' Line 13', value: [113.4155 2.1080]})

T_Point13.push ({name:' Fish Ball', value: [113.41548 ~ (23.10547)]})

N_Point13.push ({name:' Yue Fung Wai', value: [113.41548pr 23.10004]})

Next, to depict subway lines, I declare an array lineNum, which contains the numbers of all the subway lines in js, and an color array that holds the colors of all subway lines. The index of these colors corresponds to the index of the subway line number in lineNum:

VarlineNum= ['1','1','2,', ",

Varcolor= ['# f1cd44' '060a1' ed9b4f`' 'ed9b4f`' '007e3a' cb0447''

"8a8c29", "82352b", "82352b", "82352b", "09a1e0"," 8a8c29"

'# 82352b recording, b6d300 recording, 09a1e0']

Then traverse lineNum, transfer the elements and colors in lineNum to the createLine function, and draw subway lines and color matching according to these two parameters. After all, the naming method in js file is regular, and a corresponding number must be added after naming which line, so we only need to combine the string with this number to get the corresponding array in js:

LetlineName='Line'+num

Letline=window [lineName]

The definition of createLine is also very simple, and my code has a lot of styling, so it looks a little too much. To create a ht.Polyline pipeline, we can add specific points to this variable through the polyline.addPoint () function, and we can set the connection mode of the points through setSegments.

FunctioncreateLine (num,color) {/ / draw map lines

Varpolyline=newht.Polyline (); / / Polygon pipeline

Polyline.setTag (num); / / set the node tag tag as the only label

If (num==='68') polyline.setToolTip ('APM'); / / set prompt information

Elseif (num==='60') polyline.setToolTip ('GF')

Elsepolyline.setToolTip ('Line'+num)

If (color) {

Polyline.s ({/ / s is shorthand for setStyle, set style

'shape.border.width':0.4,// sets the border width of the polygon

'shape.border.color':color,// sets the border color of polygons

'select.width':0.2,// sets the border width of the selected node

'select.color':color// sets the border color of the selected node

})

}

LetlineName='Line'+num

Letline=window [lineName]

For (leti=0;i

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.