HT For Web 拓撲圖背景設置
來源：程序員人生 發布時間：2015-03-19 08:49:31 閱讀次數：4577次
<a target=_blank href="http://www.hightopo.com/"><a target=_blank href="http://www.hightopo.com/" style="font-family: SimSun; line-height: 14pt; font-size: 12px; background-color: rgb(255, 255, 255);"><span style="font-size: 9.75pt; background: rgb(245, 245, 245);" lang="en-US">HT For Web</span></a></a><span lang="en-US" style="font-family: SimSun; line-height: 14pt; font-size: 9.75pt; background: rgb(245, 245, 245);"><a target=_blank href="http://www.hightopo.com/"> </a>的HTML5拓撲圖組件</span><a target=_blank href="http://www.hightopo.com/"><a target=_blank href="http://www.hightopo.com/" style="font-family: SimSun; line-height: 14pt; font-size: 12px; background-color: rgb(255, 255, 255);"><span style="font-size:9.75pt;background:whitesmoke" lang="en-US">graphView</span></a></a><span lang="zh-CN" style="font-family: SimSun; line-height: 14pt; font-size: 9.75pt; background: rgb(245, 245, 245);">背景設置有多種途徑可選擇：</span>
- 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 MacBookAir');
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){...})方法來繪制拓撲圖組件的水印效果，左側的圖片展現的是頁面初始效果，右側展現的是拓撲圖通過縮小和拖拽圖元位置后的效果，從效果上可以看出，拓撲圖的背景和水印的位置和大小均產生了改變，都跟隨拓撲圖的縮放和移動而改變。
仔細的讀者會發現兩張圖片的水印時間是不1樣的，這個水印獲得的是系統當前時間，因此每秒會刷新1次，所以兩張圖片的時間會不1樣，這說明了graphView拓撲圖組件是支持背景和水印刷新的。
具體的代碼實現也不是很復雜，addBottomPainter和addTopPainter方法的參數都是1個函數實現，函數參數也都為兩個，g和rect，其中g為canvas對應的畫筆，rect為臟區域大小，通過畫筆g可以想拓撲圖上話任意想描繪的圖形，包括圖片、漸變色、多邊形等等。在代碼中addBottomPainter畫的就是灰白相間的背景圖片，addTopPainter繪制的是系統當前時間，最后通過定時器setInterval設置1秒刷新1次graphView拓撲圖組件。
function initGV2(gv){
var dm = gv.dm(),
node = new ht.Node();
node = new ht.Node();
node.setName('13-inch MacBookAir');
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 = 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);
}
- Layer：
這兩張圖片展現的是通過graphView.setLayer(['…',
'…','…', …])方法將拓撲圖組件分割成'bgLayer'， 'edgeLayer'， 'nodeLayer'3層，左側的圖片展現的是頁面初始效果，右側展現的是拓撲圖通過縮小和拖拽圖元位置后的效果，從效果上可以看出，拓撲圖的背景和圖元的位置和大小均產生了改變，都跟隨拓撲圖的縮放和移動而改變。
具體的代碼實現也不是很復雜，通過graphView.setLayer(['…','…', '…', …])方法將拓撲圖組件分割成'bgLayer'， 'edgeLayer'，'nodeLayer'3層，并且圖層根據數組順序自下而上，創建1個寄存背景圖片的bgNode，并設置其屬性為不可選中，設置其graphView圖層為'bgLayer'，再通太重載ht.Default.handleImageLoaded方法，在圖片加載完成后設置bgNode的position，最后設置1堆的node節點在nodeLayer圖層上，1堆的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);
}
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
