超碰人人人人人,亚洲AV午夜福利精品一区二区,亚洲欧美综合区丁香五月1区,日韩欧美亚洲系列

前言

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

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

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

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

與用戶相互成就

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

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

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

由淺入深帶你了解 LeaferJS

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

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

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

接下來，我們會(huì)從以下三個(gè)入門場景開始說起：

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

高效繪圖

相信每家公司的產(chǎn)品都有生成長圖、產(chǎn)品海報(bào)進(jìn)行分享的需求，尤其是在小程序中。

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

我們還提供了一支神奇的 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)

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

UI 交互

組態(tài)、流程圖

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

UI 交互界面

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

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

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

小游戲

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

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

圖形圖像編輯

圖片裁剪

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

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

圖片編輯器

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

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

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

短視頻

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

深入了解 LeaferJS

相信通過以上三個(gè)入門場景的了解，你已經(jīng)對(duì) LeaferJS 有了初步認(rèn)識(shí)，但我們能做的事情絕對(duì)不僅僅于此，接下來我將帶你了解一些高級(jí)場景，以及我們的愿景。

在線設(shè)計(jì)

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

我們的底層正是為開發(fā)專業(yè)級(jí)的圖形圖像編輯軟件而架構(gòu)的（因?yàn)樗軇?chuàng)造出一切的場景），提供了開箱即用的功能和優(yōu)秀的擴(kuò)展能力，你可以站在 LeaferJS 的肩膀上前行，快速打造出可以改變?nèi)藗兩罘绞降臄?shù)字產(chǎn)品。

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

大型場景

以下是我們官網(wǎng)列舉的一些大型應(yīng)用場景（遠(yuǎn)不局限于此），可以作為你啟動(dòng)新產(chǎn)品的參考。

逐步開放

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

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

使命與愿景

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

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

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

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

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

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

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

恭喜

至此，你已完成了對(duì) LeaferJS 全貌的了解，你又多了一個(gè)實(shí)用的提效工具。

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