HT For 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';
}

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

 

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);

}

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