stdf/docs/mds/components/signature/guide.md

使用场景

签名组件用于在线签名、合同签署、手写输入等场景，基于 Canvas 实现，支持手指或鼠标绘制。

画板比例

通过 aspectRatio 属性设置画板的宽高比，默认为 [3, 1]（3:1）。可根据实际需求调整，如 [2, 1]、[4, 3] 等。

方向标记

签名组件支持标记上下方向，这在横屏签名场景中非常有用。通过 direction 属性设置方向标记：

• top（默认）：顶部朝上
• bottom：底部朝上
• left：左侧朝上
• right：右侧朝上

导出签名时，SignatureResult 中会包含方向信息，可根据此信息对图片进行旋转处理。

可通过 showDirectionMark 属性控制方向标记的显示。

画笔与背景

默认颜色

当前版本不再自动适配亮暗模式，默认使用以下颜色：

• 画笔颜色： #000000
• 背景颜色： #ffffff

如需适配暗色模式，请手动设置 lineColor 与 bgColor。

自定义颜色

可通过 lineColor 和 bgColor 属性自定义画笔和背景颜色。

画笔粗细

通过 lineWidth 属性设置画笔粗细，单位为像素，默认值为 3。

圆角

画板圆角默认使用主题配置的大区域圆角，可通过 radius 属性自定义。

操作按钮

默认显示“清空”和“确认”两个按钮。可通过以下方式自定义：

自定义文字

通过 clearText 与 confirmText 设置按钮文案。

自定义样式

通过 clearButton 与 confirmButton 设置按钮样式。

隐藏按钮

设置 showButtons={false} 可隐藏内置按钮，配合 clear、getSignature 等方法进行操作。

导出格式

支持导出 PNG、JPEG、WebP 三种格式，可通过 imageType 设置。导出的图片为 Base64 格式的 Data URL，可直接用于 <img> 标签的 src 属性或上传至服务器。

格式说明

格式	特点	适用场景
PNG	无损压缩，支持透明背景，文件较大	需要高质量或透明背景的场景
JPEG	有损压缩，不支持透明，文件较小	对文件大小敏感、不需要透明的场景
WebP	同等质量下文件更小，支持透明	现代浏览器环境，追求最佳压缩比

图片质量

imageQuality 仅对 JPEG 与 WebP 格式有效，范围 0 到 1，默认 0.92。值越大质量越高，文件也越大。

组件方法

方法	说明
clear()	清空画布
getSignature()	获取签名数据
isEmpty()	判断签名是否为空

注意事项

• 组件会自动适配高清屏（Retina），确保导出图片清晰
• 签名时会阻止默认的触摸滚动行为
• 建议在提交前检查 isEmpty 属性，避免提交空签名