# canvas-edit

**Repository Path**: post-man/canvas-edit

## Basic Information

- **Project Name**: canvas-edit
- **Description**: 基于canvas逐步实现的各种场景案例
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-26
- **Last Updated**: 2026-01-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React + TypeScript + Vite

# 此项目技术重在Canvas api接口的使用 和 基于Canvas实现的一些场景Demo，可以用来进行二开

# 核心架构是通过app基类的loop方法实时渲染，通过标记驱动渲染， 整体采用管理器+行为工具+业务实现 的设计思路

# 实现Demo(详情请看router)
## 世界坐标和视口坐标的转换，以及移动和缩放工具
## 图标的命中 + 拖动 + 简单连线
## 日志追踪器===>采用虚拟列表进行绘制，大数据量的日志也轻松绘制，同事包括 搜索高亮和搜索定位的功能
## 粒子效果
## 音频可视化
## ---------------------------------------------------------------------------------------
# example Pic
![log-viewer-demo](./doc/doc1.png)

![drag-demo](./doc/doc2.png)

![word-map-demo](./doc//doc3.png)

![particle-demo](./doc//doc4.png)

![audio-bar-demo](./doc//doc5.png)

![audio-arc-demo](./doc//doc6.png)