HT For Web 的HTML5拓扑图组件graphView背景设置有多种途径可选择：
-
divBackground：通过css设置graphView对应的div背景
-
Painter：通过graphView.addBottomPainter(function(g, rect){…})来绘制背景
-
Layer：通过设置graphView.setLayer(['…', '…', '…', …])来将graphView拆分为多个图层，并为各个图层命名，再让不同种类的node通过node.setLayer('…')将node设置到graphView对应图层中
接下来我为大家一一介绍graphView背景设置方法：
- divBackground：
这两张图片展示的是设置graphView对应div的background属性来设置拓扑图背景，左边的图片展示的是页面初始效果，右边展示的是拓扑图通过缩小和拖拽图元位置后的效果，从效果上可以看出，拓扑图的背景的位置和大小并没有发生改变，不过图元如何缩放和移动，都保持原来的样子。
以下是具体的代码实现，代码很简单，通过gv.getView()来获取graphView拓扑图组件对应的div，再向div中设置background属性。
1function initGV1(gv){ 2 var dm = gv.dm(), 3 node = new ht.Node(), 4 view = gv.getView(), 5 viewStyle = view.style; 6 node.setImage('res/mac-air.png'); 7 node.setName('13-inch MacBook Air'); 8 node.setPosition(260, 70); 9 dm.add(node); 10 11 viewStyle.backgroundImage = 'url(res/background.jpg)'; 12 viewStyle.backgroundPosition = 'center'; 13 viewStyle.backgroundRepeat = 'no-repeat'; 14}
2. Painter：
这两张图片展示的是通过graphView.addBottomPainter(function(g, rect){...})方法绘制拓扑图组件背景，通过graphView.addTopPainter(function(f, rect){...})方法来绘制拓扑图组件的水印效果，左边的图片展示的是页面初始效果，右边展示的是拓扑图通过缩小和拖拽图元位置后的效果，从效果上可以看出，拓扑图的背景和水印的位置和大小均发生了改变，都跟随拓扑图的缩放和移动而改变。
细心的读者会发现两张图片的水印时间是不一样的，这个水印获取的是系统当前时间，因此每一秒会刷新一次，所以两张图片的时间会不一样，这说明了graphView拓扑图组件是支持背景和水印刷新的。
具体的代码实现也不是很复杂，addBottomPainter和addTopPainter方法的参数都是一个函数实现，函数参数也都为两个，g和rect，其中g为canvas对应的画笔，rect为脏区域大小，通过画笔g可以想拓扑图上话任意想描绘的图形，包括图片、渐变色、多边形等等。在代码中addBottomPainter画的就是灰白相间的背景图片，addTopPainter绘制的是系统当前时间，最后通过定时器setInterval设置1秒刷新一次graphView拓扑图组件。
1function initGV2(gv){ 2 var dm = gv.dm(), 3 node = new ht.Node(); 4 node = new ht.Node(); 5 node.setName('13-inch MacBook Air'); 6 node.setImage('res/mac-air.png'); 7 node.setPosition(260, 70); 8 node.setRotation(Math.PI/2); 9 dm.add(node); 10 11 gv.addBottomPainter(function(g, rect){ 12 for(var i=0; i<20; i++){ 13 for(var j=0; j<10; j++){ 14 if((i + j)%2 === 0){ 15 g.fillStyle = 'lightgray'; 16 }else{ 17 g.fillStyle = 'white'; 18 } 19 g.beginPath(); 20 g.rect(i*50, j*50, 50, 50); 21 g.fill(); 22 } 23 } 24 g.strokeStyle = 'red'; 25 g.lineWidth = 1; 26 g.beginPath(); 27 g.rect(rect.x, rect.y, rect.width, rect.height); 28 }); 29 30 gv.addTopPainter(function(g, rect){ 31 g.save(); 32 g.beginPath(); 33 var text = new Date().toLocaleString(); 34 g.font = '40px Arial'; 35 g.strokeStyle = 'red'; 36 g.textAlign = 'left'; 37 g.textBaseline = 'top'; 38 g.lineWidth = 5; 39 g.fillStyle = 'yellow'; 40 g.strokeText(text, 100, 100); 41 g.fillText(text, 100, 100); 42 g.fill(); 43 g.restore(); 44 }); 45 46 setInterval(function(){ 47 gv.redraw(); 48 }, 1000); 49 50}
3. Layer：
这两张图片展示的是通过graphView.setLayer(['…', '…', '…', …])方法将拓扑图组件分割成'bgLayer'， 'edgeLayer'， 'nodeLayer'三层，左边的图片展示的是页面初始效果，右边展示的是拓扑图通过缩小和拖拽图元位置后的效果，从效果上可以看出，拓扑图的背景和图元的位置和大小均发生了改变，都跟随拓扑图的缩放和移动而改变。
具体的代码实现也不是很复杂，通过graphView.setLayer(['…', '…', '…', …])方法将拓扑图组件分割成'bgLayer'， 'edgeLayer'， 'nodeLayer'三层，并且图层依据数组顺序自下而上，创建一个存放背景图片的bgNode，并设置其属性为不可选中，设置其graphView图层为'bgLayer'，再通过重载ht.Default.handleImageLoaded方法，在图片加载完成后设置bgNode的position，最后设置一堆的node节点在nodeLayer图层上，一堆的edge连线在edgeLayer图层上。
1function initGV3(gv){ 2 gv.setLayers(['bgLayer', 'edgeLayer', 'nodeLayer']); 3 4 var center = createNode(), 5 dm = gv.dm(), 6 sm = dm.sm(), 7 bgNode = new ht.Node(); 8 9 center.setPosition(100, 100); 10 dm.add(center); 11 12 bgNode.s({ 13 '2d.selectable': false 14 }); 15 bgNode.setImage('bgImage'); 16 bgNode.setLayer('bgLayer'); 17 18 ht.Default.handleImageLoaded = function(name, image){ 19 var width = image.width, 20 height = image.height, 21 gvH = gv.getHeight(), 22 gvW = gv.getWidth(); 23 if(name == 'bgImage'){ 24 bgNode.setPosition(gvW / 2, gvH / 2); 25 } 26 }; 27 dm.add(bgNode); 28 29 var count = 30, 30 firstNode, 31 lastNode; 32 33 for (var i = 0; i < count; i++) { 34 var node = createNode(); 35 if(!lastNode){ 36 firstNode = node; 37 }else{ 38 node.setHost(lastNode); 39 } 40 lastNode = node; 41 42 node.setPosition( 43 500 + 150 * Math.cos(Math.PI * 2 / count * i), 44 100 + 70 * Math.sin(Math.PI * 2 / count * i) 45 ); 46 dm.add(node); 47 var edge = new ht.Edge(center, node); 48 edge.s({ 49 'edge.type': 'custom', 50 'edge.color': 'lightgray', 51 'edge.width': 1 52 }); 53 edge.setLayer('edgeLayer'); 54 edge.addStyleIcon("toArrow", { 55 position: 19, 56 keepOrien: true, 57 width: 30, 58 height: 15, 59 names: ['toArrow'] 60 }); 61 dm.add(edge); 62 } 63 firstNode.setHost(lastNode); 64}