HT for Web topology background settings

HT for Web the HTML5 topology diagram component Graphview background settings can be selected in several ways:

2. Divbackground : by ES5 Set Graphview corresponding to the Div background

4. Painter : by Graphview.addbottompainter (function (g, rect) {...}) to draw the background

5. Layer: By settingGraphview.setlayer ([' ... ', ' ... ', ' ... ').to bringGraphviewsplit into multiple layers, name each layer, and let different kinds ofnodethroughnode.setlayer (' ... ')will benodeset toGraphviewin the corresponding layer

I'll introduce you to the next Graphview Background Setting Method:

1. Divbackground :

These two pictures show the settings Graphview corresponding to the DIV's Background property to set the topology map background, the picture on the left shows the initial effect of the page, the right is shown by the topology diagram by reducing and dragging the element position after the effect, from the effect can be seen, topological map of the position and size of the background has not changed, But how the entities are scaled and moved remains the same.

The following is a specific code implementation, the code is very simple, through Gv.getview () to get the Graphview topology diagram component corresponding Div, and then set the Background property in the Div.

function InitGV1 (GV) {var dm = gv.dm (), node = new ht. Node (), view = Gv.getview (), Viewstyle = View.style;node.setimage (' res/mac-air.png '); Node.setname (' 13-inch MacBook air '); Node.setposition (260);d M.add (node); viewstyle.backgroundimage = ' url (res/background.jpg) '; viewstyle.backgroundposition = ' center '; viewstyle.backgroundrepeat = ' no-repeat ';}

2. Painter:

These two pictures show the Graphview . Addbottompainter (Function (g, rect) {...}) method to draw the topology diagram component background, via Graphview.addtoppainter (function (f, rect) {...}) method to draw the watermark effect of the topology diagram component, the picture on the left shows the initial effect of the page, and the right shows the effect of the topological diagram by narrowing and dragging the element position, from the effect, it can be seen that the background of the topological map and the location and size of the watermark have changed, all following the scale and movement of the topological map.

Careful readers will find two images of the watermark time is not the same, this watermark is the system current time, so every second will be refreshed once, so the time of the two pictures will be different, this shows that the Graphview topology diagram component is to support the background and water printing new.

The specific code implementation is not very complex, the parameters of the Addbottompainter and Addtoppainter methods are a function implementation, the function parameters are also two, G and Rect, where G is the canvas corresponding brush, rect is the size of the dirty area, By using the brush g, you can think of any graphic you want to depict on the topology map, including pictures, gradients, polygons, and so on. In the code addbottompainter painting is a gray-and-white background picture, Addtoppainter draw is the system current time, finally through the timer setinterval set 1 seconds to refresh the Graphview topology diagram component.

Function initgv2 (GV) {var dm = gv.dm (), Node = new ht. Node (); node = new ht. Node (); Node.setname (' 13-inch macbook air '); Node.setimage (' res/mac-air.png '); Node.setposition (260, &NBSP;70), Node.setrotation (MATH.PI/2);d m.add (node), Gv.addbottompainter (function (g, rect) {for (var i=0 ;  i<20; i++) {for (var j=0; j<10; j++) {if ((i + j)%2 === 0) { g.fillstyle =  ' Lightgray ';} else{g.fillstyle =  ' White ';} G.beginpath (); G.rect (i*50, j*50, 50, 50); G.fill ();}} g.strokestyle =  ' red '; G.linewidth = 1;g.beginpath (); G.rect (rect.x, rect.y,  rect.width, rect.height);}); Gv.addtoppainter (function (g, rect) {g.save (); G.beginpath (); Var text = new date (). toLocaleString ();g.font =  ' 40px arial ';g.strokestyle =  ' Red ';g.textAlign =  ' Left ';g.textbaseline =  ' top ';g.linewidth = 5;g.fillstyle =  ' yellow '; G.stroketext (text, 100, 100); G.filltext (text, 100, &NBSP;100); G.fill (); G.restore ();}); SetInterval (function () {Gv.redraw ();}, 1000);}

3. Layer:

These two pictures show the Graphview . Setlayer ([' ... ', ' ... ', ' ... ', ...]) Methods the topology diagram component is divided into ' bglayer ', ' edgelayer ', ' nodelayer ' three layers , the picture on the left shows the initial effect of the page, and the right shows the effect of the topological map by narrowing and dragging the element position, which can be seen from the effect. The background and the location and size of the topology map are changed, all of which follow the scale and movement of the topological map.

       The specific code implementation is also not very complex, through graphview.setlayer ([' ... ', ' ... ', ' ... ') Method divides the topology diagram component into ' bglayer ', ' edgelayer ', ' nodelayer ' three layers, and the layer creates a bgnode with a background image from the bottom-up of the array order, and sets its properties to be unchecked, setting its graphview layer to ' Bglayer ', and then through heavy-duty HT. Default.handleimageloaded method, after the picture is loaded, set the Bgnode position, finally set up a bunch of node nodes on the Nodelayer layer, a bunch of edge lines on the Edgelayer layer.

Function initgv3 (GV) {gv.setlayers ([' Bglayer ',  ' edgelayer ',  ' Nodelayer ']); var center =  createnode (), dm = gv.dm (), Sm = dm.sm (), Bgnode  = new ht. Node (); Center.setposition (100, 100);d M.add (center); BGNODE.S ({' 2d.selectable ':  false}); Bgnode.setimage (' bgimage '); Bgnode.setlayer (' Bglayer '); Ht. Default.handleimageloaded = function (name, image) {Var width = image.width,height  = image.height,gvh = gv.getheight (), gvw = gv.getwidth (); if (name ==  ' Bgimage ') {bgnode.setposition (gvw / 2, gvh / 2);}}; Dm.add (Bgnode);var count = 30,firstnode,lastnode;for  (var i = 0; i  < count; i++)  {var node = createnode (); if (!lastnode) {firstNode =  node;} Else{node.sethost (lastnode);} Lastnode = node;node.setposition (500 + 150 * math.cos (MaTh. Pi * 2 / count * i), 100 + 70 * math.sin (Math.PI *  2 / count * i));d M.add (node); var edge = new ht. Edge (Center, node); Edge.s ({' Edge.type ':  ' Custom ', ' Edge.color ':  ' lightgray ', ' edge.width ':  1 }); Edge.setlayer (' Edgelayer '); Edge.addstyleicon ("Toarrow",  {position: 19,keeporien: true,width:  30,height: 15,names: [' Toarrow '});d M.add (edge);} Firstnode.sethost (lastnode);}

HT for Web topology background settings