亚洲AV免费看深爱成人|日韩av另类一级特黄片在线|中国免费一级黄片|国产av一二三区|亚洲有码AV在线|久久亚洲国产日韩欧美|成人免费AV网站|婷婷一区综合一区|亚洲AV无码导航|高级欧美成人网站

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

Leafer UI : 豐富多彩的UI繪圖框架，結(jié)合AI繪圖創(chuàng)建界面

發(fā)布時間：2024-06-08 16:08:20 瀏覽量：516次

Leafer UI是基于Leafer開發(fā)的一套豐富多彩的UI繪圖框架，可結(jié)合AI繪圖生成界面。提供了常用的UI繪圖組件，同時具備開箱即用的功能，方便與Figma、Sketch等產(chǎn)品進(jìn)行數(shù)據(jù)交換。

Leafer UI致力于實現(xiàn)一套簡潔、開放、現(xiàn)代化的UI繪圖語言標(biāo)準(zhǔn)，并提供跨平臺、輕量化、高性能的運(yùn)行時，滿足用戶對界面表現(xiàn)力的需求。

通過不斷革新的圖形渲染技術(shù)和配套支持，Leafer UI吸引更多開發(fā)者加入使用，建立起一個開放的生態(tài)環(huán)境，促進(jìn)行業(yè)的快速發(fā)展，創(chuàng)造出更多創(chuàng)新的技術(shù)和產(chǎn)品。

快速安裝

Web 版

安裝

在瀏覽器環(huán)境中運(yùn)行，確保已安裝Node.js 16.0或更高版本。

npm install leafer-ui

推薦使用速度更快的pnpm。

瀏覽器中嵌入

通過全局變量LeaferUI訪問內(nèi)部功能。

html

<script src="https://unpkg.com/leafer-ui"></script>

瀏覽器環(huán)境

需要支持ES2015語法。

瀏覽器支持：Chrome >= 51, Firefox >= 53, Safari >= 10, Edge >= 79, Opera >= 36。不支持IE。

體驗

創(chuàng)建一個交互應(yīng)用，可以縮放平移視圖、拖拽矩形。

create.tscreate.html

import { Leafer, Rect } from 'leafer-ui'const leafer = new Leafer({ view: window })const rect = new Rect({    x: 100,    y: 100,    width: 200,    height: 200,    fill: '#32cd79',    draggable: true})leafer.add(rect)

Node.js 版

安裝

在服務(wù)端環(huán)境中運(yùn)行，可用于后臺繪圖、生成圖片、自動化測試，確保已安裝Node.js 16.0或更高版本。

npm install @leafer-ui/node

推薦使用速度更快的pnpm。

skia-canvas

用于在服務(wù)端環(huán)境中替代Canvas的功能，需單獨安裝，安裝編譯時間較長，請耐心等待。

體驗

創(chuàng)建index.js文件，實現(xiàn)一個包含矩形的畫布，并生成圖片顯示。

const { Leafer, Rect, useCanvas } = require('@leafer-ui/node')useCanvas('skia', require('skia-canvas')) require('http').createServer(function (req, res) {    const leafer = new Leafer({ width: 800, height: 600 })    leafer.add(Rect.one({ fill: '#32cd79' }, 100, 100))    leafer.export('png').then(function (result) {        res.writeHead(200, { 'Content-Type': 'text/html' })        res.write(``)        res.end()    })}).listen(3000, function () {    console.log('\x1B[36m%s\x1B[0m', 'server is running at http://localhost:3000')})

運(yùn)行以下命令，然后在瀏覽器訪問localhost:3000

node index.js

小程序版

安裝

在小程序環(huán)境中運(yùn)行，了解小程序使用npm包的注意事項，確保已安裝Node.js 16.0以上版本。

npm

npm install @leafer-ui/miniapp

下載

你也可以將庫文件直接下載到本地import引入。

https://unpkg.com/@leafer-ui/miniapp

環(huán)境

微信小程序基礎(chǔ)庫 >= 2.16.1，其他平臺等小程序也會陸續(xù)支持（先支持canvas 2d接口）。

注意

微信小程序自身加載svg圖片有問題，陰影、遮罩等正在適配兼容性，目前已有成功對接實際業(yè)務(wù)的用戶，遇到問題可以溝通反饋。

體驗

創(chuàng)建一個交互應(yīng)用，能夠橫屏，可以縮放平移視圖、拖拽矩形。將小程序miniprogram/pages/index文件夾下的頁面替換成如下內(nèi)容：

index.json

{  "navigationStyle": "custom",  "pageOrientation": "auto"}

應(yīng)用周期

從創(chuàng)建應(yīng)用到結(jié)束，會經(jīng)歷創(chuàng)建圖形、啟動應(yīng)用、首次布局、應(yīng)用準(zhǔn)備就緒、首次渲染、視圖準(zhǔn)備就緒、多次渲染生命周期、停止/重啟、銷毀等過程，形成一個應(yīng)用的生命周期。

圖示

圖示

渲染周期

從創(chuàng)建圖形到完成渲染會經(jīng)歷數(shù)據(jù)變化、請求渲染、布局、渲染等一系列過程，形成一次完整的渲染生命周期。

圖示

圖示

坐標(biāo)體系

采用模擬現(xiàn)實世界的思考方式，定義內(nèi)部坐標(biāo)、本地坐標(biāo)、世界坐標(biāo)，以方便不同層級中進(jìn)行坐標(biāo)計算。

坐標(biāo)體系

相關(guān)應(yīng)用

相關(guān)應(yīng)用
相關(guān)應(yīng)用
相關(guān)應(yīng)用
相關(guān)應(yīng)用
相關(guān)應(yīng)用

項目地址

https://github.com/leaferjs/ui

如果你對數(shù)字藝術(shù)感興趣，想要學(xué)習(xí)游戲設(shè)計、動畫制作、室內(nèi)設(shè)計等等，歡迎點擊點擊咨詢了解更多關(guān)于火星時代教育的課程信息。

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定