HT For Web 拓撲圖背景設定

圖撲軟體發表於2015-03-06
Web

HT For Web 的HTML5拓撲圖元件graphView背景設定有多種途徑可選擇：

  1. divBackground：通過css設定graphView對應的div背景
  2. Painter：通過graphView.addBottomPainter(function(g, rect){…})來繪製背景
  3. Layer：通過設定graphView.setLayer(['…', '…', '…', …])來將graphView拆分為多個圖層，併為各個圖層命名，再讓不同種類的node通過node.setLayer('…')將node設定到graphView對應圖層中

接下來我為大家一一介紹graphView背景設定方法：

  1. 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';
}

 

 

  1. 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);
}

  

 

  1. 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);
}

 

相關文章