Preview Updated 2026-05-10

DrawingCanvas 画板

SignaturePad 之上的画板：调色板、笔刷尺寸、橡皮擦、撤销 / 重做 / 清空 / 导出。笔画按 stroke 数组持久化，undo/redo 重放即可。

English translation pending This page hasn't been translated yet — falling back to Chinese. PRs welcome on GitHub.

基础用法

画笔栈与橡皮栈都按 DrawingStroke[] 形式存储；undo/redo 通过重放整组笔画实现，因此可序列化保存到后端。

背景视口

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfDrawingCanvas, type DrawingStroke } from '@chufix-design/vue';

const strokes = ref<DrawingStroke[]>([]);
</script>
<template>
  <div class="dc-demo">
    <CfDrawingCanvas :height="280" @change="(s) => (strokes = s)" />
    <code class="dc-demo__meta">{{ strokes.length }} 条笔画</code>
  </div>
</template>
<style scoped>
.dc-demo {
  display: grid;
  gap: 8px;
}
.dc-demo__meta {
  padding: 4px 8px;
  background: var(--bg-inset);
  border-radius: var(--r-2);
  font-size: var(--t-12);
  color: var(--fg-2);
  width: max-content;
}
</style>

<script setup>
import { ref } from 'vue';
import { CfDrawingCanvas } from '@chufix-design/vue';

const strokes = ref<DrawingStroke[]>([]);
</script>
<template>
  <div class="dc-demo">
    <CfDrawingCanvas :height="280" @change="(s) => (strokes = s)" />
    <code class="dc-demo__meta">{{ strokes.length }} 条笔画</code>
  </div>
</template>
<style scoped>
.dc-demo {
  display: grid;
  gap: 8px;
}
.dc-demo__meta {
  padding: 4px 8px;
  background: var(--bg-inset);
  border-radius: var(--r-2);
  font-size: var(--t-12);
  color: var(--fg-2);
  width: max-content;
}
</style>

import { useState } from 'react';
import { CfDrawingCanvas } from '@chufix-design/react';

export default function Demo() {
  const [strokes, setStrokes] = useState([]);
  const [strokes, setStrokes] = useState([]);
  const [strokes, setStrokes] = useState([]);
  return (
    <>
      <CfDrawingCanvas height={280} onChange={setStrokes} />
    </>
  );
}

import { useState } from 'react';
import { CfDrawingCanvas } from '@chufix-design/react';

export default function Demo() {
  const [strokes, setStrokes] = useState([]);
  const [strokes, setStrokes] = useState([]);
  const [strokes, setStrokes] = useState([]);
  return (
    <>
      <CfDrawingCanvas height={280} onChange={setStrokes} />
    </>
  );
}

API

Props

属性	类型	默认	说明
`width`	`number \| string`	`'100%'`
`height`	`number \| string`	`320`
`initialStrokes`	`DrawingStroke[]`	`[]`	初始笔画（可从后端拉）
`colors`	`string[]`	6 色默认	调色板
`sizes`	`number[]`	`[2, 4, 8, 16]`	笔刷尺寸
`background`	`string`	`'transparent'`
`toolbar`	`boolean`	`true`	是否显示工具栏
`disabled`	`boolean`	`false`

Events

事件	载荷	说明
`change`	`strokes: DrawingStroke[]`	笔画 / 工具变更后

Exposed methods

clear() / undo() / redo()
getStrokes() / setStrokes(strokes)
toDataURL(type?, quality?) / toBlob(type?, quality?)