Skip to content

@leafer-editor/miniapp

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

基于 @leafer-ui/miniapp,集成了 图形编辑器视图控制滚动条箭头 插件,适用于在线图形编辑的场景。

安装

sh
npm install @leafer-editor/miniapp
sh
pnpm add @leafer-editor/miniapp
sh
yarn add @leafer-editor/miniapp
sh
bun add @leafer-editor/miniapp

下载 CDN 版本

你也可以将库文件直接下载到本地 import 引入。

sh

https://unpkg.com/@leafer-editor/miniapp@1.1.0/dist/miniapp.module.js

https://unpkg.com/@leafer-editor/miniapp@1.1.0/dist/miniapp.module.min.js

注意

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

阴影、遮罩等正在适配兼容性。

温馨提示

微信小程序 iOS 端 3.0.0 之后 view 中的 canvas drawImage 无法绘制离屏画布,已找到办法绕过此限制,但仍有部分功能用不了(如图层混合模式,擦除,后续会继续适配)。

等待小程序官方修复 bug, 大家可以一起去催一催。复杂应用建议先采用小程序的 web-view 方式开发。

生成海报

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

ts
import { Leafer, Rect } from '@leafer-editor/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 一致, 只需改下包名,即可运行官网示例代码。

Released under the MIT License.