# led-screen-canvas

**Repository Path**: ericfang/led-screen-canvas

## Basic Information

- **Project Name**: led-screen-canvas
- **Description**: 用于led显示屏布局绘制，提供无限尺度的画布，支持拖拽、缩放等操作；
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-24
- **Last Updated**: 2025-10-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 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)](https://fangjc1986.github.io/vue3-blog-vitepress/frontend-components/led-screen-canvas.html)

## 安装

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

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

## 导入组件

### 全局导入

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

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

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

### 按需导入

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

```vue

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

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

## 操作

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