整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
家好，我是前端西瓜哥。這次簡單看看 SVGEdit 的架構(gòu)。
SVGEdit 的版本為 7.2.0。
SVGEdit 一款非常老牌的 SVG 圖形編輯器，用于編輯處理 SVG，star 數(shù)目前是 5.8k。
它的優(yōu)點在于經(jīng)過多年的開發(fā)，完成度高，較為成熟，功能相當豐富。
缺點是幾乎不維護了，提交很少，大概一個月一提交，最新版 7.2.0 也是 22 年 8 月的時候了。
UI 比較簡陋，很簡單就能看到一些 UI bug。
如果要找一個 UI 好看的，可以看看開源項目 ：Method-Draw，這個 UI 好看很多。它 fork 了 SVG-Edit 并做了一些改造。
Method-Draw 標榜簡單易用，所以有意去掉了 SVGEdit 的一些高級功能，比如圖層。
Web Component + SVG + Rollup + i18next
UI 使用了 Web Component，瀏覽器原生支持的組件方案。
作為一款 SVG 編輯器，選擇 SVG 沒有毛病，這樣渲染效果就完全交給瀏覽器，不需要根據(jù)標準去實現(xiàn)渲染效果，自己專心寫編輯器的業(yè)務(wù)邏輯即可。
沒有用 TypeScript，因為是很老的項目，當時 TypeScript 尚未大行其道。如果要做新項目，建議還是上 TypeScript，大型復(fù)雜軟件還是很需要類型系統(tǒng)的。
打包用了 Rollup。國際化用了 i18next。
UI 層對應(yīng) Editor 類，該類繼承了 EditorStartup 類，后者做一些初始化操作。
編輯器內(nèi)核對應(yīng) SvgCanvas 類。
SvgCanvas 感覺太多讀寫屬性的方法（getXx 和 setXx）了，學(xué) Java 學(xué)的?？梢猿閹讉€小類把耦合性強的方法封裝起來。
有插件機制，插件對象通過 addExtension 方法注入到 SvgCanvas.extensions 對象。
可以看到注冊了 grid（網(wǎng)格）、markers（標尺）之類的插件。
關(guān)于 UI 層和內(nèi)核層的通信，UI 層改數(shù)據(jù)，會直接改內(nèi)核層，然后再改 UI 層。
這里的 zoom 有兩個數(shù)據(jù)源，可能會出現(xiàn)改了一個忘記改另一個的情況。建議只使用一個內(nèi)核層數(shù)據(jù)源，改這個數(shù)據(jù)源后通過事件通知 UI 層或其他層做數(shù)據(jù)同步。多數(shù)據(jù)源是壞文明。
渲染方案是 SVG。
SVG 編輯器用 SVG，相當合理。
對于圖形樹的實現(xiàn)、圖形拾取（點選）、圖形渲染，SVGEdit 都交給瀏覽器都去實現(xiàn)。
SVG 對一般前端開發(fā)是非常好上手的，不需要太多圖形知識，本質(zhì)就是一個有層級的 DOM 元素樹，前端同學(xué)再熟悉不過了，只是元素專門用來描述圖形。
但因為遠離底層，不方便做一些渲染優(yōu)化和緩存，圖形多的時候很卡，不適合做高性能圖形編輯器。
靈活性也較差，比如一個 0.5 線寬的直線還把畫布縮小了，根本就點不中好不好，希望點擊區(qū)域可以外擴一些，或想點中一個設(shè)置為不可見的圖形點擊區(qū)域。這個做不了。
當然一個可以考慮的方案是 SVG 只是單純做渲染，圖形拾取自己實現(xiàn)。
但 SVG 有一個強大的優(yōu)點：方便做功能擴展，進行二次開發(fā)。
比如你要在圖形編輯器里加一個新的模塊，比如倒計時、一個表單組件，網(wǎng)上找到輪子集成進去會很方便。因為 SVG 里面可以嵌入 DOM 元素，DOM 元素里也可以嵌入 SVG。
UI 層原本是基于 jQuery UI 的，但后面丟棄 jQuery 改用 Web Component 進行了重構(gòu)。
順帶一提，有個叫做 jPicker 的基于 jQuery 的拾色器插件，也做了魔改，去掉對 jQuery 的依賴。
它沒有用 React、Vue 這些 UI 框架，而是選擇 Web Component，我認為這是一個糟糕的決策。
Web Component 雖然被 瀏覽器原生支持，但并不是主流，生態(tài)一般，輪子不如 React 和 Vue 豐富。
我們繼續(xù)看代碼。
以左側(cè)欄 LeftPanel 為例，HTML 為：
這里的 se-button 就是一個 Web Component 組件，里面有局部樣式和交互邏輯，類似 React 和 Vue。
全局樣式文件是 svgedit.css。
LeftPanel 類初始化后會調(diào)用 init 方法。
該方法會：
$id 這些是工具類方法。
下面代碼的作用是，給選擇工具按鈕綁定方法，該方法更改編輯器的模式為選擇模式。
LeftPanel 的 init 方法是在 EditorStartUp 類（這個是 Editor 的父類）的 init 方法中被調(diào)用的。
點選 圖形的圖形拾取是交給瀏覽器，監(jiān)聽鼠標按下事件的方式，讀取 mouseEvent.target。
因為可能有組的存在，所以會不斷地讀 parentNode 找最頂層的 group 元素，直到當前 group 結(jié)束。
框選 會在點中空白區(qū)域出現(xiàn)，并將當前模式（currentMode）臨時切換為 multiselect。
期間產(chǎn)生的選區(qū)矩形元素保存在 svgCanvas.rubberBox 屬性中。
拖拽修改選區(qū)矩形寬高時，會遞歸 SVG 樹，計算它們的 bbox，判斷是否和選區(qū)矩形相交。將相交的圖形放到 selectedElements 屬性中。
切換工具使用 SvgCanvas.setMode('line') 的方式。
不同工具都有各自實現(xiàn)的事件響應(yīng)函數(shù)，當用戶進行鼠標操作時，會執(zhí)行 mouseDownEvent、mouseMoveEvent、mouseUpEvent，會根據(jù) mode 執(zhí)行不同的工具的方法。
鋼筆工具對應(yīng) svgCanvas.pathActions 屬性，對應(yīng) pathActionsMethod 方法，沒有用類，而是用了閉包的方式進行邏輯封裝。
圖形工具的邏輯倒沒有抽一個對象出來，直接寫在 ouseDownEvent、mouseMoveEvent、mouseUpEvent 里。
我以前的文章說過，歷史記錄需要維護一個撤銷棧和一個重做棧。
兩個棧等價于一個數(shù)組或雙向鏈表中，加上一個指針，該指針指向多個命令中的當前命令。
撤銷就是把指向往左移動，重做往右移，新操作則把指針后面的命令丟掉，然后把這個新的操作加到數(shù)組中，并將指針后移。
SVGEdit 的歷史命令都保存在 UndoManager 類的 undoStack 數(shù)組中，并用 undoStackPointer 指針指向最新命令的位置。
SVGEdit 使用了 patch（打補丁）的方式記錄歷史操作，沒有使用圖形樹快照的方式。
下面是移動一個矩形產(chǎn)生的操作命令，它記錄了修改圖形屬性的命令，該命令保存了一個元素修改前后的屬性。
這里有個特殊的 BatchCommand 批量命令對象，它的 stack 數(shù)組記錄了一次操作要執(zhí)行的多個子命令。
其實就是 宏命令。宏命令的作用是將多個命令組合在一起批量執(zhí)行。
各種命令類保存在 svgCanvas.history 中。
UI 框架應(yīng)該選擇 React 或 Vue。
這樣項目才會有更多人使用，作為一款比較古早的編輯器才可能煥發(fā)第二春。
最好是 Vue3，國內(nèi)很多中小廠在用，那里的程序員不喜歡造輪子，這樣他們就會用你這個編輯器，然后社區(qū)繁榮，贏。當然最好 React 和 Vue 都做。
SVGEdit 丟掉 jQuery 用 Web Component，我不是很理解，外國比較流行這個？這樣就不好集成進公司的項目中，不利于項目的持續(xù)發(fā)展。
不要使用單例。
我看不少地方用了單例，單例模式有個問題，如果頁面需要同時有多個編輯器實例，比如做兩張圖紙對比功能。
那它們就會因為單例的對象共享導(dǎo)致沖突，比如改了編輯器 A 的設(shè)置屬性會同時改了編輯器 B 的，這不是我們想要的。
類的面向?qū)ο箫L(fēng)格是比較好的解法，每個對象都要創(chuàng)建一個新的實例，就不會沖突了。
較多的 UI bug。
選中一個元素就能復(fù)現(xiàn)，此外 UI 也不好看。
監(jiān)聽鼠標事件應(yīng)該放到 document 下。
放到 SVG 的容器或 SVG 上其實并不是很好的做法，當光標移到這些元素外時，監(jiān)聽就消失了，綁定到 doucment 下即使光標移動到瀏覽器外都能監(jiān)聽。
SVGEdit 支持的功能很多，但 UI 比較復(fù)古，小 bug 有點多的樣子。
但如果你要做 SVG 編輯器，與其從零開始，不如基于 SVGEdit 做去二次開發(fā)。
我是前端西瓜哥，關(guān)注我，學(xué)習(xí)更多圖形編輯器知識。
家好，我是 Echa。
今天來分享 50 個超實用的 Chrome 瀏覽器擴展！
JSON Viewer Pro 用于可視化JSON文件。其核心功能包括：
輸入界面如下：
格式化之后：
JSONVue 是一個JSON數(shù)據(jù)查看器，主要用來格式化JSON數(shù)據(jù)：
Library Sniffer 是一款給開發(fā)者使用的工具，能夠探測當前網(wǎng)頁所使用的類庫、框架和服務(wù)器環(huán)境，為開發(fā)者提供了方便。
Wappalyzer 擴展可以用來識別網(wǎng)站背后的底層技術(shù)。通過此擴展，可以了解特定應(yīng)用程序是否是用 React、Vue、Angular、PHP等編寫的。還可以訪問有關(guān) Web 服務(wù)器、編程語言、框架、內(nèi)容管理系統(tǒng)、分析的信息工具、數(shù)據(jù)庫等。
WhatRuns 擴展程序只需單擊一下即可找到任何網(wǎng)站上使用的技術(shù)。
使用PerfectPixel插件可以將設(shè)計圖加載至網(wǎng)頁中，與已成型的網(wǎng)頁進行重疊對比，以幫助開發(fā)和設(shè)計人員規(guī)范網(wǎng)頁像素精度。這是一款可以優(yōu)化前端頁面顯示的Chrome插件。
可以使用此擴展程序快速清除緩存，無需任何確認對話框、彈出窗口等?？梢栽谶x項頁面上自定義要清除的數(shù)據(jù)和數(shù)量，包括：應(yīng)用程序緩存、緩存、Cookie、下載、文件系統(tǒng)、表單數(shù)據(jù)、歷史記錄、索引數(shù)據(jù)庫、本地存儲、插件數(shù)據(jù)、密碼和 WebSQL。
VisBug 是一個使用 JavaScript 構(gòu)建的開源網(wǎng)頁設(shè)計調(diào)試工具，它可以讓用戶使用點擊式和拖放式界面來查看網(wǎng)站的元素。
Debug CSS 是一個幫助調(diào)試CSS的插件。他可以顯示出頁面元素的輪播，按住Ctrl，并將鼠標懸浮在元素上，即可查看其信息：
CSS Viewer 是一款適用于 Web 開發(fā)人員的高效 Chrome 擴展。顧名思義，CSS 查看器可以顯示將鼠標懸停在任何網(wǎng)頁上的元素的 CSS 屬性。
EditThisCookie 是一個 cookie 管理器?？梢蕴砑樱瑒h除，編輯，搜索，鎖定和屏蔽cookies。
React Developer Tools 是開源 JavaScript 庫 React 的 Chrome DevTools 擴展。它允許我們在 Chrome 開發(fā)者工具中檢查 React 組件層次結(jié)構(gòu)。安裝此插件之后，將在 Chrome DevTools 中獲得兩個新選項卡："?? Components" 和 "?? Profiler"：
Vue.js devtools 是一款基于chrome瀏覽器的用于調(diào)試Vue.js應(yīng)用程序的插件，可以使得開發(fā)人員大大提高調(diào)試效率。支持用戶對DOM結(jié)構(gòu)數(shù)據(jù)結(jié)構(gòu)進行解析和調(diào)試功能。
Augury 可以幫助開發(fā)人員在 Google Chrome 瀏覽器中調(diào)試和分析 Angular 應(yīng)用程序。
Firebug Lite是火狐瀏覽器中著名的開發(fā)者工具firebug插件移植到Chrome中的插件，在Chrome中安裝了Firebug Lite插件以后，開發(fā)人員可以像在火狐瀏覽器中使用firebug一樣熟悉的方式來調(diào)試網(wǎng)頁內(nèi)容，其包含了基本的HTML、CSS以及Javascript的調(diào)試功能，用于幫助網(wǎng)頁前端開發(fā)工程師快速地調(diào)試網(wǎng)頁，以便及時地找到網(wǎng)頁中的BUG并及時修復(fù)。
HTML Validator 在 Chrome 的開發(fā)者工具中添加了 HTML Validator。HTML 頁面的錯誤數(shù)通過瀏覽器狀態(tài)欄中的圖標顯示，詳細信息可以在瀏覽器的開發(fā)者工具中查看。
Web Developer 擴展為帶有各種 Web 開發(fā)工具的瀏覽器添加了一個工具欄按鈕。該擴展適用于 Chrome 和 Firefox，并且可以在這些瀏覽器支持的任何平臺上運行，包括 Windows、macOS 和 Linux。
Requestly 是一款Chrome和Firefox瀏覽器插件，提供URL轉(zhuǎn)發(fā)、修改HTTP請求和結(jié)果、插入腳本等功能。
Window Resizer 主要用來調(diào)整瀏覽器窗口的大小以模擬各種屏幕分辨率。
Responsive Viewer 是在一個視圖中顯示多個屏幕的 Chrome 擴展程序。該擴展將幫助前端開發(fā)人員在開發(fā)響應(yīng)式網(wǎng)站/應(yīng)用程序時測試多個屏幕。
此插件允許直接從瀏覽器發(fā)送跨域請求，而不會收到跨域錯誤?？梢允褂么瞬寮采w Request Origin 標頭，并將 Access-Control-Allow-Origin 設(shè)置為 *.
ColorPick Eyedropper 是一個放大的吸管和顏色選擇器工具，可讓從網(wǎng)頁等中選擇顏色值。
CSS Peeper 用于檢查和復(fù)制元素樣式的優(yōu)秀工具，使用 CSSPeeper 可以將鼠標懸停在網(wǎng)頁中的任何元素上，然后單擊鼠標即可復(fù)制元素的樣式。
24. Dimensions
Dimensions是一款能幫助使用者對網(wǎng)頁上各種元素屬性之間的距離進行測量的Chrome頁面元素測量插件，該插件在點擊啟動插件圖標后，可以對頁面中圖像、輸入字段、按鈕以及視頻等頁面元素之間上下左右的方位尺寸進行測量，同時還可以通過使用快捷鍵來快速啟用或關(guān)閉該插件的功能，簡單實用。
Site Palette 用于生成調(diào)色板。設(shè)計師和前端開發(fā)人員必備的工具。可以通過這款插件輕松獲取網(wǎng)站的配色方案。
ColorZilla 是一款功能強大地提取網(wǎng)頁色彩的工具；也是個快速的對顏色進行調(diào)節(jié)的Chrome插件，許多的用戶將這款軟件稱呼為顏色吸取插件，它提取的顏色是非常的多樣化，還可生產(chǎn)css顏色的代碼等。
當我們想查看網(wǎng)頁中文字的字體時，最常用的方法就是在控制臺查看文字的字體樣式。那還有沒有更簡單的方法呢？WhatFont 就是一個查看網(wǎng)頁字體的Chrome擴展。只需要的點擊擴展圖標，再點需要查看為文字即可：
Fonts Ninja 可以從任何網(wǎng)站識別字體、添加書簽、試用并購買它們。
使用 BrowserStack 快速啟動擴展在任何瀏覽器中啟動一個新的測試會話。最多可設(shè)置 12 個瀏覽器以實現(xiàn)快速訪問并最大限度地減少切換瀏覽器所花費的時間。
Toby 是一款 Chrome 新標簽頁工具，能夠?qū)⑽醋x的標簽頁分組顯示在新標簽頁中，這樣就能把所有未看完的標簽頁都關(guān)閉了。分組相當于多個 Chrome 窗口，將你的標簽頁都拖進 Toby 中，就不需要實時開著占地方了。
該擴展提供了每日熱門開發(fā)者新聞，不需要再浪費時間搜索高質(zhì)量的文章了。
Momentum 擁有漂亮的新標簽頁面，每日更新精彩背景壁紙圖片，可設(shè)置每日新鮮事焦點以及跟蹤待辦事項，無廣告，無彈窗。
The Great Suspender 是一個輕量級的擴展用來減少 Chrome 的內(nèi)存占用。如果同時打開許多選項卡，在可配置的時間之后未查看的選項卡將在后臺自動掛起，從而釋放該選項卡消耗的內(nèi)存和 CPU。
Session Buddy是一個可以幫助用戶查看、新增、編輯當前網(wǎng)站Session狀態(tài)的Chrome插件。用戶可以利用該插件保存網(wǎng)站當前的狀態(tài)以便在關(guān)閉Chrome或關(guān)閉計算機后恢復(fù)，從而達到節(jié)省內(nèi)存的作用。
Octotree 旨在讓 GitHub 體驗更好。通常，為了檢查 Github 中的子文件夾，需要手動單擊文件夾并導(dǎo)航。Octotree 擴展解決了這個問題。此擴展在項目的左側(cè)顯示存儲庫的目錄結(jié)構(gòu)，這有助于更好地理解文件夾結(jié)構(gòu)。
1_EKF88oqIyX6FzgueCKdtXg.gif
File Icons for GitHub and GitLab 可以將 GitHub 和 GitLab 上的原始文件圖標替換為特定文件類型的圖標。
ax DevTools 是一個快速、輕量級但功能強大的測試工具，由 Deque 開發(fā)的世界上最值得信賴的可訪問性測試引擎 axe-core 驅(qū)動。使用 ax DevTools 在網(wǎng)站開發(fā)過程中查找并修復(fù)更多可訪問性問題。
OctoLinker 可以將特定語言的語句（如 include、require 或 import）轉(zhuǎn)換為鏈接。當打開一個包含多個導(dǎo)入語句的文件并且想要快速打開它時，只需將鼠標懸停在鏈接的文件上并單擊即可打開。
此擴展可幫助 Web 開發(fā)人員分析網(wǎng)頁是否違反最佳實踐。
Check My Links 是一個鏈接檢查器，它可以抓取網(wǎng)頁并查找損壞的鏈接。
Checkbot 是用于驗證一組HTML頁面上的鏈接的工具。Checkbot可以檢查一個或多個服務(wù)器上的單個文檔或一組文檔。它會創(chuàng)建一個報告，該報告匯總了引起某種警告或錯誤的所有鏈接。
Google Page Speed Insighs 是一款旨在優(yōu)化所有設(shè)備上的網(wǎng)頁、提高網(wǎng)頁加載速度的工具。
META SEO inspector是一款可以幫助用戶分析網(wǎng)頁的meta信息并得到SEO評估的谷歌瀏覽器插件。
Ghostery 是強大的隱私保護擴展程序。其主要有以下功能：
AdBlock 用來在YouTube、Facebook、Twitch和其他你喜愛的網(wǎng)站上攔截廣告和彈窗。
番茄工作法（Pomodoro?）時間管理助理。? 長短兩種休息時間 ? 帶有倒計時顯示的工具欄圖標 ? 追蹤Pomodoro歷史和統(tǒng)計訊息 ? 可配置的長休間隔 ? 可配置的定時器時長 ? 桌面與新標簽頁通知 ? 超過20種音效可選的聲音通知 ? 計時器秒針走動音效
Loom 可以用來快速錄制視頻，并且能夠?qū)浿频囊曨l上傳到指定的網(wǎng)頁中，Loom還支持在用戶點擊啟動插件時，立即捕捉屏幕圖像，同時開始視頻錄制操作，還可以將錄制好的視頻復(fù)制到粘貼板中存儲。
GoFullPage 是一款全屏截圖插件（整個網(wǎng)頁截圖），完整捕獲您當前頁面的屏幕，進行滾動截圖，而無需任何額外的權(quán)限。單擊擴展程序圖標，然后將其傳輸?shù)狡聊豢煺盏男聵撕烅撝校梢栽谄渲袑⑵湎螺d為圖像或PDF，甚至只需拖動即可，保存到桌面。
BetterViewer 可以提供更好的圖像查看體驗，旨在替代基于 Chrome 瀏覽器中內(nèi)置的圖像查看模式。使用時，只需在頁面右鍵點擊圖片，選擇“在新標簽頁中打開圖片”即可。
svg-grabber 是一個快速預(yù)覽并從網(wǎng)站獲取所有 svg 的工具?？梢杂脕眍A(yù)覽、下載和復(fù)制網(wǎng)站中所有 SVG 圖標和插圖的代碼。
anvas技術(shù)的誕生可謂是讓繪圖技術(shù)如虎添翼，本文將推薦一系列Canvas圖形繪制、流程圖、組織圖、甘特圖、全景圖、3D庫、VR/AR、圖像編輯等方面的庫，希望助你在Canvas繪圖時尋得一把趁手的利器。
同時，愣錘將Canvas的相關(guān)資源進行的收錄整理分類，更多的資源請關(guān)注Github項目地址awesome-canvas。目前該庫持續(xù)維護中，已收錄大約200+的Canvas庫，以及資源網(wǎng)址、插件、書籍、博客等資源。
圖形處理庫
圖形繪制是Canvas中最基本的內(nèi)容，但是Canvas本身提供的api比較基礎(chǔ)，開發(fā)起來低效。而且也缺少完整的事件系統(tǒng)、區(qū)域監(jiān)測、緩存等等。下面讓我們來看幾款高效的圖形處理庫吧。
簡介：Konva是一個 HTML5 Canvas JavaScript 框架, 通過擴展 Canvas 的 2D Context 讓桌面端和移動端Canvas支持交互性，使其支持高性能動畫、過渡、節(jié)點嵌套、分層、過濾、緩存、事件處理等等。Konva官方地址（https://konvajs.org/docs/sandbox/index.html）
除上述之外，文檔相對友好，但也僅僅是相對于同類庫的文檔友好那么一滴滴，社區(qū)有維護一個中文文檔。
簡介： 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 [官方網(wǎng)站在線演示]（https://viliusle.github.io/miniPaint/） - 在線版的PS。PS這款軟件大家都不陌生，web版本的如何呢？請看下圖：
簡介：DarkroomJS [官方網(wǎng)站在線演示]（https://pqina.nl/pintura/?affiliate_id=854594675） - 基于Fabricjs的瀏覽器端可擴展的圖像編輯工具
簡介：fabric-brush [官方網(wǎng)站在線演示] （https://tennisonchan.github.io/fabric-brush/）- 基于Fabric.js的Canvas筆刷工具
簡介：fabricjs-image-editor-origin [官方網(wǎng)站在線演示] （https://fabricjs-image-editor-f62330.netlify.app/）- Fabricjs圖像編輯器
簡介：react-sketch [官方網(wǎng)站在線演示] （http://tbolis.github.io/showcase/react-sketch/）- 基于React、Fabricjs的素描應(yīng)用
簡介：glitch-canvas [官方網(wǎng)站在線演示]（https://snorpey.github.io/jpg-glitch/） - 給畫布元素添加故障效果
簡介：animockup [官方網(wǎng)站在線演示] （https://animockup.com/）- 在瀏覽器中創(chuàng)建動畫模型，并導(dǎo)出為視頻或動畫GIF
物理引擎
物理引擎使用質(zhì)量、速度、摩擦力和空氣阻力等變量，模擬了一個近似真實的物理系統(tǒng)，為剛性物體賦予真實的物理效果，比如重力、旋轉(zhuǎn)和碰撞等效果，讓物體的行為表現(xiàn)的更加趨向真實。例如，守望先鋒的英雄在跳起時，系統(tǒng)所設(shè)置的重力參數(shù)就決定了他能跳多高，下落時的速度有多快，子彈的飛行軌跡等等。
簡介： matter.js是一個用于 Web 的 JavaScript 2D 物理引擎庫 matter.js官方地址（https://brm.io/matter-js/demo/#wreckingBall）
matter.js相較于老牌的 Box2D 引擎庫更為輕量級（壓縮版僅有 87 KB），并且在性能和功能方面也不遜色。
流程圖/組織圖/圖編輯等
工業(yè)軟件開發(fā)，一直是軟件領(lǐng)域復(fù)雜而又重要的一環(huán)。其對技術(shù)人的要求要是更高的，下面看看有哪些可以輔助我們快速開發(fā)的庫或者參考的場景吧。
簡介： gojs是一款可以非常方便的開發(fā)交互式流程圖、組織結(jié)構(gòu)圖、設(shè)計工具、規(guī)劃工具、可視化語言的JavaScript圖表庫。 gojs.js官方地址（https://gojs.net/latest/）
文檔中提供了大量的demo可供參考，基本對于常見的圖編輯程序做到了全覆蓋。
簡介：butterfly [官方網(wǎng)站在線演示] （https://butterfly-dag.gitee.io/butterfly-dag/demo/analysis）一個基于JS的數(shù)據(jù)驅(qū)動的節(jié)點式編排組件庫，同時適用于React/Vue2組件。
簡介：wireflow [官方在線演示]（https://app.wireflow.co/） 用戶流程圖實時協(xié)作工具。
簡介：Flowy [官方在線演示]（https://alyssax.com/x/flowy） - 用于創(chuàng)建流程圖的最小javascript庫。使創(chuàng)建具有流程圖功能的 WebApp 成為一項非常簡單的任務(wù)。通可以在幾分鐘內(nèi)構(gòu)建自動化軟件、思維導(dǎo)圖工具或簡單的編程平臺。
簡介：Workflow Designer [官方在線示例] （https://guozhaolong.github.io/wfd/）- 基于G6和React的可視化流程編輯器。
簡介：web-pdm [在線示例]（https://erd.zyking.xyz/demo） - 用G6做的ER圖工具，最終目標是想做成在線版的powerdesigner.
簡介：X-Flowchart-Vue [官方在線演示] （http://oxoyo.co/X-Flowchart-Vue/）- 基于G6和Vue的可視化圖形編輯器。
簡介：OrgChart [官方在線演示] （https://dabeng.github.io/OrgChart/）- 簡單直接的組織圖插件
簡介：welabx-g6 [官方在線示例] （https://claudewowo.github.io/welabx-g6/dist/?_blank）- 基于G6和Vue的流程圖編輯器。
全景圖/AR/VR
5g的普及、虛擬現(xiàn)實/增強現(xiàn)實落地、元宇宙的火熱......似乎讓Canvas再度推上了技術(shù)的頂峰。下面讓我來看看開發(fā)這些場景常見的Canvas庫吧。
簡介：Pannellum [官方在線演示] （https://pannellum.org/）- 輕量、免費、開源的web全景查看器。
簡介：Panolens.js [官方在線演示] （https://pchen66.github.io/Panolens/）- Panolens.js基于Three.JS，主要研究領(lǐng)域是全景、虛擬現(xiàn)實和潛在的增強現(xiàn)實。
簡介：JS-Cloudimage-360-View [官方在線演示] （https://scaleflex.github.io/js-cloudimage-360-view/）一個簡單的、交互式的資源，可以用來提供您的產(chǎn)品的虛擬游覽。
簡介：A-Frame [官方在線演示]（https://aframe.io/） A-Frame 除了幫助您構(gòu)建 360 度媒體播放器外，它還提供了許多附加功能。其他功能可幫助您增強網(wǎng)站的虛擬現(xiàn)實體驗。
3D庫
簡介：three.js [官方在線演示]（https://threejs.org/examples/） - 創(chuàng)建易于使用、輕量級、跨瀏覽器的通用3d js庫。three.js就不多介紹了，大家想必都很熟悉。
簡介：zdog [官方在線演示]（https://zzz.dog/） - 基于canvas和SVG設(shè)計師友好的偽3D引擎
簡介：seen [官方在線演示] （http://seenjs.io/）- 使用SVG或Canvas渲染3D場景。
簡介：Oimo.js [官方在線演示]（http://lo-th.github.io/Oimo.js/index.html#basic） - 輕量級的JS 3D物理引擎。
簡介：phoria.js [官方在線演示]（http://www.kevs3d.co.uk/dev/phoria/index.html） - 用于在 HTML5 畫布 2D 渲染器上進行簡單 3D 圖形和可視化的 JavaScript 庫。它不使用 WebGL。適用于所有 HTML5 瀏覽器，包括桌面、iOS 和 Android。
原文來自：https://juejin.cn/post/7038267477121302542
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
