小刀画板工具

# npm
npm install xiaodao-painter
# pnpm
pnpm add xiaodao-painter
# yarn
yarn add xiaodao-painter

import 'xiaodao-painter/style.css'

# 克隆仓库
git clone https://github.com/xiaodaozhi/xiaodao-painter.git
cd xiaodao-painter

# 安装依赖
npm install

# 启动开发服务器（演示页）
npm run dev

<template>
  <Painter
    v-model="data"
    theme="light"
    locale="zh-CN"
  />
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { Painter } from 'xiaodao-painter'
import type { PainterData } from 'xiaodao-painter'
import 'xiaodao-painter/style.css'

const data = ref<PainterData>({
  strokes: [],
  canvasWidth: 800,
  canvasHeight: 600,
})

watch(data, (val) => {
  console.log('绘图数据变化：', val)
}, { deep: true })
</script>

<Painter
  v-model="data"
  theme="dark"
  locale="en-US"
  :width="1200"
  :height="800"
/>

<Painter
  v-model="data"
  :modelValue="{
    strokes: [],
    canvasWidth: 800,
    canvasHeight: 600,
    canvasBackgroundColor: '#f5f5f5',
  }"
/>

interface PainterData {
  strokes: Stroke[]
  canvasWidth: number
  canvasHeight: number
  canvasBackgroundColor?: string   // 任意 CSS 颜色或 'transparent'
}

type ToolType =
  | 'select' | 'pan' | 'zoom'
  | 'pencil' | 'line' | 'circle' | 'rect' | 'triangle' | 'star'
  | 'text'

interface Point { x: number; y: number }

interface Stroke {
  id: string                       // crypto.randomUUID()
  type: ToolType
  x: number                        // 包围盒左上角（提交时归一化）
  y: number
  width: number                    // 包围盒宽（绘制中可能为负）
  height: number
  points: Point[]                  // 铅笔路径点；非铅笔图形为空
  strokeColor: string
  fillColor: string                // 铅笔与直线为 'transparent' / 'none'
  strokeWidth: number
  // 仅文本图形
  text?: string
  fontSize?: number
  textAlign?: 'left' | 'center' | 'right'
  textColor?: string
  textAutoWidth?: boolean
}

import type {
  PainterData,        // 主数据接口
  Stroke,             // 单条笔画 / 图形 / 文本
  Point,              // { x: number; y: number }
  ToolType,           // 所有工具标识的联合类型
  CanvasConfig,       // 画布尺寸 / 背景配置
} from 'xiaodao-painter'

import {
  DEFAULT_CANVAS_WIDTH,
  DEFAULT_CANVAS_HEIGHT,
  STROKE_WIDTH,
  DEFAULT_FONT_SIZE,
  HIT_THRESHOLD,
} from 'xiaodao-painter'

├── index.ts                         # 公开入口：导出 Painter 与类型/常量
├── App.vue                          # 演示根组件（设置页面标题、挂载组件）
├── style.css                        # 全局主题 CSS 变量（明/暗）
└── components/painter/
    ├── Painter.vue                  # 公开组件：props、v-model 同步、主题/语言注入
    ├── Whiteboard.vue               # SVG 画布、指针/触摸处理、缩放 UI、文本编辑
    ├── Toolbar.vue                  # 工具按钮、颜色指示、画布尺寸弹窗
    ├── ColorPalette.vue             # 前景/填充/文本色槽的颜色选择器
    ├── SelectionOverlay.vue         # 包围框 + 8 个缩放手柄（直线仅 2 个）
    ├── StrokeRenderer.vue           # 把单个 Stroke 渲染为 SVG 元素
    ├── composables/
    │   ├── useDrawing.ts            # 交互引擎（绘制/选择/移动/缩放/平移/文本）
    │   └── useI18n.ts               # locale、theme、根元素的 provide/inject
    ├── stores/
    │   ├── canvas.ts                # 中心仓库：笔画、颜色、平移缩放、撤销、剪贴板
    │   └── tools.ts                 # 当前工具状态
    ├── utils/
    │   ├── geometry.ts              # 命中测试、星/三角形顶点、包围盒
    │   ├── svg.ts                   # Stroke → SVG 元素转换
    │   └── i18n.ts                  # zh-CN / en-US 字典 + t()
    └── types/index.ts               # TypeScript 类型与默认常量

<div style="--wb-bg: #1a1a2e; --wb-text: #e0e0e0;">
  <Painter v-model="data" theme="dark" />
</div>

npm run dev        # 启动 Vite 开发服务器（演示页）
npm run build      # 类型检查（vue-tsc）并构建库产物
npm run build:demo # 构建独立演示页到 ./dist-demo
npm run preview    # 预览库的生产构建
npm run lint:check # 运行 ESLint
npm run typecheck  # 仅类型检查