#挑战30天在头条写日记#
leafer UI 是基于 Leafer 开发的一套绚丽多彩的 UI 绘图框架,可结合 AI 绘图、生成界面。
提供了常用的 UI 绘图组件,和开箱即用的功能,方便与 Figma、Sketch 等产品进行数据交换,并为跨平台开发提供了统一、丰富的交互事件,如拖拽、旋转、缩放手势等。
Leafer UI 致力于实现一套简洁、开放、现代化的 UI 绘图语言标准,表现力丰富,并提供跨平台、轻量化、高性能的运行时。
让不同的软件之间能够沟通、协作、共享绘图数据,让数字化产品开发可以更快、更简单。
通过不断革新的图形渲染技术、配套支持, 吸引更多的开发者加入使用,建立起一个开放的生态环境,沟通有无,互相从中受益,推动行业的快速发展,并诞生出更多有创意的技术和产品。
安装
在浏览器环境中运行。
确保你已安装了 Node.js 16.0 或更高的版本。
npm install leafer-ui
推荐速度更快的 pnpm。
浏览器中嵌入
通过全局变量 LeaferUI 访问内部功能。
html
浏览器环境
需要支持 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 16.0 或更高的版本。
npm install @leafer-ui/node
推荐速度更快的 pnpm。
skia-canvas
用于在服务端环境中替代 Canvas 的功能, 需单独安装,安装编译时间会比较长,请耐心等待。
npm install skia-canvas
体验
创建 index.js 文件,实现一个包含矩形的画布,并生成图片显示。
const { Leafer, Rect, useCanvas } = require('@leafer-ui/node')
useCanvas('skia', require('skia-canvas')) // must
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('[36m%s[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"
}
从创建应用到结束,会经历创建图形、启动应用、首次布局、应用准备就绪、首次渲染、视图准备就绪、多次渲染生命周期、停止/重启、销毁等过程,从而形成一个应用的生命周期。
从创建图形到完成渲染会经历数据变化、请求渲染、布局、渲染等一系列过程,从而形成一次完整的渲染生命周期。
用模拟现实世界的思考方式,以绿色小圆形作为参照物(背景大圆形和绿色小圆形组成一个 Group),由近及远,按层级定义为内部坐标、本地坐标、世界坐标,以方便在不同层级中进行坐标计算。
https://github.com/leaferjs/ui
页面更新:2024-02-24
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号