整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
CHARTIST.JS是我在做Material前端架構過程中偶遇的一款圖表組件。它在github擁有12.4k顆星，風格屬于簡約大方。雖然只支持基本的折線圖、條狀圖、餅狀圖,但很符合我的個人審美。我覺得作為程序員，尤其是做前端的，必須要有一定水準的審美品位，否則做出來的東西真的無法入眼。該開源作者由于缺乏經(jīng)費贊助，已經(jīng)沒有動力進行代碼更新了，我個人覺得非常惋惜。
最新版本：v0.11.4。我對它的評價是：神清氣爽、渾然天成。
https://github.com/gionkunz/chartist-js
直接去Github下載
new Chartist.Line('.ct-chart', {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
series: [
[12, 9, 7, 8, 5],
[2, 1, 3.5, 7, 3],
[1, 3, 4, 5, 6]
]
}, {
fullWidth: true,
chartPadding: {
right: 40
}
});
輯導讀：在用Axure繪制原型時，可以通過內聯(lián)框架引入echarts動態(tài)圖表、視頻等來讓原型看起來更為高大上。具體應該如何操作呢？本文作者對此進行了分析，希望對你有幫助。
Axure繪制原型時，如何讓原型看起來更為高大上？我們可以在制作原型時通過內聯(lián)框架引入echarts動態(tài)圖表、視頻等。
效果預覽：
引入echarts漸變堆疊面積圖-預覽：
引入視頻-預覽：
1）添加內聯(lián)框架
Axure新建頁面，在基本元件中選擇【內聯(lián)框架】，拖拽進頁面，點擊【樣式】，勾選隱藏邊框；
2）選擇echarts圖表
進入echarts官網(wǎng)：https://echarts.apache.org/examples/zh/index.html；選擇你需要插入Axure中的圖表；
進入所選的圖表中，可以對其數(shù)據(jù)進行修改，修改成自己想要的數(shù)據(jù)；如下圖所示：
點擊【下載示例】，將修改過后的echarts圖表以html文件格式下載下來；
3）將下載下來的圖表引入到內聯(lián)框架中
注：【鏈接一個外部的URL或文件】支持三種引入，相對路徑、絕對路徑很根路徑；
以下我是通過根目錄的方式引入html文件；需要將下載好的圖表html文件放入原型所生成html根目錄文件夾下；
雙擊內聯(lián)框架，彈出鏈接屬性，選擇【鏈接一個外部的URL或文件】，填入echarts圖表全稱。
注意：這時只有生成HTML才可以看到圖表信息，如果直接點擊預覽，會報錯【File Not Found】。
1）添加內聯(lián)框架
同上。
2）通過內聯(lián)框架引入視頻
通過內聯(lián)框架引入視頻有兩種方式，一種引入本地視頻文件、另外一種引入在線視頻。
引入本地視頻：
將視頻文件放入原型所生成html根目錄文件夾下；
雙擊內聯(lián)框架，彈出鏈接屬性，選填入本地視頻全稱。
引入在線視頻：
在這里，我以引入嗶哩嗶哩視頻為例，進入嗶哩嗶哩網(wǎng)站，選擇需要引入的視頻，點【轉發(fā)】按鈕，復制【嵌入代碼】；如下圖所示：
將代碼填入【鏈接一個外部的URL或文件】中，刪除下圖中紅框框起來的部分，然后前面加入https: ， 最終如右圖所示。
本文由 @小青 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉載
題圖來自 Unsplash，基于 CC0 協(xié)議
anvas技術的誕生可謂是讓繪圖技術如虎添翼，本文將推薦一系列Canvas圖形繪制、流程圖、組織圖、甘特圖、全景圖、3D庫、VR/AR、圖像編輯等方面的庫，希望助你在Canvas繪圖時尋得一把趁手的利器。
同時，愣錘將Canvas的相關資源進行的收錄整理分類，更多的資源請關注Github項目地址awesome-canvas。目前該庫持續(xù)維護中，已收錄大約200+的Canvas庫，以及資源網(wǎng)址、插件、書籍、博客等資源。
圖形處理庫
圖形繪制是Canvas中最基本的內容，但是Canvas本身提供的api比較基礎，開發(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的素描應用
簡介：glitch-canvas [官方網(wǎng)站在線演示]（https://snorpey.github.io/jpg-glitch/） - 給畫布元素添加故障效果
簡介：animockup [官方網(wǎng)站在線演示] （https://animockup.com/）- 在瀏覽器中創(chuàng)建動畫模型，并導出為視頻或動畫GIF
物理引擎
物理引擎使用質量、速度、摩擦力和空氣阻力等變量，模擬了一個近似真實的物理系統(tǒng)，為剛性物體賦予真實的物理效果，比如重力、旋轉和碰撞等效果，讓物體的行為表現(xiàn)的更加趨向真實。例如，守望先鋒的英雄在跳起時，系統(tǒng)所設置的重力參數(shù)就決定了他能跳多高，下落時的速度有多快，子彈的飛行軌跡等等。
簡介： 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是一款可以非常方便的開發(fā)交互式流程圖、組織結構圖、設計工具、規(guī)劃工具、可視化語言的JavaScript圖表庫。 gojs.js官方地址（https://gojs.net/latest/）
文檔中提供了大量的demo可供參考，基本對于常見的圖編輯程序做到了全覆蓋。
簡介：butterfly [官方網(wǎng)站在線演示] （https://butterfly-dag.gitee.io/butterfly-dag/demo/analysis）一個基于JS的數(shù)據(jù)驅動的節(jié)點式編排組件庫，同時適用于React/Vue2組件。
簡介：wireflow [官方在線演示]（https://app.wireflow.co/） 用戶流程圖實時協(xié)作工具。
簡介：Flowy [官方在線演示]（https://alyssax.com/x/flowy） - 用于創(chuàng)建流程圖的最小javascript庫。使創(chuàng)建具有流程圖功能的 WebApp 成為一項非常簡單的任務。通可以在幾分鐘內構建自動化軟件、思維導圖工具或簡單的編程平臺。
簡介：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再度推上了技術的頂峰。下面讓我來看看開發(fā)這些場景常見的Canvas庫吧。
簡介：Pannellum [官方在線演示] （https://pannellum.org/）- 輕量、免費、開源的web全景查看器。
簡介：Panolens.js [官方在線演示] （https://pchen66.github.io/Panolens/）- Panolens.js基于Three.JS，主要研究領域是全景、虛擬現(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 除了幫助您構建 360 度媒體播放器外，它還提供了許多附加功能。其他功能可幫助您增強網(wǎng)站的虛擬現(xiàn)實體驗。
3D庫
簡介：three.js [官方在線演示]（https://threejs.org/examples/） - 創(chuàng)建易于使用、輕量級、跨瀏覽器的通用3d js庫。three.js就不多介紹了，大家想必都很熟悉。
簡介：zdog [官方在線演示]（https://zzz.dog/） - 基于canvas和SVG設計師友好的偽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小時內與您取得聯(lián)系。
