Signature

Canvas 手写签名：鼠标 / 触摸 / 手写笔都能签，支持撤销、清空、笔宽颜色调节与 PNG 导出。

最后更新 2026-10-25 19:27:08

说明

底层是原生 Canvas 2D + Pointer Events，无外部库依赖、离线可用；笔画以 strokes[] 记录，撤销只弹最后一笔并按剩余笔画重绘，比 ImageData 栈更省内存。设备像素比自动跟随 dpr， retina 屏不糊。ShowToolbar 提供撤销 / 清空 / 笔宽 / 颜色 / 下载 PNG 五个按钮；宿主用 @ref 拿到实例后可调 ExportAsync 得 PNG 的 dataURL、IsEmptyAsync 判断是否已落笔、ClearAsync 主动清空。Background 参数只在导出 PNG 时铺底（用于「白底签名」贴到深色背景上），画布本身始终是浅色网格。

常见能力：

鼠标 / 触摸 / 手写笔通用
撤销上一笔 / 一键清空
笔宽、颜色工具条切换
PNG 导出（可选背景色铺底）
@ref 编程控制
dpr 自适应 retina 屏
纯原生无外部依赖

用法

<Signature @ref="@sig" OnChange="@OnChanged" />

@* 高度、初始笔色与导出背景 *@
<Signature Height="200px" PenColor="#2f5bff" PenWidth="3" Background="#ffffff" />

@* 宿主导出预览 / 提交 *@
@code {
    Signature sig;
    async Task Submit() {
        if (await sig.IsEmptyAsync()) { UI.Warn("请先签名"); return; }
        var dataUrl = await sig.ExportAsync();
        await http.PostAsync("/api/sign", new StringContent(dataUrl));
    }
}

API 参数

参数	类型	默认值	说明
`Background`	`string`	`null`	导出 PNG 时的背景色（CSS 颜色值）。留空则导出透明背景。
`Height`	`string`	`"240px"`	画布高度（如 "240px"）。默认 240px。
`Id`	`string`	`null`	画布 DOM id，留空自动生成。
`OnChange`	`EventCallback`	—	事件签名内容变化（每笔落下或抬起、撤销 / 清空后触发）。
`PenColor`	`string`	`"#1f1f1f"`	画笔颜色（CSS 颜色值）。默认 #1f1f1f。
`PenWidth`	`int`	`2`	画笔宽度（像素）。默认 2。
`ShowToolbar`	`bool`	`true`	是否显示工具条（撤销 / 清空 / 笔宽 / 颜色 / 下载）。默认 true。
`Visible`	`bool`	`true`	取得或设置组件是否可见，默认为false。
`VisibleChanged`	`EventCallback<bool>`	—	事件取得或设置组件可见性变化时的回调事件。
`Class`	`string`	`null`	取得或设置组件的CSS类名，用于自定义样式。
`Disabled`	`bool`	`false`	取得或设置组件是否禁用，默认为false。
`Style`	`string`	`null`	取得或设置组件的内联样式，用于自定义样式。

所有组件均继承 BaseComponent，除上表参数外还支持 Class、Style、Disabled、Visible。