LED显示屏画布工具(led-screen-canvas)

led-screen-canvas 用于绘制 LED显示屏布局, 包括机箱、面板、像素、围栏等；

• 交互支持：缩放、平移、拖拽、激活 等常用功能；
• 轻量性：组件本身基于 原生canvas + 原生js 实现（没有任何外部依赖），外部封装为 vue3 组件，也可以很方便的封装为 react 或者 直接原生使用；
• 独立对象性能：支持 25万（500x500) 独立对象 流畅渲染；
• 规则矩阵性能：支持 16K显示屏像素矩阵(15360x8640) 流畅渲染；

git地址： https://gitee.com/ericfang/led-screen-canvas

在线演示和使用手册(DEMO)

安装

使用以下命令安装 led-screen-canvas：

npm install led-screen-canvas
# 或
yarn add led-screen-canvas

导入组件

全局导入

在 main.js 中全局引入 led-screen-canvas：

import { createApp } from "vue";
import App from "./App.vue";
import LedScreenCanvas from "led-screen-canvas";

createApp(App).use(LedScreenCanvas).mount("#app");

按需导入

在需要的组件中导入 led-screen-canvas：

<script setup lang="ts">
  import { LedScreenCanvas } from "led-screen-canvas";
</script>

<template>
  <led-screen-canvas />
</template>

操作

1. 鼠标拖拽 ，即可拖拽元素；
2. 鼠标滚轮，即可缩放元素；
3. 按住ctrl键 + 鼠标拖拽，即可平移画布；