QuneeHTML5開發(fā)者指南中文版目錄TOC\h\h背景知識(shí)\h為什么選擇HTML5技術(shù)？\hHTML5<Canvas>\hCanvasvsSVG\h為什么選擇Canvas技術(shù)？\hGraph組件介紹\hQunee組件特性\h快速上手\h開發(fā)環(huán)境\h開發(fā)流程\h數(shù)據(jù)采集\h數(shù)據(jù)轉(zhuǎn)換\h數(shù)據(jù)呈現(xiàn)\h交互與操作\h圖形元素\h圖元基類\h圖元事件支持\h圖元屬性支持\h圖元父子關(guān)系\h添加UI組件\h節(jié)點(diǎn)圖元\h創(chuàng)建節(jié)點(diǎn)\h節(jié)點(diǎn)位置\h節(jié)點(diǎn)的拓?fù)鋵傩診h節(jié)點(diǎn)跟隨\h節(jié)點(diǎn)圖片\h圖片注冊(cè)\h節(jié)點(diǎn)文字\h節(jié)點(diǎn)樣式屬性\h連線圖元\h連線基本屬性\h連線拓?fù)潢P(guān)系\h連線外觀\h總線效果\h分組圖元\h分組樣式\h分組背景圖片\h子網(wǎng)類型\h圖元容器\h圖元管理\h事件處理\h選中管理容器\h按樹圖遍歷\h按圖遍歷\hGraph組件\hGraph基本功能\hGraph的圖層結(jié)構(gòu)\hGraph的坐標(biāo)系統(tǒng)\hGraph的圖元操作\h平移縮放操作\h界面交互\h交互事件類型\h添加交互監(jiān)聽\hGraph交互模式\hGraph#addCustomInteraction(interaction)\hGraph#interactionMode\h常用屬性與方法\h選中過濾、移動(dòng)過濾\h其他屬性與方法\h圖元默認(rèn)樣式表\h導(dǎo)航面板類型\h延遲繪制\h自動(dòng)布局\h彈簧布局\h樹形布局\h氣泡布局\h樣式列表\h常見問題QuneeforHTML5DeveloperGuide背景知識(shí)Web相關(guān)組織W3C-萬維網(wǎng)聯(lián)盟-\hWHATWG-網(wǎng)頁超文本技術(shù)工作小組-\hHTML5俠義的HTML5指HTML下一個(gè)主要的修訂版本，是W3C制定的標(biāo)準(zhǔn)，目前還在發(fā)展中，在HTML4.01和XHTML1.0標(biāo)準(zhǔn)基礎(chǔ)上，HTML5標(biāo)準(zhǔn)增加和修改了一些標(biāo)簽元素，其中多媒體相關(guān)的有<video>,<audio>,<canvas>，同時(shí)集成了SVG內(nèi)容，數(shù)據(jù)內(nèi)容的元素有<section>,<article>,<header>,<nav>,<menu>等，還提供了新的API，如2D繪圖，離線存儲(chǔ)，拖拽，通訊，瀏覽歷史管理，文件API，位置API等。更多HTML5的介紹，可參閱：\h/wiki/HTML5\h\h/html5/spec廣義的HTML5包括HTML,CSS和JavaScript在內(nèi)的一套技術(shù)組合，其目標(biāo)是減少瀏覽器對(duì)于插件的依賴，提供豐富的RIA（富客戶端）應(yīng)用。\h為什么選擇HTML5技術(shù)？\hHTML5<Canvas>\hCanvasvsSVG\h為什么選擇Canvas技術(shù)？Copyright?2016上?？崂浖邢薰維hanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page8QuneeforHTML5DeveloperGuide為什么選擇HTML5技術(shù)？以前富客戶端應(yīng)用主要通過插件技術(shù)實(shí)現(xiàn)，比如AdobeFlash,MicrosoftSilverlight,JavaApplet，都存在些問題（需要安裝插件，不支持移動(dòng)平臺(tái)等），相比之下HTML5的優(yōu)勢(shì)是：不需要安裝插件跨平臺(tái)，支持主流瀏覽器和移動(dòng)設(shè)備w3c的國(guó)際標(biāo)準(zhǔn)隨著技術(shù)的發(fā)展，主流瀏覽器對(duì)HTML5支持越來越完善，網(wǎng)頁不再只是展示文字和圖片，使用HTML5技術(shù)組合，可以實(shí)現(xiàn)更多的功能：實(shí)時(shí)通訊、本地存儲(chǔ)、圖形繪制，借助Canvas，SVG以及技術(shù)，CSS3可以實(shí)現(xiàn)豐富的圖形界面和動(dòng)畫有了這些技術(shù)的支撐，網(wǎng)頁中呈現(xiàn)專業(yè)的圖形組件成為了可能，QuneeforHTML5選擇技術(shù)，將這種可HTML5能性變?yōu)楝F(xiàn)實(shí)，降低了技術(shù)門檻，使得高效、、豐富動(dòng)態(tài)的圖形展示變的容易。Copyright?2016上?？崂浖邢薰維hanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page9QuneeforHTML5DeveloperGuideHTML5<Canvas><Canvas>是HTML5標(biāo)準(zhǔn)中新增的標(biāo)簽元素，在HTML5標(biāo)準(zhǔn)之前就已經(jīng)出現(xiàn)，最早由Apple的Safari瀏覽器引入，用于提供一組純粹的2D繪圖API，目前主流瀏覽器都已支持，QuneeforHTML5主要使用Canvas技術(shù)展示圖形界面。Canvas元素對(duì)應(yīng)的是HTMLCanvasElement類，繼承自標(biāo)準(zhǔn)的HTMLElement類型，與普通的網(wǎng)頁標(biāo)簽元素一樣，存在于HTMLDOM樹中，可通過CSS設(shè)置相應(yīng)的布局位置和樣式屬性，我們稱之為畫布元素，通過腳本語言可以在上面繪制2D圖形。使用Canvas技術(shù)，用到最多的類是CanvasRenderingContext2D，表示繪制上下文，相當(dāng)于Java2D中的java.awt.Graphics2D類，提供繪制的相關(guān)函數(shù)，如線條繪制，圖形填充，文字繪制，坐標(biāo)變化，縮放等等。Canvas相關(guān)類有十幾個(gè)，涵蓋了基本的2D繪圖操作，其提供的API比較底層，QuneeforHTML5內(nèi)核會(huì)用到這些API，并做抽象和封裝，提供更高級(jí)的圖形元素，使用Qunee開發(fā)應(yīng)用可以直接使用這些高級(jí)對(duì)象，而不需要使用那些底層的API，這會(huì)使開發(fā)變得容易。當(dāng)然如果你想更深入的定制，可以學(xué)習(xí)更多Canvas的底層API，可參閱下面的鏈接：\h/TR/2dcontext/\h/en/docs/HTML/Canvas\h/html/html5_canvas.aspCopyright?2016上?？崂浖邢薰維hanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page10QuneeforHTML5DeveloperGuideCanvasvsSVGHTML5中的2D圖形繪制技術(shù)Canvas和SVG是HTML5中主要的2D圖形技術(shù)，前者提供畫布標(biāo)簽和繪制API，后者是一整套獨(dú)立的矢量圖形語\h言，成為W3C標(biāo)準(zhǔn)已經(jīng)有十多年(2003.1至今)，總的來說，Canvas技術(shù)較新，從很小眾發(fā)展到廣泛接受，注重柵格圖像處理，SVG則歷史悠久，很早就成為國(guó)際標(biāo)準(zhǔn)，復(fù)雜，發(fā)展緩慢（AdobeSVGViewer近十年沒有大的更新）CanvasvsSVG<canvas>和<svg>都是HTML5推薦使用的圖形技術(shù)，Canvas基于像素，提供2D繪制函數(shù)，是一種HTML元素類型，依賴于HTML，只能通過腳本繪制圖形；SVG為矢量，提供一系列圖形元素（Rect,Path,Circle,Line…），還有完整的動(dòng)畫，事件機(jī)制，本身就能獨(dú)立使用，也可以嵌入到HTML中，SVG很早就成為了國(guó)際標(biāo)準(zhǔn)，目前的穩(wěn)定版本是1.1\h–/TR/SVG/，兩者的主要特點(diǎn)見下面的表格：SVG轉(zhuǎn)CanvasSVG是一種古老技術(shù)，有很多已有的SVG圖片、圖標(biāo)，這些資源我們也可以用到Canvas中，比如使用CanvasRenderingContext2D#drawImage()可以實(shí)現(xiàn)在Canvas中可以繪制SVG圖片，另外也有第三方類庫（\hcanvg.js）支持對(duì)SVG子元素進(jìn)行解析，并使用Canvas來繪制，如果你想將SVG文件轉(zhuǎn)換成Canvas代碼，可以使用\hSVG2Canvas在線工具Copyright?2016上?？崂浖邢薰維hanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page11QuneeforHTML5DeveloperGuideCopyright?2016上海酷利軟件有限公司ShanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page12QuneeforHTML5DeveloperGuide為什么選擇Canvas技術(shù)？根據(jù)兩者的不同特點(diǎn)，Canvas和SVG有各自的適用范圍Canvas適用場(chǎng)景Canvas提供的功能更原始，適合像素處理，動(dòng)態(tài)渲染和大數(shù)據(jù)量繪制SVG適用場(chǎng)景SVG功能更完善，適合靜態(tài)圖片展示，高保真文檔查看和打印的應(yīng)用場(chǎng)景QuneeforHTML產(chǎn)品定位QuneeforHTML產(chǎn)品定位于：大數(shù)據(jù)量，動(dòng)態(tài)渲染，靈活擴(kuò)展的圖形組件應(yīng)用場(chǎng)景，SVG無法滿足大數(shù)據(jù)量和像素處理的需求，所以Qunee最終選擇Canvas作為主要的圖形技術(shù)。Copyright?2016上?？崂浖邢薰維hanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page13QuneeforHTML5DeveloperGuideGraph組件介紹Qunee主要提供Graph組件，Graph中可以加入不同類型的圖元（Node,Edge,Group,ShapeNode,Text,Bus...），圖元可以配置不同的呈現(xiàn)樣式，或者掛載或者添加不同的UI元素（LabelUI,ImageUI...），通過組合和布局，實(shí)現(xiàn)豐富的呈現(xiàn)效果，滿足多種應(yīng)用場(chǎng)景：地圖-地鐵圖、統(tǒng)計(jì)地圖Qunee提供的豐富矢量圖形，對(duì)于點(diǎn)線之類數(shù)據(jù)的展現(xiàn)，能得心應(yīng)手得解決，可運(yùn)用于地鐵、管線這樣的應(yīng)用Qunee支持漫游交互、無極縮放、不限制坐標(biāo)范圍，這很適合地圖的呈現(xiàn)，加上多邊形豐富的樣式，可用于解決地圖背景、以及統(tǒng)計(jì)地圖之類的問題拓?fù)鋱D-社交網(wǎng)絡(luò)圖、網(wǎng)絡(luò)管理圖支持節(jié)點(diǎn)、連線、分組等圖元類型，具有良好的層次控制，支持上萬圖形元素，并且流暢操作，帶來輕快、高效的視覺體驗(yàn)，適合解決網(wǎng)狀數(shù)據(jù)的呈現(xiàn)與交互問題Copyright?2016上?？崂浖邢薰維hanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page14QuneeforHTML5DeveloperGuide其他-組織圖、思維導(dǎo)圖、流程圖借助強(qiáng)大的樹形布局器，可以解決樹形結(jié)構(gòu)數(shù)據(jù)的自動(dòng)布局問題，可運(yùn)用于組織圖、思維導(dǎo)圖等提供豐富的基本圖形與箭頭樣式，支持彎曲、正交等連線類型，加上包含關(guān)系的控制，可以解決流程圖之類的問題Copyright?2016上?？崂浖邢薰維hanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page15QuneeforHTML5DeveloperGuideQunee組件特性Qunee是一套優(yōu)雅、高效、輕量的Web圖形組件解決方案，我們采用了多種技術(shù)來實(shí)現(xiàn)這一目標(biāo)，并會(huì)不斷改善，Qunee可應(yīng)對(duì)絕大多數(shù)應(yīng)用場(chǎng)景，對(duì)于特定瀏覽器，通過定制代碼可以實(shí)現(xiàn)十萬數(shù)量級(jí)圖元的展示。雙緩存繪制與局部刷新Qunee使用Canvas技術(shù)，實(shí)現(xiàn)了雙緩存繪制和局部刷新，以保證界面的流暢，解決大數(shù)據(jù)量時(shí)的性能問題，可輕松呈現(xiàn)上萬圖元元素，平滑漫游，縮放和交互。圖論算法Qunee的節(jié)點(diǎn)連線關(guān)系采用了十字鏈表數(shù)據(jù)結(jié)構(gòu)，這有利于拓?fù)鋱D中的便利和分析，此外布局算法中也大量用到圖論算法，對(duì)于大數(shù)據(jù)時(shí)有幫助設(shè)計(jì)模式Qunee使用了成熟的MVP設(shè)計(jì)模式，對(duì)數(shù)據(jù)模型、UI呈現(xiàn)以及交互監(jiān)聽做了分離，優(yōu)化圖形架構(gòu)，實(shí)現(xiàn)高效的圖論模型和圖形展示，和靈活的擴(kuò)展機(jī)制跨平臺(tái)采用HTML5技術(shù)，避免了操作系統(tǒng)的限制，在所有支持HTML5的瀏覽器上都可以運(yùn)行，同樣支持移動(dòng)平臺(tái)，符合當(dāng)下應(yīng)用Web化的需求，避免程序的安裝，避免插件的安裝，一次開發(fā)，一處部署，就可以覆蓋全部平臺(tái)。專注圖形技術(shù)Qunee專注于圖形組件技術(shù)，我們的核心模塊包含：圖論模型、自動(dòng)布局、圖形展示與用戶交互，其他輔助的模塊（通訊，應(yīng)用框架，風(fēng)格樣式），以及各個(gè)特殊應(yīng)用場(chǎng)景的擴(kuò)展類會(huì)單獨(dú)提供，這樣可以保證核心包的輕巧，和擴(kuò)展的靈活。Copyright?2016上海酷利軟件有限公司ShanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page16QuneeforHTML5DeveloperGuide快速上手本章節(jié)介紹QuneeforHTML5開發(fā)入門，以多個(gè)示例，一步一步分解介紹開發(fā)流程和注意事項(xiàng)。\h開發(fā)環(huán)境\h開發(fā)流程Copyright?2016上?？崂浖邢薰維hanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page17QuneeforHTML5DeveloperGuide開發(fā)環(huán)境瀏覽器支持GoogleChrome（推薦）,Firefox,Safari,IE9+推薦開發(fā)工具HTML為文本格式，所以開發(fā)工具有很多選擇，即可以是簡(jiǎn)單的文本編輯器，可以使用復(fù)雜的可視化編輯工具，推薦下面一些編輯器：輕量編輯器：Brackets,SublimeText2,TextMate2集成開發(fā)環(huán)境：JetbrainsWebstorm（推薦）,Netbeans7,EclipseWTP調(diào)試工具：GoogleChrome（推薦）,Safari,Firefox申請(qǐng)Qunee開發(fā)包QuneeforHTML5開發(fā)包可以在線申請(qǐng)，訪問官方網(wǎng)站:\h,點(diǎn)擊試用，或者直接發(fā)送郵件到support@，注明公司和個(gè)人信息，以便我們更好的反饋和服務(wù)。開始開發(fā)接下來就可以開始開發(fā)了，可以從\hHelloQunee示例開始入手，如果已經(jīng)學(xué)習(xí)過這個(gè)示例，可以繼續(xù)閱讀下面的文檔Copyright?2016上海酷利軟件有限公司ShanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page18QuneeforHTML5DeveloperGuide開發(fā)流程Qunee是一種前端技術(shù)，不涉足后臺(tái)服務(wù)和數(shù)據(jù)通訊，使用Qunee開發(fā)應(yīng)用通常按下面的流程：數(shù)據(jù)采集-->數(shù)據(jù)轉(zhuǎn)換-->數(shù)據(jù)呈現(xiàn)-->交互監(jiān)聽-->數(shù)據(jù)操作-->數(shù)據(jù)提交，其中與Qunee直接相關(guān)的是中間的四部分。下面我們將模擬這些流程，完成一個(gè)示例\h數(shù)據(jù)采集\h數(shù)據(jù)轉(zhuǎn)換\h數(shù)據(jù)呈現(xiàn)\h交互與操作完整示例代碼下載\hwork-process.zipCopyright?2016上?？崂浖邢薰維hanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page19QuneeforHTML5DeveloperGuide數(shù)據(jù)采集架設(shè)后臺(tái)數(shù)據(jù)服務(wù)，通過數(shù)據(jù)庫，Web服務(wù)（servlet,php,websocket,...）技術(shù)提供后臺(tái)數(shù)據(jù)服務(wù)，轉(zhuǎn)換成XML，JSON，文本或者二進(jìn)制格式相應(yīng)到前端，前端通過web通訊技術(shù)（ajax,websocket...）獲取數(shù)據(jù)，交給JavaScript引擎來處理。后臺(tái)數(shù)據(jù)通常使用JSON數(shù)據(jù)格式，比如下面./data-server鏈接的內(nèi)容{"nodes":[{"name":"A","x":-100,"y":-50,"id":1},{"name":"B","id":2}],"edges":[{"name":"Edge","from":1,"to":2}]}請(qǐng)求數(shù)據(jù)可通過AJAX或者Websocket請(qǐng)求后臺(tái)數(shù)據(jù)，通常使用AJAXAJAX獲取后臺(tái)數(shù)據(jù)示例functionrequest(url,params,callback,callbackError){try{varreq=newXMLHttpRequest();req.open('GET',encodeURI(url));req.onreadystatechange=function(e){if(req.readyState!=4){return;}if(200==req.status){varcode=req.responseText;if(code&&callback){callback(req.responseText);}return;}else{if(callbackError){callbackError();}}}req.send(params);}catch(error){if(callbackError){callbackError();}}}使用request("./data-server","",onDataCollected);Copyright?2016上?？崂浖邢薰維hanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page20QuneeforHTML5DeveloperGuideWebsocket技術(shù)對(duì)Web服務(wù)器和瀏覽器都有要求，尚未普遍支持和應(yīng)用Copyright?2016上?？崂浖邢薰維hanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page21QuneeforHTML5DeveloperGuide數(shù)據(jù)轉(zhuǎn)換前端拿到數(shù)據(jù)后，首先需要轉(zhuǎn)換成Javascript所支持的數(shù)據(jù)格式，以便數(shù)據(jù)屬性的讀取，比如JSON格式的文本數(shù)據(jù)，可以通過JSON#parse(...)進(jìn)行解析，對(duì)于XML格式的文本可以通過DOMParse#parseFromString轉(zhuǎn)換成XML對(duì)象轉(zhuǎn)換成JS對(duì)象繼續(xù)上面的示例，將文本解析成JSON對(duì)象functiononDataCollected(txt){varjson=JSON.parse(txt);translateToQuneeElements(json);}轉(zhuǎn)換成Qunee圖元Qunee圖形組件中的圖形都有對(duì)應(yīng)的模型對(duì)象，稱為Qunee圖元，用戶數(shù)據(jù)需要先轉(zhuǎn)換成這種元素，才能在Qunee圖形組件中展示，Qunee元素有多種類型，支持豐富的呈現(xiàn)樣式和擴(kuò)展方式，不同的數(shù)據(jù)根據(jù)其顯示意圖轉(zhuǎn)換成不同類型的Qunee圖元，并設(shè)置相應(yīng)的圖形樣式，特殊展示效果的可以通過UI擴(kuò)展來實(shí)現(xiàn)將JSON對(duì)象轉(zhuǎn)換成Qunee元素，并添加到圖形容器functiontranslateToQuneeElements(json,graph){varmap={};if(json.nodes){Q.forEach(json.nodes,function(data){varnode=graph.createNode(,data.x||0,data.y||0);node.set("data",data);map[data.id]=node;});}if(json.edges){Q.forEach(json.edges,function(data){varfrom=map[data.from];varto=map[data.to];if(!from||!to){return;}varedge=graph.createEdge(,from,to);edge.set("data",data);},graph);}}Copyright?2016上?？崂浖邢薰維hanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page22QuneeforHTML5DeveloperGuide數(shù)據(jù)呈現(xiàn)數(shù)據(jù)轉(zhuǎn)換成Qunee元素對(duì)象，添加到圖形組件后，便可以查看呈現(xiàn)效果了：vargraph=newQ.Graph("canvas");functiononDataCollected(txt){varjson=JSON.parse(txt);translateToQuneeElements(json);graph.moveToCenter();}functiontranslateToQuneeElements(json){if(json.nodes){Q.forEach(json.nodes,toQuneeNode);}if(json.edges){Q.forEach(json.edges,toQuneeEdge);}}request("./data-server","",onDataCollected);運(yùn)行效果自動(dòng)布局此外，對(duì)于沒有位置信息的拓?fù)鋽?shù)據(jù)，通常可以使用\h自動(dòng)布局，以完成節(jié)點(diǎn)的自動(dòng)分布比如使用\h彈簧布局varlayouter=newQ.SpringLayouter(graph);layouter.start();Copyright?2016上海酷利軟件有限公司ShanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page23QuneeforHTML5DeveloperGuide交互與操作實(shí)際應(yīng)用需要響應(yīng)用戶交互，Qunee默認(rèn)提供了一組交互模式，可以漫游、縮放、框選、移動(dòng)、雙擊響應(yīng)等，用戶也可以根據(jù)業(yè)務(wù)情況定制交互，添加鼠標(biāo)鍵盤監(jiān)聽有多種方式，最簡(jiǎn)單的一種是Graph#on***，比如監(jiān)聽雙擊事件：graph.ondblclick=function(evt){...}數(shù)據(jù)操作用戶交互時(shí)，會(huì)對(duì)數(shù)據(jù)進(jìn)行修改，直接對(duì)Qunee元素設(shè)置屬性或者樣式，界面會(huì)自動(dòng)實(shí)時(shí)刷新，呈現(xiàn)修改后的效果，比如雙擊修改元素名稱，可以參照下面的代碼：示例-雙擊圖形元素，更改元素名稱graph.ondblclick=function(evt){varnode=graph.getElementByMouseEvent(evt);if(node){varnewName=prompt("NewName:");if(newName){=newName;}}}數(shù)據(jù)提交前端界面對(duì)數(shù)據(jù)的修改，通常需要提交到后臺(tái)，借助各種前后臺(tái)通訊技術(shù)（如AJAX，WebSocket）將需要修改的信息提交給后臺(tái)服務(wù)器，收到結(jié)果后可以對(duì)前端對(duì)應(yīng)的數(shù)據(jù)元素進(jìn)行更新（見數(shù)據(jù)操作），或者重復(fù)數(shù)據(jù)采集的流程。完整示例代碼下載\hwork-process.zipCopyright?2016上?？崂浖邢薰維hanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page24QuneeforHTML5DeveloperGuide圖形元素Qunee中提供了一系列圖元類型，包括圖元基類，節(jié)點(diǎn)，連線以及擴(kuò)展類型，具有唯一ID，支持事件監(jiān)聽，樣式屬性以及父子關(guān)系屬性，不同的類型有各自的用途和特性下面詳細(xì)介紹各種圖元類型\h圖元基類\h節(jié)點(diǎn)圖元\h連線圖元\h分組圖元\h子網(wǎng)類型Copyright?2016上?？崂浖邢薰維hanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page25QuneeforHTML5DeveloperGuide圖元基類圖形元素基類為：Q.Element，簡(jiǎn)稱圖元，提供了基本的圖元支持，提供了事件監(jiān)聽、屬性支持、父子關(guān)系等基本功能，在此之上提供了兩種基本圖元：Q.Node，Q.Edge，分別用于描述節(jié)點(diǎn)和連線，在圖論中Node代表點(diǎn)，Edge代表邊，節(jié)點(diǎn)通過連線相連，兩個(gè)節(jié)點(diǎn)之間可以存在多條連線，此外還有些擴(kuò)展類型：Q.Group,Q.Text,Q.ShapeNode等下面介紹圖元的基本特性\h圖元事件支持\h圖元屬性支持\h圖元父子關(guān)系\h添加UI組件Copyright?2016上?？崂浖邢薰維hanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page26QuneeforHTML5DeveloperGuide圖元事件支持每個(gè)圖元對(duì)象都可以設(shè)置一個(gè)監(jiān)聽器（#listener），通過該監(jiān)聽器可以處理圖元相關(guān)的事件，比如圖元屬性變化事件，孩子變化事件等，此外圖元事件通常分兩步，”beforeEvent”事件在事件處理之前調(diào)用，如果返回false，則停止事件執(zhí)行，”onEvent”在事件執(zhí)行后調(diào)用。事件相關(guān)屬性和方法#listener-監(jiān)聽器，注意如果圖元加入到圖元容器（GraphModel）中，則監(jiān)聽器統(tǒng)一由圖元容器處理，不必直接在圖元對(duì)象上設(shè)置監(jiān)聽器#beforeEvent(evt)-事件處理前#onEvent(evt)-事件處理后示例下面是設(shè)置孩子次序的默認(rèn)代碼，可以看出內(nèi)部事件的處理過程setChildIndex:function(child,index){if(!this._children||!this._children.length){returnfalse;}varoldIndex=this._children.indexOf(child);if(oldIndex<0||oldIndex==index){returnfalse;}varevent=newChildIndexChangeEvent(this,child,oldIndex,index);if(this.beforeEvent(event)===false){returnfalse;}if(this._children.remove(child)){this._children.add(child,index);}this.onEvent(event);returntrue;}Copyright?2016上海酷利軟件有限公司ShanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page27QuneeforHTML5DeveloperGuide圖元屬性支持除了JavaScript支持的直接屬性設(shè)置（通過點(diǎn)操作符或者中括號(hào)操作符，如=‘qunee’;）外，對(duì)圖元對(duì)象增加了兩種屬性設(shè)置方式：客戶屬性：通過get/set函數(shù)獲取和設(shè)置#get(key)/#set(key,value)樣式屬性：通過getStyle/setStyle進(jìn)行獲取與設(shè)置#getStyle(name)/#setStyle(name,style)圖元的三類屬性示例設(shè)置連線的文本標(biāo)簽位置，并設(shè)置用戶屬性u(píng)serId為“100”：edge.setStyle(Q.Styles.LABEL_POSITION,Q.Position.CENTER_TOP);edge.set(‘userId’,‘100’);Copyright?2016上?？崂浖邢薰維hanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page28QuneeforHTML5DeveloperGuide圖元父子關(guān)系圖元對(duì)象支持父子關(guān)系，可以添加和刪除孩子，或者更改父節(jié)點(diǎn)，通過父子關(guān)系，圖元在圖元容器中形成一個(gè)樹形圖的關(guān)系#children-孩子集合#parent-父節(jié)點(diǎn)#addChild-添加孩子#clearChildren-清除孩子節(jié)點(diǎn)#forEachChild-遍歷孩子節(jié)點(diǎn)#getChildAt-獲取孩子節(jié)點(diǎn)#getChildIndex-獲取孩子的次序號(hào)示例設(shè)置節(jié)點(diǎn)的父子關(guān)系varnode=graph.createNode();varchild=graph.createNode("child");child.parent=node;//或者使用#addChild(...)//node.addChild(child);Copyright?2016上海酷利軟件有限公司ShanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page29QuneeforHTML5DeveloperGuide添加UI組件外觀上看，每個(gè)圖元由一個(gè)主體和多個(gè)孩子組件構(gòu)成，默認(rèn)節(jié)點(diǎn)呈現(xiàn)為一個(gè)圖標(biāo)和文字，這里的圖標(biāo)就是節(jié)點(diǎn)的主體，對(duì)于連線主體則為一條路徑。掛載孩子組件除了默認(rèn)的圖形元素外，使用#addUI(...)方法，可以掛載更多孩子組件，每個(gè)組件可表示特定的信息，將圖元屬性與孩子組件屬性相關(guān)聯(lián)，可實(shí)現(xiàn)數(shù)據(jù)的聯(lián)動(dòng)效果#addUI-添加子組件示例添加文本標(biāo)簽到節(jié)點(diǎn)，并將文本標(biāo)簽的內(nèi)容和字體顏色與節(jié)點(diǎn)用戶屬性相綁定，通過修改節(jié)點(diǎn)屬性來改變文本的內(nèi)容和顏色varnodeWithLabels=graph.createNode("NodewithLabels",0,-110);varlabel2=newQ.LabelUI();label2.position=Q.Position.CENTER_TOP;label2.anchorPosition=Q.Position.CENTER_BOTTOM;label2.border=1;label2.padding=newQ.Insets(2,5);label2.showPointer=true;label2.offsetY=-10;label2.backgroundColor=Colors.yellow;label2.fontSize=16;label2.fontStyle="italic100";nodeWithLabels.addUI(label2,[{property:"label2",propertyType:Q.Consts.PROPERTY_TYPE_CLIENT,bindingProperty:"data"},{property:"label2.color",propertyType:Q.Consts.PROPERTY_TYPE_CLIENT,bindingProperty:"color"}]);nodeWithLabels.set("label2","anotherlabel");nodeWithLabels.set("label2.color",Colors.blue);效果Copyright?2016上?？崂浖邢薰維hanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page30QuneeforHTML5DeveloperGuide擴(kuò)展孩子組件通過擴(kuò)展孩子組件可以實(shí)現(xiàn)更豐富的效果，比如定制一個(gè)柱狀圖，掛載到節(jié)點(diǎn)，表示CPU占有率，或者掛載告警冒泡標(biāo)示節(jié)點(diǎn)的狀態(tài)\hHTML5實(shí)現(xiàn)監(jiān)控圖在線演示：MonitoringDemoCopyright?2016上海酷利軟件有限公司ShanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page31QuneeforHTML5DeveloperGuide節(jié)點(diǎn)圖元節(jié)點(diǎn)圖元（Q.Node）圖論中的點(diǎn)對(duì)象，實(shí)際應(yīng)用中可代表拓?fù)鋱D中的設(shè)備、流程圖中的步驟，社交網(wǎng)絡(luò)圖中的人、地圖中的區(qū)塊和點(diǎn)\h創(chuàng)建節(jié)點(diǎn)\h節(jié)點(diǎn)位置\h節(jié)點(diǎn)的拓?fù)鋵傩診h節(jié)點(diǎn)跟隨\h節(jié)點(diǎn)圖片\h節(jié)點(diǎn)文字\h節(jié)點(diǎn)樣式屬性Copyright?2016上?？崂浖邢薰維hanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page32QuneeforHTML5DeveloperGuide創(chuàng)建節(jié)點(diǎn)通常使用下面的代碼創(chuàng)建節(jié)點(diǎn)：varnode=graph.createNode(“nodename”,100,100);也可以通過構(gòu)造函數(shù)創(chuàng)建節(jié)點(diǎn)varnode=newQ.Node();=“nodename”;node.x=100;node.y=100;graph.graphModel.add(node);設(shè)置節(jié)點(diǎn)屬性和樣式，支持各種矢量或者柵格圖片和動(dòng)畫，支持路徑和形狀，支持不同的位置和掛載點(diǎn)，支持節(jié)點(diǎn)旋轉(zhuǎn)，可以設(shè)置顯示層次，能添加多個(gè)孩子組件，從而使節(jié)點(diǎn)表現(xiàn)出豐富的呈現(xiàn)效果Copyright?2016上海酷利軟件有限公司ShanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page33QuneeforHTML5DeveloperGuide節(jié)點(diǎn)位置節(jié)點(diǎn)的位置屬性#location-坐標(biāo)位置#rotate-旋轉(zhuǎn)角度#zIndex-圖層屬性，用以控制圖元的顯示層次，數(shù)值高的顯示在上層#anchorPosition-掛載點(diǎn)位置，可用于控制節(jié)點(diǎn)的對(duì)齊方式，同樣的位置坐標(biāo)，不同的掛載點(diǎn)位置呈現(xiàn)不同的效果，默認(rèn)為節(jié)點(diǎn)圖片的中心掛載點(diǎn)位置示例相同位置，不同掛載點(diǎn)的節(jié)點(diǎn)varnode=graph.createNode("Right");node.anchorPosition=Q.Position.LEFT_TOP;node=graph.createNode("Left");node.anchorPosition=Q.Position.RIGHT_TOP;node=graph.createNode("TOP");node.anchorPosition=Q.Position.CENTER_BOTTOM;運(yùn)行效果：示例創(chuàng)建節(jié)點(diǎn)，并設(shè)置指定位置，旋轉(zhuǎn)角度和掛載點(diǎn)位置Copyright?2016上?？崂浖邢薰維hanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page34QuneeforHTML5DeveloperGuidevardefaultNode=graph.createNode("DefaultNode");varnode=graph.createNode("Node");node.location=newQ.Point(100,100);node.rotate=Math.PI/3;node.anchorPosition=Q.Position.LEFT_TOP;運(yùn)行效果：Copyright?2016上海酷利軟件有限公司ShanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page35QuneeforHTML5DeveloperGuide節(jié)點(diǎn)的拓?fù)鋵傩赃B接到圖中的節(jié)點(diǎn)通過連線相連形成拓?fù)潢P(guān)系，拓?fù)鋱D中的節(jié)點(diǎn)包含與之相連的連線信息，以及兩點(diǎn)之間的所有連線情況#edgeCount-與該節(jié)點(diǎn)相連的連線數(shù)量#forEachEdge()-遍歷所有與該節(jié)點(diǎn)相連的連線#forEachInEdge()-遍歷所有連入該節(jié)點(diǎn)的連線#forEachOutEdge()-遍歷所有從該節(jié)點(diǎn)連出的連線#getEdgeBundle(node)-獲取指定節(jié)點(diǎn)與該節(jié)點(diǎn)之間的連線集合示例創(chuàng)建兩個(gè)節(jié)點(diǎn)和三條連線，獲取兩節(jié)點(diǎn)之間的連線數(shù)量vara=graph.createNode('A');varb=graph.createNode('B');graph.createEdge(a,b);graph.createEdge(a,b);graph.createEdge(a,b);alert(a.getEdgeBundle(b).edges.length);運(yùn)行結(jié)果顯示為“3”Copyright?2016上?？崂浖邢薰維hanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page36QuneeforHTML5DeveloperGuide節(jié)點(diǎn)跟隨節(jié)點(diǎn)（A）可以跟隨另一個(gè)節(jié)點(diǎn)（B）移動(dòng)而移動(dòng)，這種情況下，B節(jié)點(diǎn)稱為宿主節(jié)點(diǎn)，A節(jié)點(diǎn)稱為跟隨節(jié)點(diǎn)host-宿主節(jié)點(diǎn)addFollower-添加跟隨節(jié)點(diǎn)clearFollowers-清除跟隨節(jié)點(diǎn)示例設(shè)置節(jié)點(diǎn)A跟隨Host，節(jié)點(diǎn)B跟隨Avarhost=graph.createNode("Host");vara=graph.createNode("AfollowHost",-50,50);a.host=host;varb=graph.createNode("BfollowA",50,50);b.host=a;運(yùn)行效果：Copyright?2016上?？崂浖邢薰維hanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page37QuneeforHTML5DeveloperGuide節(jié)點(diǎn)圖片節(jié)點(diǎn)圖片在圖形界面中，節(jié)點(diǎn)通常表現(xiàn)為一個(gè)圖標(biāo)和文本標(biāo)簽，其中圖標(biāo)為節(jié)點(diǎn)的主體，文本標(biāo)簽是附屬組件，節(jié)點(diǎn)的主體不僅支持圖標(biāo)（靜態(tài)圖片），還支持Canvas代碼，GIF動(dòng)畫，SVG，矢量圖形（Q.Path）等設(shè)置節(jié)點(diǎn)圖片：Q.Node#image-節(jié)點(diǎn)主體示例設(shè)置GIF圖標(biāo)為節(jié)點(diǎn)主體varnodeWithGIF=graph.createNode("NodewithGIF\nnotsupportIE",120,110);nodeWithGIF.image="./images/sheep.gif";運(yùn)行效果：內(nèi)置圖標(biāo)下面是所有Qunee的內(nèi)置圖標(biāo)，使用的是Canvas代碼，名稱都以'Q-'為前綴vargraph=newQ.Graph('canvas');graph.moveToCenter();varimages=Q.getAllImages();varx=0,y=0;images.forEach(function(image){graph.createNode(image,x,y).image=image;x+=100;})運(yùn)行效果如下Canvas代碼圖標(biāo)-推薦Qunee推薦使用Canvas代碼作為圖標(biāo)，有兩個(gè)優(yōu)點(diǎn)：支持矢量；同步加載。Qunee內(nèi)置圖標(biāo)都是采用這種方式，下面具體來看如何制作這樣的圖標(biāo)Copyright?2016上?？崂浖邢薰維hanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page38QuneeforHTML5DeveloperGuide制作Canvas代碼圖標(biāo)可以使用\hSVG2Canvas制作Canvas代碼圖標(biāo)1、制作SVG圖標(biāo)首先讓美工使用AdobeIllustrator(AI)或者類似工具制作矢量圖標(biāo)，并導(dǎo)出SVG格式文件2、SVG轉(zhuǎn)換成Canvas代碼使用Chrome或者Safari瀏覽器，訪問\hSVG2Canvas-/svg2canvas/，將SVG文件拖拽到左側(cè)的虛線框，稍等片刻，可以在右側(cè)文本框中看到生成的Canvas代碼，中間下方為Qunee中使用這些代碼作為節(jié)點(diǎn)圖標(biāo)的效果生成的代碼結(jié)構(gòu)和使用Copyright?2016上?？崂浖邢薰維hanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page39QuneeforHTML5DeveloperGuide3、在Qunee中使用將文本框中生成的代碼保存成js文件，比如SVGIcons.js，并在html文件中引入，使用示例：Copyright?2016上?？崂浖邢薰維hanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page40QuneeforHTML5DeveloperGuide<bodystyle="margin:0px"><divstyle="position:absolute;width:100%;top:0px;bottom:0px;"id="canvas"></div><scriptsrc="/lib/qunee-min.js"></script><scriptsrc="SVGIcons.js"></script><script>vargraph=newQ.Graph('canvas');graph.moveToCenter();varx=0,y=0;for(varnameinSVGIcons){varnode=graph.createNode(name.substring(0,name.indexOf('.svg')),x,y);node.image=name;//node.setStyle(Q.Styles.RENDER_COLOR,Q.randomColor())x+=100;if(x>600){x=0;y+=100;}}</script></body>運(yùn)行效果使用SVG矢量圖片SVG做圖標(biāo)能夠?qū)崿F(xiàn)完美的矢量效果，縮放不失真注意，在IE瀏覽器中，可以在Canvas中繪制SVG圖片，但是無法獲取SVG圖片的像素信息，從而導(dǎo)致無法對(duì)圖片染色，也無法尋找節(jié)點(diǎn)邊緣，所以Qunee推薦將SVG文件轉(zhuǎn)換成Canvas代碼后使用示例vargraph=newQ.Graph("canvas");varsvg=graph.createNode("SVGLogo");svg.image='SVG_logo.svg';Copyright?2016上海酷利軟件有限公司ShanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page41QuneeforHTML5DeveloperGuide運(yùn)行效果定制圖標(biāo)繪制支持圖標(biāo)的完全定制，可以使用2D函數(shù)，繪制自己想要的效果示例，設(shè)置定制圖標(biāo)為節(jié)點(diǎn)主體varcustomDraw={width:100,height:100,draw:function(g,scale){g.beginPath();g.rect(0,0,100,100);g.fillStyle=Q.toColor(0xCC2898E0);g.fill();g.lineWidth=10;g.strokeStyle='#DDD';g.stroke();}}varnode=graph.createNode("customshape");node.image=customDraw;運(yùn)行界面：Copyright?2016上?？崂浖邢薰維hanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page42QuneeforHTML5DeveloperGuide形狀做圖標(biāo)也可以使用路徑作為節(jié)點(diǎn)主體，通過多個(gè)控制點(diǎn)，勾勒出節(jié)點(diǎn)的形狀和范圍示例定制路徑作為節(jié)點(diǎn)主體varnodeShape=graph.createNode("CustomShape",240,110);varcustomShape=newQ.Path();customShape.moveTo(20,-50);customShape.lineTo(100,-50);customShape.lineTo(100,50);customShape.quadTo(20,50,20,20);nodeShape.image=customShape;nodeShape.setStyle(Q.Styles.SHAPE_STROKE,4);nodeShape.setStyle(Q.Styles.SHAPE_STROKE_STYLE,Colors.blue);nodeShape.setStyle(Q.Styles.LAYOUT_BY_PATH,true);nodeShape.size={width:100,height:-1};運(yùn)行界面：圖片尺寸可以設(shè)置圖片尺寸，支持按等比縮放，對(duì)于矢量圖片，調(diào)整圖片尺寸不會(huì)導(dǎo)致圖片失真，而對(duì)于柵格圖片，也可以通過縮小圖片尺寸，保證顯示的清晰。#size-尺寸，可用于設(shè)置節(jié)點(diǎn)圖片尺寸，如果只設(shè)置寬度，則高度按圖片等比縮放為節(jié)點(diǎn)選擇高清圖片，然后設(shè)置較小尺寸，可以實(shí)現(xiàn)界面縮放時(shí)，圖片依舊清晰，比如選擇256像素寬度的圖片，設(shè)置節(jié)點(diǎn)尺寸為64，則界面放大四倍時(shí)，圖片依然清晰示例設(shè)置節(jié)點(diǎn)名稱，設(shè)置矢量圖標(biāo)，并指定寬度為100，等比例放大：varhello=graph.createNode("Hello\nNode");hello.image=Q.Graphs.server;hello.size={width:100};呈現(xiàn)：Copyright?2016上?？崂浖邢薰維hanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page43QuneeforHTML5DeveloperGuideCopyright?2016上?？崂浖邢薰維hanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page44QuneeforHTML5DeveloperGuide圖片注冊(cè)Qunee中可以通過圖片注冊(cè)的方式給資源設(shè)置一個(gè)名字，然后通過這個(gè)名字來設(shè)置，有利于數(shù)據(jù)的序列化和資源管理注冊(cè)圖片資源key為資源名稱，data為圖片內(nèi)容，可以是圖片URL，Path對(duì)象或者是定制的繪制函數(shù)，參見\h節(jié)點(diǎn)圖片Q.registerImage=function(key,data){};使用圖片注冊(cè)后，就可以使用圖片名稱來設(shè)置節(jié)點(diǎn)的圖片屬性示例vargraph=newQ.Graph("canvas");Q.registerImage('logo','../demos/images/logo.svg');varlogo=graph.createNode('Logo');logo.image='logo';運(yùn)行效果內(nèi)置圖標(biāo)Q.Graphs中內(nèi)置了一些圖標(biāo)，可以通過Q-XXX的名稱訪問，例如node.image='Q-server';全部的內(nèi)置圖標(biāo)如下Copyright?2016上海酷利軟件有限公司ShanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page45QuneeforHTML5DeveloperGuidevarx=-300;for(varninQ.Graphs){if(Q.Graphs[n].draw){varnode=graph.createNode('Q-'+n,x,100);node.image='Q-'+n;x+=100;}}運(yùn)行效果內(nèi)置圖形Q.Shapes中定義了一些內(nèi)置圖形，可以用來作為圖標(biāo)varx=-300;vary=200;varshapes=Q.Shapes.getAllShapes(60,60);for(varninshapes){varnode=graph.createNode(n,x,y);node.image=shapes[n];x+=100;if(x>300){x=-300;y+=100;}}運(yùn)行效果Copyright?2016上海酷利軟件有限公司ShanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page46QuneeforHTML5DeveloperGuideCopyright?2016上?？崂浖邢薰維hanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page47QuneeforHTML5DeveloperGuide節(jié)點(diǎn)文字默認(rèn)節(jié)點(diǎn)由圖片和文本標(biāo)簽組成，其中文本標(biāo)簽為節(jié)點(diǎn)的name屬性，支持換行，通過設(shè)置LABEL相關(guān)樣式，可以更改字體大小、顏色以及文本標(biāo)簽背景效果文本樣式示例，設(shè)置文本標(biāo)簽樣式，實(shí)現(xiàn)漸變背景和冒泡效果varnodeWithLabel=graph.createNode("Nodewith\nLabel",-120,-110);nodeWithLabel.setStyle(Q.Styles.LABEL_OFFSET_Y,-10);nodeWithLabel.setStyle(Q.Styles.LABEL_POSITION,Q.Position.CENTER_TOP);nodeWithLabel.setStyle(Q.Styles.LABEL_ANCHOR_POSITION,Q.Position.CENTER_BOTTOM);nodeWithLabel.setStyle(Q.Styles.LABEL_BORDER,1);nodeWithLabel.setStyle(Q.Styles.LABEL_POINTER,true);nodeWithLabel.setStyle(Q.Styles.LABEL_PADDING,newQ.Insets(2,5));nodeWithLabel.setStyle(Q.Styles.LABEL_BACKGROUND_GRADIENT,Q.Gradient.LINEAR_GRADIENT_VERTICAL);運(yùn)行效果：多個(gè)文本標(biāo)簽通過添加孩子組件可以實(shí)現(xiàn)多個(gè)文本標(biāo)簽，每個(gè)文本標(biāo)簽可放置在不同的位置，并設(shè)置不同的樣式和信息示例為節(jié)點(diǎn)增加一個(gè)描述文本標(biāo)簽，放置在節(jié)點(diǎn)后面Copyright?2016上?？崂浖邢薰維hanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page48QuneeforHTML5DeveloperGuidevargraph=newQ.Graph('canvas');functioncreateTextWithDescription(text,description,x,y){vartext=graph.createText(text,x,y);text.setStyle(Q.Styles.LABEL_BACKGROUND_COLOR,"#2898E0");text.setStyle(Q.Styles.LABEL_BACKGROUND_GRADIENT,newQ.Gradient(Q.Consts.GRADIENT_TYPE_LINEAR,['#00d4f9','#1ea6e6'],null,Math.PI/2));text.setStyle(Q.Styles.LABEL_COLOR,"#FFF");text.setStyle(Q.Styles.LABEL_BORDER,0.5);text.setStyle(Q.Styles.LABEL_PADDING,4);text.setStyle(Q.Styles.LABEL_BORDER_STYLE,"#1D4876");text.setStyle(Q.Styles.LABEL_RADIUS,0);text.setStyle(Q.Styles.LABEL_SIZE,newQ.Size(60,25));text.setStyle(Q.Styles.SELECTION_COLOR,"#0F0");varlabel1=newQ.LabelUI();label1.border=0.5;label1.borderColor="#DDD";label1.borderRadius=0;label1.size=newQ.Size(150,25);label1.padding=4;label1.alignPosition=Q.Position.LEFT_MIDDLE;label1.position=Q.Position.RIGHT_MIDDLE;label1.anchorPosition=Q.Position.LEFT_MIDDLE;text.addUI(label1,[{bindingProperty:"data",property:"description",propertyType:Q.Consts.PROPERTY_TYPE_CLIENT}]);text.set("description",description);returntext;}vartext=createTextWithDescription("TEXT","描述");vara=graph.createNode("HELLO",-100,-50);graph.createEdge(a,text);運(yùn)行效果Copyright?2016上海酷利軟件有限公司ShanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page49QuneeforHTML5DeveloperGuide節(jié)點(diǎn)樣式屬性節(jié)點(diǎn)支持背景顏色，漸變，邊框，字體顏色等樣式屬性，可通過Node#setStyle()\h進(jìn)行設(shè)置，更多可參閱圖元樣\h式列表示例設(shè)置節(jié)點(diǎn)邊框顏色和間隙varstyle=graph.createNode("StyleNode",100,0);style.setStyle(Q.Styles.BORDER,1);style.setStyle(Q.Styles.BORDER_COLOR,'#AABBEE');style.setStyle(Q.Styles.PADDING,5);運(yùn)行效果：Copyright?2016上?？崂浖邢薰維hanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page50QuneeforHTML5DeveloperGuide連線圖元連線圖元（Q.Edge），是連接兩個(gè)節(jié)點(diǎn)的圖形元素，用以表示點(diǎn)之間的拓?fù)潢P(guān)系，在實(shí)際應(yīng)用中代表傳輸管道，線路，或事物間的關(guān)系創(chuàng)建連線通常采用下面的代碼創(chuàng)建連線varedge=graph.createEdge(from,to,“edgename”);也可以采用連線構(gòu)造函數(shù)varedge=newQ.Edge(from,to);=“edgename”;graph.graphModel.add(edge);\h連線基本屬性\h連線拓?fù)潢P(guān)系\h連線外觀\h總線效果Copyright?2016上海酷利軟件有限公司ShanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page51QuneeforHTML5DeveloperGuide連線基本屬性每條連線都應(yīng)該包含兩個(gè)端點(diǎn)，稱為起始和結(jié)束節(jié)點(diǎn)，如果其中任何一個(gè)節(jié)點(diǎn)為空，則稱該連線無效，如果兩個(gè)節(jié)點(diǎn)為同一節(jié)點(diǎn)，則稱該連線為自環(huán)#from-起始節(jié)點(diǎn)#to-結(jié)束節(jié)點(diǎn)#otherNode()-另一個(gè)節(jié)點(diǎn)#isInvalid()-是否無效#isLooped()-是否為自環(huán)連線自環(huán)示例，創(chuàng)建一條自環(huán)連線vara=graph.createNode("A",-100,0);varedge=graph.createEdge(a,a,'looped');連線自環(huán)效果Copyright?2016上?？崂浖邢薰維hanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page52QuneeforHTML5DeveloperGuide連線拓?fù)潢P(guān)系當(dāng)連線連接進(jìn)圖中，圖的拓?fù)浣Y(jié)構(gòu)將發(fā)生變化，這時(shí)系統(tǒng)會(huì)自動(dòng)調(diào)用Edge#connect()方法，當(dāng)連線從圖中移除時(shí)，會(huì)自動(dòng)斷開拓?fù)潢P(guān)系。#connect()-連接到圖#disconnect()-斷開拓?fù)潢P(guān)系#isConnected()-是否已連接#getEdgeBundle()-獲取捆綁連線集合示例vara=graph.createNode("A",-100,0);varb=graph.createNode("B",100,0);graph.createEdge(a,b);varedge=graph.createEdge(a,b);alert(edge.getEdgeBundle().edges.length);運(yùn)行結(jié)果為：2Copyright?2016上?？崂浖邢薰維hanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page53QuneeforHTML5DeveloperGuide連線外觀可以設(shè)置連線的粗細(xì)、顏色以及線條樣式，還支持箭頭，各種連線走向類型，連線上的孩子組件（包括文本標(biāo)簽）可以沿線分布，兩個(gè)節(jié)點(diǎn)之間可以同時(shí)顯示多條連線，此外還支持連線自環(huán)效果。連線外觀設(shè)置示例設(shè)置連線寬度，顏色，以及連線類型vara=graph.createNode("A",-100,50);varb=graph.createNode("B",100,-50);varedge=graph.createEdge(a,b);edge.setStyle(Q.Styles.EDGE_COLOR,'#88AAEE');edge.setStyle(Q.Styles.EDGE_WIDTH,2);edge.edgeType=Q.Consts.EDGE_TYPE_VERTICAL_HORIZONTAL;運(yùn)行界面：Copyright?2016上海酷利軟件有限公司ShanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page54QuneeforHTML5DeveloperGuide連線虛線樣式示例設(shè)置連線虛線樣式vara=graph.createNode("A",-100,50);varb=graph.createNode("B",100,-50);varedge1=graph.createEdge(a,b,'Edge');edge1.edgeType=Q.Consts.EDGE_TYPE_ELBOW;edge1.setStyle(Q.Styles.EDGE_LINE_DASH,[8,4,0.01,4]);edge1.setStyle(Q.Styles.LINE_CAP,"round");運(yùn)行界面：連線的多文本標(biāo)簽連線上也可以設(shè)置多個(gè)文本標(biāo)簽，以展示不同的信息示例在連線上增加一個(gè)文本標(biāo)簽Copyright?2016上?？崂浖邢薰維hanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page55QuneeforHTML5DeveloperGuidevargraph=newQ.Graph('canvas');varA=graph.createNode("A",-100,-100);varB=graph.createNode("B",100,0);varedge=graph.createEdge("Edge",A,B);varlabel2=newQ.LabelUI();label2.position=Q.Position.CENTER_TOP;label2.anchorPosition=Q.Position.CENTER_BOTTOM;label2.border=1;label2.padding=newQ.Insets(2,5);label2.showPointer=true;label2.offsetY=-10;label2.backgroundColor="#EEE";label2.fontSize=16;label2.fontStyle="italic100";edge.addUI(label2,[{property:"label2",propertyType:Q.Consts.PROPERTY_TYPE_CLIENT,bindingProperty:"data"},{property:"label2.color",propertyType:Q.Consts.PROPERTY_TYPE_CLIENT,bindingProperty:"color"}]);edge.set("label2","anotherlabel");運(yùn)行效果Copyright?2016上?？崂浖邢薰維hanghaiKuliSoftwareCo.,Ltd.Allrightreserved.Page56QuneeforHTML5DeveloperGuide總線效果總線布局是拓?fù)鋱D中的一種典型結(jié)構(gòu)，總線（Bus），是計(jì)算機(jī)各種功能部件之間傳送信息的公共通信干線，總線和與之連接的設(shè)備一起組成一種拓?fù)浣Y(jié)構(gòu)，這種圖稱為總線型拓?fù)鋱D，Qunee中定義了Bus圖元類型，當(dāng)然要得到總線效果還需要對(duì)連線進(jìn)行設(shè)置Qunee中定義了連線角度屬性，結(jié)合總線圖元類型，可以實(shí)現(xiàn)特定方向的連線效果Edge#angle-連線走向角度總線示例vargraph=newQ.Graph("canvas");varbus=newQ.Bus();graph.addElement(bus);bus.moveTo(-200,0);bus.lineTo(200,0);bus.setStyle(Q.Styles.SHAPE_STROKE,10);for(vari=0;i<5;i++){varnode=graph.createNode(""+i,-100+i*70,60);varedge=graph.createEdge(bus,node);edge.angle=Math.PI*0.2;node=graph.createNode(""+i,-80+i*70,-60);edge=graph.createEdge(bus,node);edge.angle=-Math.PI*0.2;}運(yùn)行效果Copyright?2016上海酷利軟件有限公司ShanghaiKuliSoftwareCo.,Ltd.Allrightr