HT for Web topology background settings

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

1. divbackground: css set graphview corresponding div background
2. Paintergraphview.addbottompainter "en-Us" (Function (g, rect) {...})
3. layer: by setting graphview.setlayer ([' ... ', ' ... ', ' ... ', ...]) graphview split into multiple layers, name each layer, and let different kinds of nodenode.setlayer (' ... ') will node set to graphview corresponding layer

Next I will introduce you to the graphview background setting method:

1. Divbackground:

These two pictures show is set graphview corresponding DIV Background property to set the topology map background, the picture on the left shows the initial effect of the page, the right show is the topological map by reducing and dragging the element position after the effect, from the effect can be seen, The position and size of the background of the topology diagram have 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 (),        new  ht. Node (),        = Gv.getview (),        = View.style;    Node.setimage (' res/mac-air.png ');    Node.setname (' 13-inch MacBook Air ');    Node.setposition (260,);    Dm.add (node);     = ' url (res/background.jpg) ';     = ' center ';     = ' no-repeat ';}

1. Painter:

These two images show through 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.

functioninitGV2 (GV) {varDM =gv.dm (), node=Newht.    Node (); Node=Newht.    Node (); Node.setname (' 13-inch MacBook Air '); Node.setimage (' Res/mac-air.png '); Node.setposition (260, 70); Node.setrotation (Math.PI/2);dm.add (node); Gv.addbottompainter (function(g, rect) { for(vari=0; i<20; i++){             for(varj=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 (); varText =NewDate (). 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, 100);        G.fill ();    G.restore ();    }); SetInterval (function() {Gv.redraw (); }, 1000);}

1. Layer:

These two pictures show through 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.

functioninitGV3 (GV) {gv.setlayers ([' Bglayer ', ' edgelayer ', ' Nodelayer ']); varCenter =CreateNode (), DM=gv.dm (), SM=Dm.sm (), Bgnode=Newht.    Node (); Center.setposition (100, 100);    Dm.add (center); BGNODE.S ({' 2d.selectable ':false    }); Bgnode.setimage (' Bgimage '); Bgnode.setlayer (' Bglayer '); Ht. default.handleimageloaded=function(name, image) {varwidth =image.width, Height=Image.height, GVH=gv.getheight (), GvW=gv.getwidth (); if(name = = ' Bgimage ')) {bgnode.setposition (GvW/2, GVH/2);    }    };    Dm.add (Bgnode); varCount = 30, Firstnode, Lastnode;  for(vari = 0; I < count; i++) {        varnode =CreateNode (); if(!lastnode) {Firstnode=node; }Else{node.sethost (lastnode); } lastnode=node; Node.setposition (+ Math.Cos * (Math.PI * 2/count *i),+ * Math.sin (Math.PI * 2/count *i));        Dm.add (node); varEdge =Newht.        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 ']        });    Dm.add (Edge); } firstnode.sethost (Lastnode);}

HT for Web topology background settings