LeaferUI 简洁的UI绘图框架

程序笔记 2024年08月10日09:25 阅读(120)

LeaferUI 是什么？

Leafer UI 是基于 LeaferJS 开发的一套绚丽多彩的 UI 绘图框架，帮助开发者快速生成图形界面。LeaferJS 是一个基于 HTML5 Canvas 开发的 2D 绘图渲染引擎，在 web 上绘图性能非常出众，和同类图形引擎相比，渲染耗时少、占用内存超低。

LeaferJS官网：https://www.leaferjs.com/

Leafer UI中文官方文档：https://leaferjs.com/ui/guide/start.html

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

Leafer UI 的技术特性

易学易用：基于Javascript、Canvas API构建，提供容易上手的API和文档；

简洁、开放、现代化的 UI 绘图框架，并提供跨平台、轻量化、高性能的运行时；

丰富的图形表现，能够实现各种绚丽多彩的效果，可媲美当前主流的设计软件；

性能优秀，创建 100 万个可交互的矩形，首屏渲染最快仅需 1.5 秒。比同类引擎快 10 倍左右；

内存占用低，创建 100 万个可交互的矩形，仅占用 350M 内存。比同类引擎节省 10 倍以上内存；

支持 web 端和 node.js 服务端，马上就支持小程序端了，这也是我希望的需求，非常期待。

LeaferUI 使用方法

安装 Leafer UI

npm install leafer-ui

也可以直接在<script>引入

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

简单的使用示例

<!DOCTYPE html>
<html>
  <head>
    <title>Demo | Leafer UI</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <script src="https://unpkg.com/leafer-ui"></script>
  </head>

  <body></body>

  <script>
    var Leafer = LeaferUI.Leafer
    var Rect = LeaferUI.Rect

    var leafer = new Leafer({ view: window })

    var rect = new Rect({
      x: 100,
      y: 100,
      width: 200,
      height: 200,
      fill: '#32cd79',
      draggable: true,
    })

    leafer.add(rect)
  </script>
</html>

这样就能跑起来了。LeaferUI 很像游戏引擎，内置了一些绘图的 api 可以很方便地调用，比如绘制各种矩形、圆形、扇形，以及各种常见的多边形，当然基本的图片和文字，也都能渲染。另外还有容器、渐变、线条等api，有了这些 api，我就可以很容易构建一个简约的用户设计操作界面，根据设计模板来实现合成画册或者海报的功能了。