当前位置：首页 >人工智能 >Leafer UI : 丰富多彩的UI绘图框架，结合AI绘图创建界面

Leafer UI : 丰富多彩的UI绘图框架，结合AI绘图创建界面

发布时间：2024-06-08 16:08:20 浏览量：497次

Leafer UI是基于Leafer开发的一套丰富多彩的UI绘图框架，可结合AI绘图生成界面。提供了常用的UI绘图组件，同时具备开箱即用的功能，方便与Figma、Sketch等产品进行数据交换。

Leafer UI致力于实现一套简洁、开放、现代化的UI绘图语言标准，并提供跨平台、轻量化、高性能的运行时，满足用户对界面表现力的需求。

通过不断革新的图形渲染技术和配套支持，Leafer UI吸引更多开发者加入使用，建立起一个开放的生态环境，促进行业的快速发展，创造出更多创新的技术和产品。

快速安装

Web 版

安装

在浏览器环境中运行，确保已安装Node.js 16.0或更高版本。

npm install leafer-ui

推荐使用速度更快的pnpm。

浏览器中嵌入

通过全局变量LeaferUI访问内部功能。

html

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

浏览器环境

需要支持ES2015语法。

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

体验

创建一个交互应用，可以缩放平移视图、拖拽矩形。

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 版

安装

在服务端环境中运行，可用于后台绘图、生成图片、自动化测试，确保已安装Node.js 16.0或更高版本。

npm install @leafer-ui/node

推荐使用速度更快的pnpm。

skia-canvas

用于在服务端环境中替代Canvas的功能，需单独安装，安装编译时间较长，请耐心等待。

体验

创建index.js文件，实现一个包含矩形的画布，并生成图片显示。

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')})

运行以下命令，然后在浏览器访问localhost:3000

node index.js

小程序版

安装

在小程序环境中运行，了解小程序使用npm包的注意事项，确保已安装Node.js 16.0以上版本。

npm

npm install @leafer-ui/miniapp

下载

你也可以将库文件直接下载到本地import引入。

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

环境

微信小程序基础库 >= 2.16.1，其他平台等小程序也会陆续支持（先支持canvas 2d接口）。

注意

微信小程序自身加载svg图片有问题，阴影、遮罩等正在适配兼容性，目前已有成功对接实际业务的用户，遇到问题可以沟通反馈。

体验

创建一个交互应用，能够横屏，可以缩放平移视图、拖拽矩形。将小程序miniprogram/pages/index文件夹下的页面替换成如下内容：

index.json

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

应用周期

从创建应用到结束，会经历创建图形、启动应用、首次布局、应用准备就绪、首次渲染、视图准备就绪、多次渲染生命周期、停止/重启、销毁等过程，形成一个应用的生命周期。

图示

渲染周期

从创建图形到完成渲染会经历数据变化、请求渲染、布局、渲染等一系列过程，形成一次完整的渲染生命周期。

图示

坐标体系

采用模拟现实世界的思考方式，定义内部坐标、本地坐标、世界坐标，以方便不同层级中进行坐标计算。

项目地址

https://github.com/leaferjs/ui

如果你对数字艺术感兴趣，想要学习游戏设计、动画制作、室内设计等等，欢迎点击点击咨询了解更多关于火星时代教育的课程信息。

上一篇北师大未来设计学院在第六届中国教博会发布五项PBL大挑战项目

下一篇提升用户体验的UI设计小技巧

热门课程推荐

热门资讯

1. 华为手机神奇“AI修图”功能，一键消除衣服！原图变身大V领深V！

最近华为手机Pura70推出的“AI修图”功能引发热议，通过简单操作可以让照片中的人物换装。想了解更多这款神奇功能的使用方法吗？点击查看！
2. 照片变漫画效果，这4个方法操作简单有效，快来试试吧！

想将照片变成漫画效果？这篇文章分享了4个方法，包括Photoshop、聪明灵犀、VanceAI Toongineer、醒图，简单操作就能实现，快来尝试一下吧！
3. 四款值得推荐的AI以图生图软件，有需要的赶紧来试试!

近年来,人工智能逐渐走入公众视野,其中的AI图像生成技术尤为引人注目。只需在特定软件中输入关键词描述语以及上传参考图就能智能高效生成符合要求的...
4. AI视频制作神器Viggle：让静态人物动起来，创意无限！

Viggle AI是一款免费制作视频的AI工具，能让静态人物图片动起来，快来了解Viggle AI的功能和优势吧！
5. Logo Diffusion——基于sd绘画模型的AI LOGO 生成器

这下LOGO设计彻底不用求人了。接下来详细演示一遍操作流程首先进入Logo D... 想学习更多AI技能,比如说关于怎么样利用AI来提高生产效率、还能做什么AI...
6. 一款免费无限制的AI视频生成工具火了!国内无障碍访问!附教程

人人都可以动手制作AI视频! 打开网址https://pixverse.ai/,用邮箱注册后,点击右上角Create,就可以开始创作了。 PixVerse目前有文案生成视频,和图片生...
7. 零基础10分钟生成漫画，教大家如何用AI生成自己的漫画

接下来,我将亲自引导你,使用AI工具,创作一本既有趣又能带来盈利的漫画。我们将一起探索如何利用这个工具,发挥你的创意,制作出令人惊叹的漫画作品。让...
8. 赶紧收藏好!这4个完全免费的AI视频制作网站和工具

以下是一些免费的AI视频制作网站或工具,帮助您制作各种类型的视频。 1. Lumen5:Lumen5是一个基于AI的视频制作工具,可将文本转换为视频。用户可以使...
9. AI显卡绘画排行榜:4090无悬念，最具性价比出人意料

在AI绘图领域，Stable Diffusion的显卡绘图性能备受关注。本文整理了Stable Diffusion显卡的硬件要求和性能表现，以及2023年3月显卡AI绘图效率排行榜和性价比排行榜。欢迎查看最新的AI显卡算力排行榜。
10. 四款软件让你一键生成AI美女!

就能快速生成一幅极具艺术效果的作品,让现实中不懂绘画的人也能参与其中创作!真的超赞哒~趣趣分享几款超厉害的AI绘画软件,提供详细操作!有需要的快来...