摘要:今天我們以真實的設(shè)備面板為模型,完成設(shè)備面板的搭建,和指示燈的閃爍和圖元流動。在我們的中,兩條連接服務(wù)器和的曲線,均是使用自定義的新連線類型。
今天我們以真實的TP-LINK設(shè)備面板為模型,完成設(shè)備面板的搭建,和指示燈的閃爍和圖元流動。
先來目睹下最終的實現(xiàn)效果:http://www.hightopo.com/demo/...
1、TP-LINK面板
我們從TP-LINK的設(shè)備面板開始,設(shè)備面板的示意圖如下:
面板基本上能由HT for Web(http://www.hightopo.com/guide...)的基本圖形(rect、circle、oval等)構(gòu)成,而中間的接口需要用自定義圖形來解決,下面讓我們一步步實現(xiàn)它,準備工作如下:
導(dǎo)入我們的HT(http://www.hightopo.com/):
創(chuàng)建數(shù)據(jù)模型容器,并將其加入DOM:
dataModel = new ht.DataModel();//創(chuàng)建數(shù)據(jù)模型容器 graphView = new ht.graph.GraphView(dataModel);//創(chuàng)建拓撲圖組件 graphView.addToDOM();
可能有人看到這里的addToDOM()很疑惑?沒錯,這是HT新增的API!之前我們要創(chuàng)建一個圖形界面,不光需要在CSS樣式中定義mian的top、left,還需要對window對象的resize事件進行監(jiān)聽等等,所以我們新增addToDOM()幫您做好這一系列的事情,可以看看源代碼中的實現(xiàn)方式:
p.addToDOM = function(){ var self = this, view = self.getView(), style = view.style; document.body.appendChild(view); style.left = "0"; style.right = "0"; style.top = "0"; style.bottom = "0"; window.addEventListener("resize", function () { self.iv(); }, false); self.iv(); },
準備工作完成后,就可以開始面板的繪制,對于基本圖形,只需設(shè)置其相應(yīng)地樣式即可,例如有立體效果的按鈕部分:
{ type: "circle", shadow: true, background: "rgb(0,0,0)", borderWidth: 1, borderColor: "rgb(0,0,0)", border3d: true, gradient: "spread.horizontal", gradientColor: "rgb(79,77,77)", dashColor: "rgb(0,0,0)", rotation: 3.141592653589793, rect: [ 677, 157, 43, 34 ] }
對于自定義圖形,前面也有介紹過,詳見HT for Web形狀手冊(http://www.hightopo.com/guide...)。需要制定矢量類型為shape,其形狀主要由points和segments這兩個屬性描述:
points為ht.List類型數(shù)組的頂點信息,頂點為{x: 100, y:200}格式的對象;
segments為ht.List類型的線段數(shù)組信息,線段為1~5的整數(shù),分別代表不同的頂點連接方式,segments主要用于繪制曲線,或者有跳躍斷點的情況,其1~5的取值含義如下:
1:moveTo,占用一個點的信息,代表一個新路徑的起點;
2:lineTo,占用一個點信息,代表從上次最后點連接到該點;
3:quadraticCurveTo,占用三個點信息,第一個點作為曲線控制點,第二個點作為曲線結(jié)束點;
4:bezierCurveTo,占用三個點信息,第一和第二個點作為曲線控制點,第三個點作為曲線結(jié)束點;
5:closePath,不占用點信息,代表本次路徑繪制結(jié)束,并閉合到路徑的起始點。
ht.Default.setImage("tplink", { width: 97, height: 106, comps: [ { type: "shape", background: "rgb(20,60,140)", borderWidth: 8, borderColor: "gray", borderCap: "round", points: [ 269, 140, 359, 140, 359, 180, 329, 180, 329, 190, 299, 190, 299, 180, 269, 180, 269, 140 ]} ] });
將所有的圖形數(shù)據(jù)整合后,就形成我們的TPLINK面板的數(shù)據(jù),整合方法如下:
ht.Default.setImage("tplink", { width: 97, height: 106, comps: [ { type: "shape", background: "rgb(20,60,140)", borderWidth: 8, borderColor: "gray", borderCap: "round", points: [ 269, 140, 359, 140, 359, 180, 329, 180, 329, 190, 299, 190, 299, 180, 269, 180, 269, 140 ]}, { type: "circle", shadow: true, background: "rgb(0,0,0)", borderWidth: 1, borderColor: "rgb(0,0,0)", border3d: true, gradient: "spread.horizontal", gradientColor: "rgb(79,77,77)", dashColor: "rgb(0,0,0)", rotation: 3, rect: [ 677, 157, 43, 34 ]}, //... //... //... //多個圖形組件 ] });
這只是注冊圖片的其中一種方法,我們也可以直接通過url的方式進行注冊(詳情見HT for Web入門手冊):
ht.Default.setImage("tplink", "symbols/TPLink.json");
將注冊的矢量圖片名稱設(shè)置到模型上:
var node = new ht.Node(), node.setImage("tplink"); dataModel.add(node);
甚至在最新版的HT中,已經(jīng)支持無需注冊,直接調(diào)用setImage(),傳入URL參數(shù)的方式(在我的Demo中就是使用的這種方法)。這種方法更加簡潔,但是如果許多場景都應(yīng)用到同一圖片時,還是建議用戶通過注冊的圖片的,避免多次修改URL:
node.setImage("symbols/TPLink.json");
好了,現(xiàn)在在瀏覽器中預(yù)覽你的HTML文檔,是不是有個TPLINK面板?
最后,怎么讓我們的指示燈閃爍起來呢?用HT開發(fā)的產(chǎn)品,要實現(xiàn)閃爍效果很簡單,因為HT預(yù)定于圖形組件默認就已與DataModel中的Data數(shù)據(jù)綁定,綁定的格式也很簡單,只需將以前的參數(shù)值用一個帶func屬性的對象替換即可,詳見HT for Web數(shù)據(jù)綁定手冊(http://www.hightopo.com/guide...)。在這里指示燈的閃爍實際上是visible屬性值變化產(chǎn)生的結(jié)果,所以我們只需要給visible屬性數(shù)據(jù)綁定,如下所示:
{ "type": "oval", "visible": { "func": "attr@visibility1" }, "shadow": true, "shadowColor": "rgba(208,240,2,0.35)", "background": "rgb(178,184,141)", "gradient": "radial.center", "gradientColor": "rgb(247,255,0)", "rect": [ 79, 53, 31, 32 ] },
setInterval(function(){ node.a("visibility1", !t_node.a("visibility1")); }, 400);
到這里,你已經(jīng)成功完成一個TPLINK面板的制作 (~ . ~),當(dāng)然還剩服務(wù)器的制作,這里就不再贅述,復(fù)雜TPLINK面板都完成了,服務(wù)器還遠嗎?
2、連線
大家也有注意到,我們的Demo中有兩條連線,那連線應(yīng)該怎么做呢?
HT默認提供的是直線和多點連線,但是在繪制流程圖、組織結(jié)構(gòu)圖和思維導(dǎo)圖等應(yīng)用還需要更多的連線類型, 詳情戳HT for Web連線類型手冊(http://www.hightopo.com/guide...)。
在我們的Demo中,兩條連接服務(wù)器和TP-LINK的曲線,均是使用自定義的新連線類型。
ht.Default.setEdgeType(type, func, mutual)函數(shù)可以用來自定義連線類型:
其中:
type:字符串類型的連線類型,對應(yīng)style的edge.type屬性;
fuc:函數(shù)類型,根據(jù)傳入?yún)?shù)(edge, gap, graphView, sameSourceWithFirstEdge)返回走線的走向信息;
edge:當(dāng)前連線對象; gap:多條連線成捆時,笨連線對象對應(yīng)中心連線的間距; graphView:當(dāng)前對應(yīng)的拓撲組件對象; sameSourceWithFirstEdge:boolean類型,該連線是否與同組的同一條連線同源;
返回值為{points:new ht.List(...),segments:new ht.List(...)}結(jié)構(gòu)的連線走向信息,segments的取值同上;
mutual:該參數(shù)決定連線是否影響起始或者結(jié)束節(jié)點上的所有連線,默認為false代表只影響同source和target的EdgeGroup中的連線。
具體實現(xiàn)時,我們需要再引入:
然后調(diào)用ht.Default.setEdgeType(type, func, mutual)函數(shù),代碼如下:
ht.Default.setEdgeType("line", function(edge){ var sourcePoint = edge.getSourceAgent().getPosition(), targetPoint = edge.getTargetAgent().getPosition(), points = new ht.List(); points.add(sourcePoint); points.add({ x: (sourcePoint.x + targetPoint.x)/2, y: (sourcePoint.y + targetPoint.y)/2 + 300 }); points.add(targetPoint); return { points: points, segments: new ht.List([1, 3]) }; });
創(chuàng)建一條新的連線時,注意這時候連線類型edge.type為我們自定義的連線類型‘line’:
var edge = new ht.Edge(); edge.setSource(startNode); edge.setTarget(endNode); edge.setLayer("edgeLayer"); edge.s({ "edge.type": "line", "edge.color": "#0A3791", "edge.width": 8, "edge.center": true }); dataModel.add(edge);
到這里連線已經(jīng)基本完成,還有一點,大家可能對setLayer()方法不是很熟悉,其實這個方法是用于設(shè)置連線和圖元的層級,因為默認的層級是edge在node之下,所以需要設(shè)置層級后,調(diào)用graphView的setLayers方法更改層級之間的關(guān)系:
graphView.setLayers(["nodeLayer", "edgeLayer"]);
若對自定義連線類型仍舊有疑問,可以戳例子(http://www.hightopo.com/guide...)加深了解。
3、流動
先來看看HT產(chǎn)品中流動的炫酷效果(戳地址(http://www.hightopo.com/guide...)可看詳情):
在我的Demo中兩條連線應(yīng)用了不同方式的流動,但是兩種方式需要ht.flow插件。這個插件在ht.Shape和ht.Edge類型上擴展了樣式控制流動效果,用戶可以通過ht.Shape.setStyle()和ht.Edge.setStyle()來操作這些樣式,下面簡單介紹幾種樣式:
1、flow值為true和false,控制此ht.Shape和ht.Edge是否可流動,默認為false;
2、flow.count,控制流動組的個數(shù),默認為1;
3、flow.step,控制流動的步進,默認為3;
4、flow.element.image,字符串類型,指定流動組元素的圖片,圖片須提前通過ht.Default.setImage()注冊;
....
等等,還有很多的樣式任你玩,詳情戳地址(http://www.hightopo.com/guide...);
這里必須要引入流動特效插件:
在這里,我們先將流動的圖片提前注冊:
ht.Default.setImage("arrow", "symbols/arrow.json");
第一種方式中,直接在連線edge上設(shè)置流動相關(guān)的屬性(做完后別忘了調(diào)用啟動流動的API),在這里通過設(shè)置flow.element.image屬性值為"arrow"的方式設(shè)置流動的圖片:
edge.setStyle({ "edge.type": "line", "edge.color": "#0A3791", "edge.width": 8, "edge.center": true, "flow": true, "flow.element.image": "arrow", "flow.element.count": 1, "flow.element.max": 30, "flow.element.autorotate": true }); raphView.enableFlow(40);//啟動流動;
刷新頁面,arrow在edge上流動起來了!可能還有人會疑問“如果我的流動組元素不是圖片,是圖元呢?”,沒錯,這就是第二種方式!
第二種方式,針對的是流動元素組是圖元的情況:
var flowNode = new ht.Node(); flowNode.setImage("arrow");
因為流動實際上是圖元的位置隨著時間發(fā)生了變化,所以,我們可以更改圖元的位置來控制它的流動,通過調(diào)用flow插件現(xiàn)成的API- - -calculateLength計算出流動線的長度length,然后改變當(dāng)前步進百分比currentPercentage,具體實現(xiàn)如下:
graphView.validate();//刷新; var length = graphView.calculateLength(edge),//流動線長度; step = 4, //步進單位像素; stepPercentage = step / length * 100, // 步進百分比; currentPercentage = 0; //當(dāng)前步進百分比; setInterval(function(){ var pos = graphView.getPercentPosition(edge, currentPercentage);//第二個參數(shù)為百分比,范圍0到100; flowNode.setPosition(pos.x, pos.y);//改變流動節(jié)點的位置; currentPercentage += stepPercentage; if (currentPercentage > 100) currentPercentage = 0; }, 400);
做完這些之后,刷新頁面,怎么仍舊沒有流動效果?
其實這里有一個坑,那就是在計算length之前,必須先調(diào)用graphView.validate(),為什么呢?為了提高效率,graphView并不是實時刷新,而是多個圖元發(fā)生改變后統(tǒng)一刷新,所以這里的graphView.validate()的功能是進行刷新graphView.
最后,附上Demo的源碼(http://www.hightopo.com/demo/...),希望大家不吝賜教。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/83078.html
摘要:今天我們以真實的設(shè)備面板為模型,完成設(shè)備面板的搭建,和指示燈的閃爍和圖元流動。在我們的中,兩條連接服務(wù)器和的曲線,均是使用自定義的新連線類型。 今天我們以真實的TP-LINK設(shè)備面板為模型,完成設(shè)備面板的搭建,和指示燈的閃爍和圖元流動。 先來目睹下最終的實現(xiàn)效果:http://www.hightopo.com/demo/... showImg(https://segmentf...
閱讀 1093·2021-10-12 10:11
閱讀 877·2019-08-30 15:53
閱讀 2286·2019-08-30 14:15
閱讀 2961·2019-08-30 14:09
閱讀 1197·2019-08-29 17:24
閱讀 972·2019-08-26 18:27
閱讀 1283·2019-08-26 11:57
閱讀 2146·2019-08-23 18:23