open-index/open-npm huggingface dataset:
npm package: @machete-jhun/canvas-studio
Description: 一个基于 React 和 Konva 的画布编辑组件库，支持多种图形和媒体元素的添加与编辑，适用于构建复杂的图形应用。
Latest version: 0.0.18


# CanvasStudio

专业级 React + Konva 画布编辑组件库，支持多种图形、媒体、动画，适合复杂图形应用开发。

## 特性
- 多种图形类型：矩形、文本、图片、SVG、二维码、条形码、视频、Rive 动画、屏幕背景
- 完善的编辑能力：拖拽、缩放、旋转、组操作、辅助线、快捷键
- TypeScript 完全支持
- 轻量高性能，按需导出
- render 函数/工具/常量均可单独导入

## 安装

本库所有依赖均为 peerDependencies，需自行安装：

```bash
pnpm add @machete-jhun/canvas-studio react react-dom konva react-konva @rive-app/canvas js-base64 jsbarcode lodash-es nanoid qrcode react-konva-utils
```

## 快速开始

### 1. 主组件用法
```tsx
import { CanvasStudio } from '@machete-jhun/canvas-studio'

<CanvasStudio width={1200} height={800} backgroundType="grid" />
```

### 2. 单独导入 render 函数
```ts
import { render } from '@machete-jhun/canvas-studio/render'
```

### 3. 单独导入工具函数/常量
```ts
import { createRect, createText } from '@machete-jhun/canvas-studio/utils'
import { SHAPE_TYPES } from '@machete-jhun/canvas-studio/constants'
```

## API 说明

### CanvasStudio Props
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| width | number | 800 | 画布宽度 |
| height | number | 600 | 画布高度 |
| shapeList | MyShapeConfig[] | [] | 编辑图形列表 |
| bgShapeList | MyShapeConfig[] | [] | 背景图形列表 |
| backgroundType | 'grid'\|'point'\|'none' | 'grid' | 背景类型 |
| ... | ... | ... | 更多见源码 |

### Ref API
- getStage(): 获取 Konva Stage 实例
- getSelectedShapeIds()/setSelectedShapeIds(ids)
- addShapes/removeShapes/updateShape/getShapeList
- fitToContent()

### render 函数
- 支持所有 shape 类型，自动计算画布尺寸
- 支持 Rive/视频自动播放
- 支持 fps 控制、变量动态更新
- 只需传入 shapeList 和容器即可渲染

### 工具函数
- createRect/createText/createImage/createSvg/createQrCode/createBarCode/createRive/createVideo/createBackScreen/copyShape
- isMac/complementaryHexColor/getPointerPosition/getStageCenter/getStageViewPortCenter/assertNever

### 常量
- SHAPE_TYPES: 所有图形类型枚举
- THEME_COLOR: 主题色

## 导出路径
- 主组件/类型：`@machete-jhun/canvas-studio`
- render 函数：`@machete-jhun/canvas-studio/render`
- 工具函数：`@machete-jhun/canvas-studio/utils`
- shapeTools：`@machete-jhun/canvas-studio/utils/shapeTools`
- 常量：`@machete-jhun/canvas-studio/constants`

## 高级用法
- 精确尺寸控制：`ppmm` 属性，支持物理单位
- 自定义背景图层：`bgShapeList` 支持锁定背景
- 变量动态控制：render 支持变量对象动态更新

## 常见问题
- 所有依赖需自行安装（peerDependencies）
- Rive/视频需浏览器支持 OffscreenCanvas
- 视频透明背景可用 FFmpeg 转 WebM

## 许可证
MIT

## 贡献
欢迎 PR 和 issue！