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屬性。

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, 70);dm.add(node);viewStyle.backgroundImage = 'url(res/background.jpg)';viewStyle.backgroundPosition = 'center';viewStyle.backgroundRepeat = 'no-repeat'; }

?

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拓撲圖組件。

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, 70);node.setRotation(Math.PI/2); dm.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, 100);g.fill();g.restore();});setInterval(function(){gv.redraw();}, 1000);}

?

Layer：

?

? ? ? 這兩張圖片展示的是通過graphView.setLayer(['…', '…', '…', …])方法將拓撲圖組件分割成'bgLayer'， 'edgeLayer'， 'nodeLayer'三層，左邊的圖片展示的是頁面初始效果，右邊展示的是拓撲圖通過縮小和拖拽圖元位置后的效果，從效果上可以看出，拓撲圖的背景和圖元的位置和大小均發生了改變，都跟隨拓撲圖的縮放和移動而改變。

? ? ??具體的代碼實現也不是很復雜，通過graphView.setLayer(['…', '…', '…', …])方法將拓撲圖組件分割成'bgLayer'， 'edgeLayer'， 'nodeLayer'三層，并且圖層依據數組順序自下而上，創建一個存放背景圖片的bgNode，并設置其屬性為不可選中，設置其graphView圖層為'bgLayer'，再通過重載ht.Default.handleImageLoaded方法，在圖片加載完成后設置bgNode的position，最后設置一堆的node節點在nodeLayer圖層上，一堆的edge連線在edgeLayer圖層上。

?

?

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);dm.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));dm.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']});dm.add(edge);}firstNode.setHost(lastNode); }

轉載于:https://www.cnblogs.com/xhload3d/p/4316853.html

總結

以上是生活随笔為你收集整理的HT For Web 拓扑图背景设置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。