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

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

工具選擇

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

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)建圖標庫的工具，也提供免費版和商業(yè)版
jsPlumb http://www.jsplumb.org/ jsPlumb是一套開源的流程圖創(chuàng)建工具，小巧精悍，使用簡單
d3 http://d3js.org 在html5領域，d3可謂是最好的可視化基礎庫，提供方面的DOM操作，非常強大。

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

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

下面我們一步一步的來使用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"
?});

這里給給出了一些配置包括，連接線（這里配置了一個貝塞爾曲線），線的風格，連接點得風格。Container需要配置一個對應的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元素，并放在對應的容器的制定位置上，注意為了支持拖拽的功能，必須使用position:absolute 。

我使用D3來操作DOM，大家可能會更習慣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é)點和目標節(jié)點的引用，port1和port2是源端口和目標端口的名字。

使用instance.connect方法來創(chuàng)建連接。 overlays用來添加連接線的箭頭效果或者其他風格，我這里沒有使用，因為覺得都不是很好看。大家如果要用，只要把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)建對應類型的節(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)從樹上拖拽對應的節(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拖拽端點的邏輯沖突，當檢測到target是jsPlumb對象是需要直接從drop方法中退出以執(zhí)行對應的jsPlumb的drop邏輯。

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

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

端很火，想自學前端的人也多。作為過來人，知道自學的辛苦。所以小編精心制作這份學習路線圖，就是讓想自學前端的小伙伴們有一份系統(tǒng)專業(yè)的學習資源和學習指導。

此學習路線圖，歷經(jīng)兩個月的時間，無論你是剛?cè)腴T的小白，還是已經(jīng)工作的前端開發(fā)者，都是必備的學習寶典！

一、前端學習路線圖—流程篇

前端學習路線圖

二、前端學習路線圖—視頻教程篇：

前端視頻篇第一階段-準備篇

本階段前端課程共計5個知識點，小編為大家準備了5個學習教程

1、周期與目標

這一階段的學習需要15天的時間

2、學完后目標

熟悉媒體查詢和響應式設計，使得設計有適配不同的移動;
熟悉基礎CSS的格式和CSS盒模式;
理解網(wǎng)頁間是如何鏈接的、如何設計多列布局，可以處理表單字段和媒體元素;
理解如何創(chuàng)建和瀏覽一個基本的網(wǎng)頁。

3、知識點:

1）開發(fā)工具的安裝配置的介紹

sublime、webstorm、Visual Studio Code

2）HTML

理解如何瀏覽和創(chuàng)建網(wǎng)頁、基本的語法規(guī)范、常用標簽及屬性、網(wǎng)頁之間的鏈接與跳轉(zhuǎn)、標簽節(jié)點層級節(jié)點

3）CSS

基本語法和三種書寫位置、選擇器和格式化排版、盒模型的高級用法、常用布局模型

4）JavaScript入門

基礎語法和變量、數(shù)據(jù)類型和數(shù)據(jù)類型轉(zhuǎn)換、條件判斷、循環(huán)語句、函數(shù)、數(shù)組等內(nèi)置對象

5）京東首頁實戰(zhàn)

CSS代碼抽象與復用、浮動的盒子布局、padding 和 margin 使用、層級的使用、定位特性的各種使用場景

4、小編整理的視頻教程如下

《前端與移動開發(fā)基礎》

《CSS梅蘭商城項目實戰(zhàn)視頻教程》

《JavaScript基礎視頻教程》

二、前端視頻篇第二階段-基礎篇

本階段前端課程共計4個知識點，共計1個免費配套視頻涵蓋

1、周期與目標：

學習周期：20天

2、學完后目標：

能夠基于jQuery實現(xiàn)炫酷效果和復雜的功能模塊；
能創(chuàng)造或添加自定義效果到網(wǎng)頁上；
能熟練添加標準的動畫效果到網(wǎng)頁上；
熟練操作DOM模型。

3、知識點：

JavaScript基礎
JS語言的基本構(gòu)成、變量、數(shù)據(jù)類型、表達式、選擇結(jié)構(gòu)、循環(huán)結(jié)構(gòu)、短路語句、函數(shù)基礎
DOM + BOM
DOM基本結(jié)構(gòu)、節(jié)點對象的操作、事件特性及使用、常見的內(nèi)置DOM對象、常見的BOM功能
網(wǎng)頁特效與進階
在網(wǎng)頁特效中常用的編程接口、動畫編程、事件對象和冒泡、緩動框架封裝和旋轉(zhuǎn)木馬案例、正則表達式及應用
Jquery
選擇器、基本操作API、動畫API、事件API、插件機制、原理分析、項目實戰(zhàn)

4、小編整理的視頻教程如下

《JavaScript 基礎加強》

三、前端視頻篇第三階段——核心篇

本階段前端課程共計5個知識點，合計3個免費視頻涵蓋

1、周期與目標：

學習周期：20天

2、學完后目標：

能夠基于jQueryMobile/Zepto等框架進行移動端js功能開發(fā)；
能夠熟練使用html5/css3/ canvas進行移動端頁面和功能效果開發(fā)，并且能夠基于原生和框架進行響應式效果開發(fā)；
能夠基于jQuery、bootstrap等框架實現(xiàn)炫酷效果和復雜的功能模塊；
能夠獨立制作電商類，企業(yè)類網(wǎng)站，以及常見js動態(tài)效果。

3、知識點：

HTML5 + CSS3
語義化結(jié)構(gòu)、多媒體、本地存儲、其他常見API、CSS3 選擇器、CSS3 邊框、背景、陰影、CSS3 過渡和動畫、CSS3 伸縮布局、Canvas
服務端編程
端的概念、Web 服務器的概念、服務器搭建、XML與JSON
PHP
PHP基礎語法、PHP服務端編程基礎
AJAX
基本編程接口、異步數(shù)據(jù)交互、模板引擎的使用、跨域的實現(xiàn)方案、增量加載
移動Web開發(fā)
響應式布局、Bootstrap框架深度使用、Zepto.js庫、預編譯CSS

4、小編整理的視頻教程如下

《最新H5+CSS3教程視頻》《最新AJAX教程》《傳智前端就業(yè)班視頻分享：移動web開發(fā)課程》

四、前端視頻篇第四階段——進階篇

本階段前端課程共計4個知識點，合計2個免費視頻涵蓋

1、周期與目標：

學習周期：15天

2、學完后目標：

熟練使用閉包、高級函數(shù)、立即執(zhí)行函數(shù)(匿名函數(shù))等；
熟練使用元編程，解決Callback等；
熟悉JavaScript基本語法。

3、知識點：

面向?qū)ο笤贘S中的體現(xiàn)與實踐
面向?qū)ο罄碚摗ο蟮幕靖拍睢ο蟮膶傩院头椒ā⑼ㄟ^字面量創(chuàng)建對象
2）開發(fā)過程中常用的模式與思想
開閉原則、MVC思想、高內(nèi)聚低耦合、工廠模式
3）JavaScript高級特性
通過構(gòu)造函數(shù)創(chuàng)建對象、原型對象、繼承的多種實現(xiàn)方式、原型鏈、函數(shù)的本質(zhì)以及 Function 構(gòu)造函數(shù)、作用域鏈、閉包、沙箱模式
4）封裝一個自己框架
選擇器框架、CSS操作封裝、屬性操作封裝、其他DOM操作的封裝、事件框架的封裝

4、小編整理的視頻教程如下：

《JavaScript-高級面向?qū)ο笠曨l教程》《JavaScript高級框架設計》

想獲得教程，都可以私信小編哦！

anvas技術的誕生可謂是讓繪圖技術如虎添翼，本文將推薦一系列Canvas圖形繪制、流程圖、組織圖、甘特圖、全景圖、3D庫、VR/AR、圖像編輯等方面的庫，希望助你在Canvas繪圖時尋得一把趁手的利器。

同時，愣錘將Canvas的相關資源進行的收錄整理分類，更多的資源請關注Github項目地址awesome-canvas。目前該庫持續(xù)維護中，已收錄大約200+的Canvas庫，以及資源網(wǎng)址、插件、書籍、博客等資源。

圖形處理庫

圖形繪制是Canvas中最基本的內(nèi)容，但是Canvas本身提供的api比較基礎，開發(fā)起來低效。而且也缺少完整的事件系統(tǒng)、區(qū)域監(jiān)測、緩存等等。下面讓我們來看幾款高效的圖形處理庫吧。

Konva

簡介：Konva是一個 HTML5 Canvas JavaScript 框架, 通過擴展 Canvas 的 2D Context 讓桌面端和移動端Canvas支持交互性，使其支持高性能動畫、過渡、節(jié)點嵌套、分層、過濾、緩存、事件處理等等。Konva官方地址（https://konvajs.org/docs/sandbox/index.html）

除上述之外，文檔相對友好，但也僅僅是相對于同類庫的文檔友好那么一滴滴，社區(qū)有維護一個中文文檔。

fabric.js

簡介： Fabric.js是一個可以輕松處理 HTML5 Canvas元素的框架，使得Canvas元素支持交互式對象模型，同時也是一個SVG-to-Canvas和Canvas-to-SVG的解析器， fabric.js官方地址（http://fabricjs.com/demos/）

fabricjs是和konva同類型但是比konva更老牌的一個的Canvas庫，目前github上Star數(shù)2萬+

更多示例如下圖所示：

圖像編輯

市面上圖像編輯的軟件有很多，像大家所熟知的PS、sketch、axure、激萌、剪映等等。那么如果我們想開發(fā)類似的軟件，有沒有可以使用的庫或者參考的開源軟件呢？

miniPaint

簡介：miniPaint [官方網(wǎng)站在線演示]（https://viliusle.github.io/miniPaint/） - 在線版的PS。PS這款軟件大家都不陌生，web版本的如何呢？請看下圖：

DarkroomJS

簡介：DarkroomJS [官方網(wǎng)站在線演示]（https://pqina.nl/pintura/?affiliate_id=854594675） - 基于Fabricjs的瀏覽器端可擴展的圖像編輯工具

fabric-brush

簡介：fabric-brush [官方網(wǎng)站在線演示] （https://tennisonchan.github.io/fabric-brush/）- 基于Fabric.js的Canvas筆刷工具

fabricjs-image-editor-origin

簡介：fabricjs-image-editor-origin [官方網(wǎng)站在線演示] （https://fabricjs-image-editor-f62330.netlify.app/）- Fabricjs圖像編輯器

react-sketch

簡介：react-sketch [官方網(wǎng)站在線演示] （http://tbolis.github.io/showcase/react-sketch/）- 基于React、Fabricjs的素描應用

glitch-canvas

簡介：glitch-canvas [官方網(wǎng)站在線演示]（https://snorpey.github.io/jpg-glitch/） - 給畫布元素添加故障效果

animockup

簡介：animockup [官方網(wǎng)站在線演示] （https://animockup.com/）- 在瀏覽器中創(chuàng)建動畫模型，并導出為視頻或動畫GIF

物理引擎

物理引擎使用質(zhì)量、速度、摩擦力和空氣阻力等變量，模擬了一個近似真實的物理系統(tǒng)，為剛性物體賦予真實的物理效果，比如重力、旋轉(zhuǎn)和碰撞等效果，讓物體的行為表現(xiàn)的更加趨向真實。例如，守望先鋒的英雄在跳起時，系統(tǒng)所設置的重力參數(shù)就決定了他能跳多高，下落時的速度有多快，子彈的飛行軌跡等等。

matter.js

簡介： matter.js是一個用于 Web 的 JavaScript 2D 物理引擎庫 matter.js官方地址（https://brm.io/matter-js/demo/#wreckingBall）

matter.js相較于老牌的 Box2D 引擎庫更為輕量級（壓縮版僅有 87 KB），并且在性能和功能方面也不遜色。

流程圖/組織圖/圖編輯等

工業(yè)軟件開發(fā)，一直是軟件領域復雜而又重要的一環(huán)。其對技術人的要求要是更高的，下面看看有哪些可以輔助我們快速開發(fā)的庫或者參考的場景吧。

gojs

簡介： gojs是一款可以非常方便的開發(fā)交互式流程圖、組織結(jié)構(gòu)圖、設計工具、規(guī)劃工具、可視化語言的JavaScript圖表庫。 gojs.js官方地址（https://gojs.net/latest/）

GoJS用自定義模板和布局組件簡化了節(jié)點、鏈接和分組。
給用戶交互提供了許多先進的功能，如拖拽、復制、粘貼、文本編輯、工具提示、上下文菜單、自動布局、模板、數(shù)據(jù)綁定和模型、事務狀態(tài)和撤銷管理、調(diào)色板、概述、事件處理程序、命令和自定義操作的擴展工具系統(tǒng)。

文檔中提供了大量的demo可供參考，基本對于常見的圖編輯程序做到了全覆蓋。

butterfly

簡介：butterfly [官方網(wǎng)站在線演示] （https://butterfly-dag.gitee.io/butterfly-dag/demo/analysis）一個基于JS的數(shù)據(jù)驅(qū)動的節(jié)點式編排組件庫，同時適用于React/Vue2組件。

豐富的DEMO，開箱即用
全方位管理畫布，開發(fā)者只需要更專注定制化的需求
利用DOM/REACT/VUE來定制元素；靈活性，可塑性，拓展性優(yōu)秀
提供了中文文檔，這點對英文不好的小伙伴很Nice

wireflow

簡介：wireflow [官方在線演示]（https://app.wireflow.co/）用戶流程圖實時協(xié)作工具。

Wireflow 有超過 100 種自定義構(gòu)建圖形/卡可供使用，涵蓋了大多數(shù) Web 元素、交互和使用案例。
Wireflow 考慮到了協(xié)作。您可以邀請您的同事和他們一起實時設計下一個項目的用戶流程。
它具有內(nèi)置的實時聊天功能，讓您能夠與您的隊友進行交流，并且在您實時協(xié)作時仍然在同一個應用程序中。

flowy

簡介：Flowy [官方在線演示]（https://alyssax.com/x/flowy） - 用于創(chuàng)建流程圖的最小javascript庫。使創(chuàng)建具有流程圖功能的 WebApp 成為一項非常簡單的任務。通可以在幾分鐘內(nèi)構(gòu)建自動化軟件、思維導圖工具或簡單的編程平臺。

響應式拖放、自動捕捉、自動滾動
塊重排、刪除塊、自動塊居中
條件捕捉、條件塊移除、無依賴項

Workflow Designer

簡介：Workflow Designer [官方在線示例] （https://guozhaolong.github.io/wfd/）- 基于G6和React的可視化流程編輯器。

web-pdm

簡介：web-pdm [在線示例]（https://erd.zyking.xyz/demo） - 用G6做的ER圖工具，最終目標是想做成在線版的powerdesigner.

X-Flowchart-Vue

簡介：X-Flowchart-Vue [官方在線演示] （http://oxoyo.co/X-Flowchart-Vue/）- 基于G6和Vue的可視化圖形編輯器。

OrgChart

簡介：OrgChart [官方在線演示] （https://dabeng.github.io/OrgChart/）- 簡單直接的組織圖插件

welabx-g6

簡介：welabx-g6 [官方在線示例] （https://claudewowo.github.io/welabx-g6/dist/?_blank）- 基于G6和Vue的流程圖編輯器。

全景圖/AR/VR

5g的普及、虛擬現(xiàn)實/增強現(xiàn)實落地、元宇宙的火熱......似乎讓Canvas再度推上了技術的頂峰。下面讓我來看看開發(fā)這些場景常見的Canvas庫吧。

Pannellum

簡介：Pannellum [官方在線演示] （https://pannellum.org/）- 輕量、免費、開源的web全景查看器。

Panolens.js

簡介：Panolens.js [官方在線演示] （https://pchen66.github.io/Panolens/）- Panolens.js基于Three.JS，主要研究領域是全景、虛擬現(xiàn)實和潛在的增強現(xiàn)實。

JS-Cloudimage-360-View

簡介：JS-Cloudimage-360-View [官方在線演示] （https://scaleflex.github.io/js-cloudimage-360-view/）一個簡單的、交互式的資源，可以用來提供您的產(chǎn)品的虛擬游覽。

A-Frame

簡介：A-Frame [官方在線演示]（https://aframe.io/） A-Frame 除了幫助您構(gòu)建 360 度媒體播放器外，它還提供了許多附加功能。其他功能可幫助您增強網(wǎng)站的虛擬現(xiàn)實體驗。

3D庫

three.js

簡介：three.js [官方在線演示]（https://threejs.org/examples/） - 創(chuàng)建易于使用、輕量級、跨瀏覽器的通用3d js庫。three.js就不多介紹了，大家想必都很熟悉。

zdog

簡介：zdog [官方在線演示]（https://zzz.dog/） - 基于canvas和SVG設計師友好的偽3D引擎

seen.js

簡介：seen [官方在線演示] （http://seenjs.io/）- 使用SVG或Canvas渲染3D場景。

Oimo.js

簡介：Oimo.js [官方在線演示]（http://lo-th.github.io/Oimo.js/index.html#basic） - 輕量級的JS 3D物理引擎。

phoria.js

簡介：phoria.js [官方在線演示]（http://www.kevs3d.co.uk/dev/phoria/index.html） - 用于在 HTML5 畫布 2D 渲染器上進行簡單 3D 圖形和可視化的 JavaScript 庫。它不使用 WebGL。適用于所有 HTML5 瀏覽器，包括桌面、iOS 和 Android。

原文來自：https://juejin.cn/post/7038267477121302542

在線咨詢

上一篇：JavaScript代碼怎樣引入到HTML中？
下一篇：使用WebRTC搭建前端視頻聊天室-入門篇

您的項目需求

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

整合營銷服務商

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

工具選擇

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

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

Konva

fabric.js

miniPaint

DarkroomJS

fabric-brush

fabricjs-image-editor-origin

react-sketch

glitch-canvas

animockup

matter.js

gojs

butterfly

wireflow

flowy

Workflow Designer

web-pdm

X-Flowchart-Vue

OrgChart

welabx-g6

Pannellum

Panolens.js

JS-Cloudimage-360-View

A-Frame

three.js

zdog

seen.js

Oimo.js

phoria.js

您的項目需求