用HTML5構(gòu)建一個流程圖繪制工具

我們的開發(fā)工程中經(jīng)常會使用到各種圖，所謂的圖就是由節(jié)點和節(jié)點之間的連接所形成的系統(tǒng)，數(shù)學(xué)上專門有一個分支叫圖論（Graph Theroy）。利用圖我們可以做很多工具，比如思維導(dǎo)圖，流程圖，狀態(tài)機(jī)，組織架構(gòu)圖，等等。今天我要做的是用開源的HTML5工具來快速構(gòu)造一個做圖的工具。

工具選擇

工預(yù)善其事，必先利其器。第一件事是選擇一件合適的工具，開源時代，程序員還是很幸福的，選擇很多。

flowchart.js http://adrai.github.io/flowchart.js/ , 基于SVG創(chuàng)建Flow Chart
go.js http://www.gojs.net/latest/index.html go.js 提供一整套的JS工具，支持各種交互式圖表的創(chuàng)建。有免費版和收費版
joint.js http://www.jointjs.com/ joint.js 是另一個創(chuàng)建圖標(biāo)庫的工具，也提供免費版和商業(yè)版
jsPlumb http://www.jsplumb.org/ jsPlumb是一套開源的流程圖創(chuàng)建工具，小巧精悍，使用簡單
d3 http://d3js.org 在html5領(lǐng)域，d3可謂是最好的可視化基礎(chǔ)庫，提供方面的DOM操作，非常強(qiáng)大。

最終，我選擇了jsPlumb，因為它完全開源，使用很簡單，用D3的話可能會多花很多功夫。joint.js也不錯。大家可以根據(jù)自己的需要選擇。

構(gòu)建靜態(tài)應(yīng)用

下面我們一步一步的來使用jsPlumb來創(chuàng)建我們的流程圖工具。

第一步是等待DOM和jsPlumb初始化完畢，類似document.ready()和jquery.ready(), 要使用jsPlumb, 需要把代碼放在這個函數(shù)里：

jsPlumb.ready(function()?{
????//?...?your?code?goes?here?...
}

創(chuàng)建一個jsPlumb的實例，并初始化jsPlumb的配置參數(shù)：

//Initialize?JsPlumb
var?color?=?"#E8C870";
var?instance?=?jsPlumb.getInstance({
????//?notice?the?'curviness'?argument?to?this?Bezier?curve.??the?curves?on?this?page?are?far?smoother
????//?than?the?curves?on?the?first?demo,?which?use?the?default?curviness?value.??????
????Connector?:?[?"Bezier",?{?curviness:50?}?],
????DragOptions?:?{?cursor:?"pointer",?zIndex:2000?},
????PaintStyle?:?{?strokeStyle:color,?lineWidth:2?},
????EndpointStyle?:?{?radius:5,?fillStyle:color?},
????HoverPaintStyle?:?{strokeStyle:"#7073EB"?},
????EndpointHoverStyle?:?{fillStyle:"#7073EB"?},
????Container:"container-id"
?});

這里給給出了一些配置包括，連接線（這里配置了一個貝塞爾曲線），線的風(fēng)格，連接點得風(fēng)格。Container需要配置一個對應(yīng)的DIV容器的id。（這里也可以使用setContainer的方法）

下面我們要創(chuàng)建一個節(jié)點（node），每一個節(jié)點可以用一個DIV來實現(xiàn)。我這里提供了一個函數(shù)來創(chuàng)建節(jié)點。

function?addNode(parentId,?nodeId,?nodeLable,?position)?{
??var?panel?=?d3.select("#"?+?parentId);
??panel.append('div').style('width','120px').style('height','50px')
????.style('position','absolute')
????.style('top',position.y).style('left',position.x)
????.style('border','2px?#9DFFCA?solid').attr('align','center')
????.attr('id',nodeId).classed('node',true)
????.text(nodeLable);

??return?jsPlumb.getSelector('#'?+?nodeId)[0];
}

這里做的事情就是創(chuàng)建了一個DIV元素，并放在對應(yīng)的容器的制定位置上，注意為了支持拖拽的功能，必須使用position:absolute 。

我使用D3來操作DOM，大家可能會更習(xí)慣JQuery，這純屬個人喜好的問題。

最后返回創(chuàng)建節(jié)點的實例引用，這是的selector使用了jsPlumb.getSelector()方法，它和JQuery的selector是一樣的，這樣用的好處是你可以使用不同的DOM操作庫，例如Vanilla

下面我使用一個函數(shù)來創(chuàng)建端點/錨點（anchor），錨點就是節(jié)點上的連接點，用于連接不同的節(jié)點。

function?addPorts(instance,?node,?ports,?type)?{
??//Assume?horizental?layout
??var?number_of_ports?=?ports.length;
??var?i?=?0;
??var?height?=?$(node).height();??//Note,?jquery?does?not?include?border?for?height
??var?y_offset?=?1?/?(?number_of_ports?+?1);
??var?y?=?0;

??for?(?;?i?<?number_of_ports;?i++?)?{
????var?anchor?=?[0,0,0,0];
????var?paintStyle?=?{?radius:5,?fillStyle:'#FF8891'?};
????var?isSource?=?false,?isTarget?=?false;
????if?(?type?===?'output'?)?{
??????anchor[0]?=?1;
??????paintStyle.fillStyle?=?'#D4FFD6';
??????isSource?=?true;
????}?else?{
??????isTarget?=true;
????}

????anchor[1]?=?y?+?y_offset;
????y?=?anchor[1];

????instance.addEndpoint(node,?{
??????uuid:node.getAttribute("id")?+?"-"?+?ports[i],
??????paintStyle:?paintStyle,
??????anchor:anchor,
??????maxConnections:-1,
??????isSource:isSource,
??????isTarget:isTarget
????});
??}
}

instance是jsPlumb的實例

node是我們用addNode方法創(chuàng)建的Node實例

ports，是一個string的數(shù)組，指定端點的個數(shù)和名字

type，可能是output或者input，指定端點的種類，一個節(jié)點的輸出端口可以連接另一個節(jié)點的輸入端口。

這里anchor是一個四維數(shù)組，0維和1維分別是錨點在節(jié)點x軸和y軸的偏移百分比。我這里希望把端口畫在節(jié)點的左右兩側(cè)，并按照端口的數(shù)量均勻分布。

最后使用instance.addEndpoint來創(chuàng)建端點。注意這里只要指定isSource和isTarget就可以用drag&drop的方式來連接端點，非常方便。

下面一步我們提供一個函數(shù)來連接端點：

function?connectPorts(instance,?node1,?port1,?node2?,?port2)?{
??//?declare?some?common?values:
??var?color?=?"gray";
??var?arrowCommon?=?{?foldback:0.8,?fillStyle:color,?width:5?},
??//?use?three-arg?spec?to?create?two?different?arrows?with?the?common?values:
??overlays?=?[
????[?"Arrow",?{?location:0.8?},?arrowCommon?],
????[?"Arrow",?{?location:0.2,?direction:-1?},?arrowCommon?]
??];

??var?uuid_source?=?node1.getAttribute("id")?+?"-"?+?port1;
??var?uuid_target?=?node2.getAttribute("id")?+?"-"?+?port2;

??instance.connect({uuids:[uuid_source,?uuid_target]});
}

node1和node2是源節(jié)點和目標(biāo)節(jié)點的引用，port1和port2是源端口和目標(biāo)端口的名字。

使用instance.connect方法來創(chuàng)建連接。 overlays用來添加連接線的箭頭效果或者其他風(fēng)格，我這里沒有使用，因為覺得都不是很好看。大家如果要用，只要把overlays加入到instance.connect的方法參數(shù)就可以了。

調(diào)用以上方法來創(chuàng)建節(jié)點，端點和連接線。

var?node1?=?addNode('container-id','node1',?'node1',?{x:'80px',y:'20px'});
var?node2?=?addNode('container-id','node2',?'node2',?{x:'280px',y:'20px'});

addPorts(instance,?node1,?['out1','out2'],'output');
addPorts(instance,?node2,?['in','in1','in2'],'input');

connectPorts(instance,?node1,?'out2',?node2,?'in');

這里我們創(chuàng)建了兩個節(jié)點，第一個節(jié)點有兩個輸出端口，第二個節(jié)點有三個輸入端口，然后把第一個節(jié)點的out2端口連接到第二個端點的in端口。效果如下：

最后我們給節(jié)點增加drag&drop的功能，這樣我們就可以拖動這些節(jié)點來改變圖的布局了。

instance.draggable($('.node'));

這里似乎依賴于JQuery-UI,我還不是很清楚。

交互式創(chuàng)建節(jié)點

我們已經(jīng)初步具有了創(chuàng)建圖的功能，可是節(jié)點的創(chuàng)建必須通過程序，我們希望用交互的方式來創(chuàng)建節(jié)點。

通常我們希望有一個tree view的控件，讓后通過拖拽來創(chuàng)建對應(yīng)類型的節(jié)點。這里我使用了這個開源的tree view，基于bootstrap https://github.com/jonmiles/bootstrap-treeview

我們先創(chuàng)建一個tree view：

function?getTreeData()?{
??var?tree?=?[
????{
??????text:?"Nodes",
??????nodes:?[
????????{
??????????text:?"Node1",
????????},
????????{
??????????text:?"Node2"
????????}
??????]
????}
??];?

??return?tree;
}
//Initialize?Control?Tree?View
$('#control-panel').treeview({data:?getTreeData()});

樹上有兩個節(jié)點:

然后我實現(xiàn)從樹上拖拽對應(yīng)的節(jié)點，到流程圖上的邏輯。

//Handle?drag?and?drop
$('.list-group-item').attr('draggable','true').on('dragstart',?function(ev){
??//ev.dataTransfer.setData("text",?ev.target.id);
??ev.originalEvent.dataTransfer.setData('text',ev.target.textContent);
??console.log('drag?start');
});

$('#container-id').on('drop',?function(ev){
??//avoid?event?conlict?for?jsPlumb
??if?(ev.target.className.indexOf('_jsPlumb')?>=?0?)?{
????return;
??}

??ev.preventDefault();
??var?mx?=?''?+?ev.originalEvent.offsetX?+?'px';
??var?my?=?''?+?ev.originalEvent.offsetY?+?'px';

??console.log('on?drop?:?'?+?ev.originalEvent.dataTransfer.getData('text'));
??var?uid?=?new?Date().getTime();
??var?node?=?addNode('flow-panel','node'?+?uid,?'node',?{x:mx,y:my});
??addPorts(instance,?node,?['out'],'output');
??addPorts(instance,?node,?['in1','in2'],'input');
??instance.draggable($(node));
}).on('dragover',?function(ev){
??ev.preventDefault();
??console.log('on?drag?over');
});

這里要注意的是要避免和jsPlumb拖拽端點的邏輯沖突，當(dāng)檢測到target是jsPlumb對象是需要直接從drop方法中退出以執(zhí)行對應(yīng)的jsPlumb的drop邏輯。

好了，一個繪制流程圖的軟件工具初步完工。

我把代碼放在oschina的代碼托管服務(wù)上了，大家有興趣可以去試試。

個網(wǎng)站想要順利的運行就離不開HTML5網(wǎng)頁技術(shù)開發(fā)人員，因此熟悉整個網(wǎng)站的開發(fā)建設(shè)流程對HTML5網(wǎng)頁技術(shù)開發(fā)人員尤為重要，本篇文章扣丁學(xué)堂小編就和大家分享一下Web前端開發(fā)之網(wǎng)站制作流程，希望可以幫到有需要的人們。

1、初始商討：決策者們確定站點的整體定位和主題，明確建立此網(wǎng)站的真正目的，并確定網(wǎng)站的發(fā)布時機(jī)。

2、需求分析：充分考慮用戶的需求和站點擁有者的需求，確定當(dāng)前的業(yè)務(wù)流程。重點分析瀏覽用戶的思維方式，并對競爭對手的信息進(jìn)行分析。

3、綜合內(nèi)容：確定各個頁面所要展示的信息，進(jìn)行頁面劃分。

4、頁面布局，設(shè)計頁面：根據(jù)頁面內(nèi)容進(jìn)行對應(yīng)的頁面設(shè)計，在規(guī)劃的頁面上使內(nèi)容合理地展現(xiàn)出來。

5、測試：對每個設(shè)計好的分頁進(jìn)行瀏覽測試，在最后要對整個網(wǎng)站的頁面進(jìn)行整體測試。

關(guān)于Web前端開發(fā)之網(wǎng)站制作流程小編就先簡單的為大家說這么多，想要學(xué)好HTML5開發(fā)技術(shù)的小伙伴一定要用心的去學(xué)習(xí)理解，學(xué)好HTML5開發(fā)技術(shù)的話不論是對你將來的就業(yè)或者是生活都有很大的幫助，學(xué)好HTML5開發(fā)技術(shù)的小伙伴想要高薪就業(yè)不是難事。

想要學(xué)習(xí)HTML5開發(fā)技術(shù)的小伙伴小編推薦選擇口碑良好的扣丁學(xué)堂進(jìn)行學(xué)習(xí)，扣丁學(xué)堂不僅有專業(yè)的老師和與時俱進(jìn)的課程體系，還有大量的HTML5視頻教程供學(xué)員觀看學(xué)習(xí)，想要獲得免費HTML5視頻教程的小伙伴快快行動吧。扣丁學(xué)堂H5技術(shù)交流群：559883758。

【關(guān)注微信公眾號獲取更多學(xué)習(xí)資料】

制作一個使用HTML5的網(wǎng)站，您可以按照以下步驟進(jìn)行：

第一步、規(guī)劃和設(shè)計網(wǎng)站

確定網(wǎng)站的目標(biāo)、定位和目標(biāo)受眾。設(shè)計網(wǎng)站的整體結(jié)構(gòu)、布局和導(dǎo)航。

第二步、創(chuàng)建HTML文件

使用文本編輯器創(chuàng)建一個新的HTML文件。HTML是網(wǎng)頁的基本結(jié)構(gòu)語言，可以定義頁面的內(nèi)容和布局。

第三步、編寫HTML結(jié)構(gòu)

在HTML文件中使用HTML標(biāo)簽來定義網(wǎng)頁的結(jié)構(gòu)。包括HTML文檔聲明、頭部（包括標(biāo)題、鏈接、腳本等）、主體內(nèi)容等。

第四步、使用HTML5標(biāo)簽

HTML5引入了一些新的標(biāo)簽，如<header>、<nav>、<section>、<article>、<footer>等，可以更好地組織網(wǎng)頁內(nèi)容。根據(jù)需要使用這些標(biāo)簽來定義頁面結(jié)構(gòu)。

第五步、插入文本和圖片

使用HTML標(biāo)簽和屬性來插入文本內(nèi)容和圖像。使用<p>標(biāo)簽定義段落，<h1>-<h6>標(biāo)簽定義標(biāo)題，<img>標(biāo)簽插入圖像等。

第六步、創(chuàng)建鏈接

使用<a>標(biāo)簽創(chuàng)建鏈接，將不同頁面或外部網(wǎng)頁鏈接起來。設(shè)置鏈接的目標(biāo)網(wǎng)頁、文本和樣式。

第七步、添加樣式

使用CSS（層疊樣式表）來設(shè)置網(wǎng)頁的樣式和布局。將CSS代碼添加到HTML文件中的<style>標(biāo)簽中，或者鏈接外部的CSS文件。

第八步、響應(yīng)式設(shè)計

使用CSS媒體查詢和響應(yīng)式布局技術(shù)，使網(wǎng)站能夠適應(yīng)不同的屏幕尺寸和設(shè)備類型。確保網(wǎng)站在手機(jī)、平板和桌面上都能有良好的顯示效果。

第九步、多媒體元素

HTML5支持多媒體元素，如音頻和視頻。使用<audio>和<video>標(biāo)簽嵌入音頻和視頻文件，并設(shè)置相關(guān)屬性和控制選項。

第十步、表單創(chuàng)建

使用<form>和<input>等表單元素創(chuàng)建交互式表單，收集用戶輸入的數(shù)據(jù)。設(shè)置表單的驗證規(guī)則和提交動作。

第十一步、腳本和交互性

使用JavaScript為網(wǎng)頁添加交互功能和動態(tài)效果。可以在HTML文件中使用<script>標(biāo)簽嵌入JavaScript代碼，或者鏈接外部的JavaScript文件。

第十二步、測試和優(yōu)化

在不同瀏覽器和設(shè)備上測試網(wǎng)頁的兼容性和性能。檢查網(wǎng)頁的加載速度、布局和功能是否正常，進(jìn)行調(diào)整和優(yōu)化。

第十三步、上線發(fā)布

將制作完成的HTML文件和相關(guān)的資源（如圖像、CSS和JavaScript文件）上傳到服務(wù)器上。配置服務(wù)器和域名，確保網(wǎng)站可以通過互聯(lián)網(wǎng)訪問。

以上步驟僅是制作HTML5網(wǎng)站的基本流程。

以上內(nèi)容由名揚銀河企網(wǎng)系統(tǒng)原創(chuàng)發(fā)布，轉(zhuǎn)載請注明出處。

在線咨詢

上一篇：16.HTML 表單提交
下一篇：「來自提瓦特的祝福」網(wǎng)頁活動現(xiàn)已開啟

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

用HTML5構(gòu)建一個流程圖繪制工具

工具選擇

構(gòu)建靜態(tài)應(yīng)用

交互式創(chuàng)建節(jié)點

您的項目需求