前言

大家好，我是 LeaferJS 的創(chuàng)始人萬超。

盛夏的綠葉在雨后陽光的照耀下熠熠生輝，正如 Leafer 的寓意：看見希望，不斷成長。

在此，我很高興的向大家宣布，經過我們 3 年多開發(fā)的 LeaferJS 開源引擎終于打磨成熟，迎來了正式版的發(fā)布～

這距離我們上次公測版的發(fā)布，已經過去了整整一年。

與用戶相互成就

在過去的一年里，無數(shù)的用戶需求和反饋如潮水般涌來，不斷地滋潤和雕琢著這款產品，使其功能更加豐富，且更貼合實際使用場景，同時我們的文檔也變得更加通俗易懂。即使期間產品還不完善，我們依然無法阻擋用戶的熱情！

感謝每一位撰寫文章、教程、傳播、提 Bug、建議、開發(fā)產品、Demo、插件、慷慨贊助的用戶～

隨著正式版的發(fā)布，更多的企業(yè)可以將 LeaferJS 用于生產環(huán)境，其周邊生態(tài)也將迎來蓬勃發(fā)展。

由淺入深帶你了解 LeaferJS

熟悉我們的朋友都知道，我們一直在朝著一個極具吸引力的偉大愿景邁進。我們的引擎能在短短的 1.5 秒內創(chuàng)建 100 萬個可交互矩形，僅占用 350MB 內存。在繼續(xù)保持這一優(yōu)勢的同時，正式版帶來了眾多實用的功能，拓寬了使用場景。

下面讓我由淺入深，從前端開發(fā)的視角，帶你看看 LeaferJS 可以如何應用在你的工作中。

首先，讓我們通過代碼看看 LeaferJS 是如何工作的：

接下來，我們會從以下三個入門場景開始說起：

最后，再聊一聊壓軸的高級場景以及我們的愿景。

高效繪圖

相信每家公司的產品都有生成長圖、產品海報進行分享的需求，尤其是在小程序中。

我們提供了易于上手的自動布局功能（類似 Flex 但更簡潔），以及按中心點繪制的功能。這將為繪制海報帶來一種全新的開發(fā)體驗，應對頻繁變化的需求，無需再手動測量文本進行布局。此外，通過簡單易控的漸變、內外陰影、遮罩、擦除等功能，能夠輕松實現(xiàn)各種專業(yè)的設計效果。

我們還提供了一支神奇的 Pen，可以像繪畫一樣，快速畫出不同樣式的路徑和元素組合。

import { Leafer, Pen } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const pen = new Pen() 
pen.setStyle({ fill: { type: 'radial', stops: ['#FF4B4B', '#FEB027'] } })
pen.roundRect(0, 0, 100, 100, 30)
pen.setStyle({ y: -5, fill: 'white' })
pen.moveTo(40, 30).bezierCurveTo(70, 30, 90, 60, 63, 80).quadraticCurveTo(50, 88, 40, 80).bezierCurveTo(10, 60, 50, 40, 40, 30)
leafer.add(pen)

此外，你還可以在我們官網的設計工具中提前編輯內容，將其導出為 JSON 文件，隨后調整變量并導入，即可自動生成圖片。更重要的是，我們支持在小程序環(huán)境中生成海報圖片，并且支持多倍圖導出。

UI 交互

組態(tài)、流程圖

我們提供了豐富的箭頭樣式和元素狀態(tài)，結合用戶提供的連線插件，你可以快速的搭建一個組態(tài)、流程圖軟件。

UI 交互界面

在 Canvas 環(huán)境中實現(xiàn)一套 UI 交互界面一直是業(yè)內的挑戰(zhàn)，我們用極少的代碼初步實現(xiàn)了這一目標，并提供了豐富的跨平臺交互事件和手勢，以及類似 CSS 的交互狀態(tài)樣式和光標樣式。

結合自動布局的功能，使你能夠快速在組態(tài)、游戲開發(fā)、數(shù)據(jù)可視化、富媒體和創(chuàng)意設計等場景中集成高性能的 UI 交互界面功能。未來可以朝著更高效的可視化編程方向發(fā)展。

以下是我們社區(qū)的用戶正在開發(fā)的 element-plus-leafer UI 組件：

小游戲

我們有豐富的繪圖、交互功能，再結合你喜歡的動畫庫、物理引擎，可以將 LeaferJS 用來開發(fā)一些好玩的小游戲。

以下是我們社區(qū)的用戶正在開發(fā)的小游戲合集：

圖形圖像編輯

圖片裁剪

相信每家公司的產品都有裁剪頭像和圖片的需求。

我們提供了完善的圖形編輯功能，并為圖片裁剪場景準備了貼心的配置，例如裁剪遮罩、手機端手指縮放和旋轉，讓你可以通過最簡單的代碼搭建起一個屬于自己的圖片裁剪工具。

圖片編輯器

相信你用過各種各樣的圖片編輯器，自己開發(fā)一套絕非易事，而我們讓每個人都可以上手嘗試。

我們?yōu)閳D片編輯器的開發(fā)，提供了豐富的功能和 自定義編輯器樣式配置， 可移動、縮放、旋轉、傾斜，支持多選、框選、打組、 雙擊進組，鎖定、層級。支持自定義編輯工具和內部編輯器。

我們還與第三方開發(fā)者攜手提供了開箱即用的插件，如標尺、視窗控制、滾動條、文本編輯，對齊吸附、SVG 導出插件也即將開發(fā)，這些插件可以節(jié)省你大量的開發(fā)工作。

短視頻

如今已是短視頻橫行的時代，可以通過開源的 canvas 轉視頻庫，將 LeaferJS 的動畫、編輯內容導出視頻，幫助企業(yè)快速批量生成短視頻。

深入了解 LeaferJS

相信通過以上三個入門場景的了解，你已經對 LeaferJS 有了初步認識，但我們能做的事情絕對不僅僅于此，接下來我將帶你了解一些高級場景，以及我們的愿景。

在線設計

如果你希望打造一款專業(yè)的在線設計軟件，如矢量設計軟件、 UI 設計軟件、白板軟件、流程圖設計軟件，低代碼編輯軟件、矢量雕刻軟件、CAD 建筑設計軟件、EDA 電路設計軟件、視頻剪輯軟件等， 我們可以幫助你節(jié)省這 3 年的創(chuàng)業(yè)時間。

我們的底層正是為開發(fā)專業(yè)級的圖形圖像編輯軟件而架構的（因為它能創(chuàng)造出一切的場景），提供了開箱即用的功能和優(yōu)秀的擴展能力，你可以站在 LeaferJS 的肩膀上前行，快速打造出可以改變人們生活方式的數(shù)字產品。

以下是我們官方收錄的部分產品，期待未來你的產品也能出現(xiàn)在這里。

大型場景

以下是我們官網列舉的一些大型應用場景（遠不局限于此），可以作為你啟動新產品的參考。

逐步開放

我們通過核心包+場景插件的設計，來逐步滿足不同場景的需求，每一個場景成熟后會集成為一個場景包，方便用戶快速安裝使用。第三方開發(fā)者也可以參與補充場景。

我們現(xiàn)階段仍主要專注于繪圖、編輯器場景（核心場景），之后會開始訓練 AI 繪圖和提升性能。

使命與愿景

我們致力于通過 LeaferJS 實現(xiàn)一套簡潔、開放、現(xiàn)代化的 UI 繪圖語言標準，便于 AI 理解，人類可視化使用，并為數(shù)字化產品開發(fā)提供跨平臺、輕量化、高性能的運行時。

我們希望不同的軟件之間能夠溝通、協(xié)作、共享繪圖數(shù)據(jù)與數(shù)字界面，通過不斷革新的圖形技術和配套支持， 吸引更多的開發(fā)者加入使用，建立起一個開放的生態(tài)環(huán)境，溝通有無，以推動行業(yè)的快速發(fā)展，并誕生出更多有創(chuàng)意的技術和產品，尤其是 AI + 可視化編輯方向的產品。

我們的性能優(yōu)化目標是想實現(xiàn)流暢操作 百萬級靜態(tài)元素 和 十萬級動態(tài)游戲元素( GPU 加速)。

熱愛與勇氣，讓夢想成為現(xiàn)實

我們不僅在用心創(chuàng)造一款有意義的開源產品（降低創(chuàng)業(yè)者的研發(fā)成本，推進技術的進步，改變未來產品的開發(fā)方式），更是在踐行傳播一種人人所向往的、有人文關懷的卓越文化。

創(chuàng)業(yè)、創(chuàng)新的道路是艱難和孤獨的，正是這樣的文化和使命感，幫助我們度過了漫長的 3 年時光，日復一日的精進，并克服了重重難關，不斷的凝聚起了更多的人，一起朝著愿景前進。

隨著正式版的發(fā)布，我們找到了愿意在財務上持續(xù)幫助我們的人（非投資），這讓我們可以心無旁騖的持續(xù)推動 LeaferJS 這個飛輪，共同打造我們喜愛的開源社區(qū)，設計可加速發(fā)展的上層應用商業(yè)模式，讓 LeaferJS 能夠走向世界，惠及到更多的人。

恭喜

至此，你已完成了對 LeaferJS 全貌的了解，你又多了一個實用的提效工具。

作者：LeaferJS
鏈接：https://juejin.cn/post/7389651690297262091
來源：稀土掘金
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處。