@leafer-draw/miniapp

相对 @leafer-ui/miniapp，减少了 App 、事件交互等功能，适用于纯绘图场景。

web 版     worker 版     node 版     小程序版

在小程序环境中运行，了解小程序使用 npm 包的注意事项。

安装

npm

npm install @leafer-draw/miniapp

pnpm

pnpm add @leafer-draw/miniapp

yarn

yarn add @leafer-draw/miniapp

bun

bun add @leafer-draw/miniapp

下载 CDN 版本

你也可以将库文件直接下载到本地 import 引入，这种方式暂时使用不了额外的插件。

https://unpkg.com/@leafer-draw/miniapp@1.5.3/dist/miniapp.module.js

https://unpkg.com/@leafer-draw/miniapp@1.5.3/dist/miniapp.module.min.js

注意

1. 微信小程序自身加载 svg 图片有问题。

2. 阴影等正在适配兼容性。

3. 在 web-view 组件中使用时，微信 JS-SDK 上传 PNG 图片会变成 JPG 格式，请使用 HTML5 原生的 input 框上传。

生成海报

创建一个矩形, 然后导出为图片（离屏画布模式可用）。

index.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/miniapp 一致, 只需改下包名，即可运行官网示例代码。