#挑战30天在头条写日记#

leafer UI 是基于 Leafer 开发的一套绚丽多彩的 UI 绘图框架，可结合 AI 绘图、生成界面。

提供了常用的 UI 绘图组件，和开箱即用的功能，方便与 Figma、Sketch 等产品进行数据交换，并为跨平台开发提供了统一、丰富的交互事件，如拖拽、旋转、缩放手势等。

Leafer UI 致力于实现一套简洁、开放、现代化的 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 的功能， 需单独安装，安装编译时间会比较长，请耐心等待。

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(`<img src="${result.data}" />`)
        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"
}

应用周期?

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

图示?

渲染周期?

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

图示?

坐标体系?

用模拟现实世界的思考方式，以绿色小圆形作为参照物（背景大圆形和绿色小圆形组成一个 Group），由近及远，按层级定义为内部坐标、本地坐标、世界坐标，以方便在不同层级中进行坐标计算。

相关应用：

项目地址：

https://github.com/leaferjs/ui