leafer-vue 高效Canvas渲染，开启创意新篇章leafer-vue是高效Canvas渲染引擎，开启创意新篇章

Leafer Vue

leafer-ui是一个非常高效的canvas渲染引擎，能够创建百万级交互矩形。vue是易学易用，性能出色，适用场景丰富的 Web 前端框架。leafer-vue通过vue3提供的自定义渲染器使其能通过vue组件的方式高效开发leafer应用程序。

快速开始

从npm安装

pnpm i leafer-ui leafer-vue

初始化vue插件

添加Vue插件配置，支持自定义元素。

import vue from '@vitejs/plugin-vue'
import { isCustomElement } from 'leafer-vue/compiler'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement,
        },
      },
    }),
  ],
})

为什么需要配置插件？

默认情况下，Vue 会将任何非原生的 HTML 标签优先当作 Vue 组件处理，而将“渲染一个自定义元素”作为后备选项。这会在开发时导致 Vue 抛出一个“解析组件失败”的警告。要让 Vue 知晓特定元素应该被视为自定义元素并跳过组件解析，我们可以指定 compilerOptions.isCustomElement 选项。

详情请参考跳过组件解析 | Vue官方文档

基础使用

<script setup lang="ts">
import { LeaferApp } from 'leafer-vue'
</script>

<template>
  <LeaferApp :width="672" :height="340">
    <Leafer>
      <Star
        fill="#66A659"
        :width="50" :height="50"
        :draggable="true"
      />
    </Leafer>
  </LeaferApp>
</template>

不出意外可以看到一个绿色的五角星，可以到Playground中，在线尝试！

详情文档请到leafer-vue官方文档查看

优势

✏️使用自定义渲染器，相较于直接封装为vue组件性能大幅度提升!

点击体验不可思议的性能，渲染10万级可交互元素！

这样的性能优势是以往类似于vue-konva这样使用vue组件封装方式不可能达到的,使用传统方式封装的canvas vue组件在创建到1千个元素时，就会非常卡顿了。

🦾使用TypeScript开发，提供完备的组件类型支持!

借助volar类型支持，提供强大的类型判断，提升DX，帮助开发在开发时发现问题

🌟详细的开发文档支持和方便的在线开发工具！

插件

leafer-vue完全兼容leafer插件，你可以通过插件来扩展leafer-vue的功能。

pnpm i @leafer-in/editor

<script setup lang="ts">
import { LeaferApp } from 'leafer-vue'
import '@leafer-in/editor'
</script>

<template>
  <LeaferApp :width="672" :height="340" type="draw" :editor="{}">
    <Leafer>
      <Text
        text="Hello Leafer Vue"
        fill="#66A659"
        font-weight="black"
        :italic="true"
        :x="100"
        :y="100"
        editable
        :font-size="60"
      />
    </Leafer>
  </LeaferApp>
</template>

vue2

leafer-vue同时提供vue2版本，因为vue2不支持自定义渲染器，所以采用封装组件的方式，实现leafer-ui组件化，性能不及vue3版本

pnpm i leafer-vue@2

<script setup lang="ts">
import { lfFrame, lfLeafer, lfRect } from 'leafer-vue'
</script>

<template>
  <lfLeafer :width="500" :height="500" fill="#000">
    <lfFrame :width="300" :height="300" fill="#0f0">
      <lfRect
        :width="100" :height="100" fill="#f00"
        :draggable="true"
        @tap="console.log('tag')"
      />
    </lfFrame>
  </lfLeafer>
</template>

Nuxt

uni-app

🎉Nuxt和uni-app版本的开发已在计划中🎉

最后

Leafer Vue是一个免费的开源软件，社区的赞助使其能够有更好的发展。

你的赞助会帮助我更好的维护leafer-vue，如果对你有帮助，请考虑赞助一下😊

你的star🌟也是对我的很大鼓励，Github

欢迎反馈问题和提pr共建

🙏感谢以下项目，让leafer-vue使其成为可能

leaferjs/ui 底层Canvas渲染引擎
hairyf/vue3-pixi leafer-vue灵感来源
element-plus/element-plus-playground leafer-vue-playground fork
Icon Design by @马清路德汀

leafer-vue 高效Canvas渲染，开启创意新篇章