leafer-draw
Web 版 ｜ Worker 版 ｜ Node 版 ｜ 小程序版
leafer-draw 仅提供绘图功能（支持导出），减少了 App 、查找元素、事件交互等功能代码。
如果您需事件交互功能，请使用 leafer-ui。
安装
在小程序环境中运行，了解小程序使用 npm 包的注意事项。
sh
npm install @leafer-draw/miniappsh
pnpm add @leafer-draw/miniappsh
yarn add @leafer-draw/miniappsh
bun add @leafer-draw/miniapp下载
你也可以将库文件直接下载到本地 import 引入。
sh
https://unpkg.com/@leafer-draw/miniapp@1.0.0-rc.27/dist/miniapp.module.js
https://unpkg.com/@leafer-draw/miniapp@1.0.0-rc.27/dist/miniapp.module.min.js注意
微信小程序自身加载 svg 图片有问题。
阴影、遮罩等正在适配兼容性。
重要警告
微信小程序 iOS 端 3.0.0 之后 view 中的 canvas drawImage 无法绘制离屏画布 导致白屏（纯离屏画布模式可用） 。
生成海报
创建一个矩形, 然后导出为图片（离屏画布模式可用）。
ts
import { Leafer, Rect } from '@leafer-draw/miniapp'
Page({
onReady() {
// 自动创建一个 350*800 的离屏画布
const leafer = new Leafer({ width: 350, height: 800 })
const rect = new Rect({
x: 100,
y: 100,
width: 100,
height: 100,
fill: '#32cd79',
})
leafer.add(rect)
// 自动保存到相册
leafer.export('album.png', { screenshot: true }).then(() => {
// 提示保存到相册成功逻辑
})
},
})使用
使用方式、全局变量和 leafer-ui 一致, 只需改下包名，即可运行官网示例代码。