突破行业常规，超越同类图形引擎10倍以上！

大家好，我是「前端实验室」爱分享的了不起~

今天给大家分享一款新发布的UI绘图框架：Leafer UI。

由于了不起日常工作中会和绘图打交道，这个框架刚发布的时候，有注意到它。经过这两个月的尝鲜，觉得很不错，借此分享给大家。

简介

Leafer UI 是基于 LeaferJS 开发的一套绚丽多彩的 UI 绘图框架，帮助开发者快速生成图形界面。

而 LeaferJS 是一个基于 HTML5 Canvas 开发的 2D 绘图渲染引擎，在 web 上绘图性能非常出众。

核心优势

正是基于 LeaferJs，Leafer UI才有了实现百万级图形的运行能力，且创建速度极快。和同类图形引擎相比，它的渲染耗时少、占用内存超低。

以下是各个图形引擎创建出 100 万个可交互矩形的首屏渲染时长对比。

PS：以上对比数据来自官方，了不起没实验过~

以下是各个图形引擎创建出 100 万个可交互矩形的资源占用对比。

LeaferJs 经过 gzip 压缩后仅为 42KB，是同类引擎中最为精简的之一。这也是Leafer UI的优势！

还一个优势就是：够现代化，表现丰富。这得益于 Canvas 的运用。

各种渐变、图案填充、内外阴影、模糊、 遮罩、裁剪、路径转换等表现得绚丽多彩，可媲美当前主流的设计软件。

安装使用

安装 Leafer UI

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

npm install leafer-ui
# or
yarn add leafer-ui

也可以直接在<script>引入

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

使用

通过 vue-cli 创建了一个项目,并初始化一个 DOM 容器，并设置高度为 100% -- 这是我们接下绘图所需得容器空间。

<template>
  <main id="main"></main>
</template>

<style scoped>
#main {
  height: 100%;
}

</style>

接着创建绘图应用。（其实就是创建一个实例，或者说是画布，创建好画布之后，可以在画布上进行绘制元素。）

创建画布时可以传入 width 和 height 规定大小，如果不传则会自动计算容器的大小。

import { Leafer } from 'leafer-ui'
const leafer = new Leafer({
  // 挂载的元素，支持：window 、div、canvas 标签对象， 可使用id字符串
  view: 'main',
  // 默认是黑色画布，我们初始化成白色
  fill: '#fff',
  // 默认是 true， 设置为 false 后需要手动执行 start() 才能渲染
  // 当图形数量很多，异步创建完后，通过手动 start()，可以加快创建速度。
  start: false
})

下一步就是创建交互图形啦~

Leafer UI内置了一些绘图的 api，可以绘制各种容器、图形、路径、图像、文字等；还可以自定义图形。

import { Box, Ellipse } from 'leafer-ui'

const box = new Box({ 
    width: 100,
    height: 100,
    fill: '#FF4B4B'
})

const rect = new Ellipse({
    x: 60,
    y: 60,
    width: 50,
    height: 50,
    fill: '#FEB027',
    draggable: true
})

leafer.add(box)
box.add(rect)

效果如下：

除此之外，Leafer UI还提供各种高级的渲染功能，如渐变、裁剪、滤镜、事件交互、动画等等。

作为一款简洁、开放、现代化的 UI 绘图框架，Leafer UI的功能远不止这些。更多的使用，请查询官方文档尝鲜哦~

官方地址 https://www.leaferjs.com/ui/

小结

Leafer UI提供跨平台、轻量化、高性能的运行时，支持 web 端和 node.js 服务端，马上就支持小程序端了。了不起也很期待它在小程序端的应用。

这里还是要提醒大家：Leafer UI作为新发布的框架，性能和创意那是没得说的，但其生态还在完善过程中。请大家慎重用于正式生产环境！