Angular 签名字段 | ng-hub-ui-signature
可访问的 Angular 签名字段，将鼠标、触摸和手写笔输入保存为可缩放 SVG 表单值，并支持撤销、重做和 PNG 导出。
最后更新 2026年8月14日
概览
团队为何搜索这个库
当表单需要可复用、可访问且可移植的签名区域时，请使用 ng-hub-ui-signature。
安装
npm install ng-hub-ui-signature跳转到
适用于
- 合同接受
- 交付确认
- 同意表单
- 审批流程
关于 signature
ng-hub-ui-signature 是基于 Pointer Events 的 standalone Angular 表单字段。它将鼠标、触摸和手写笔笔画保存为 SVG ControlValueAccessor 值，可恢复已保存的签名，并提供清除、撤销、重做和 PNG 导出。
功能指南
Capture and edit signatures
Pointer input works with a mouse, touch screen or pen, then keeps a scalable SVG history for undo, redo and form persistence.
示例:
签名
Draw a signature and use the built-in history actions.
代码
导入:
模板:
组件:
Reactive external translations
The action-label contract accepts strings or reactive sources, so Transloco and ngx-translate language changes update the field without a direct package dependency.
示例:
Transloco 和 ngx-translate
绑定响应式翻译流，以便在语言切换时更新操作。
代码
导入:
模板:
组件:
核心特性
最近更改
Version 22.1.0 - 8/14/26, 12:00 AM
fixed: The field now really inherits the ng-hub-ui-forms contract. The --hub-signature-* slots defaulted to a --hub-field-* family that no library declares, so they always fell through to their sys/ref fallbacks and a form themed with --hub-input-bg left its signature field untouched. They now read the canonical tokens of the .hub-field__* shell: --hub-input-* for the drawing surface, --hub-label-* for the label and --hub-form-disabled-opacity for the disabled state.
added: The eleven --hub-signature-* tokens are documented in the design-system token spec, so they now appear in the library reference table.
Version 22.0.0 - 8/14/26, 12:00 AM
added: Initial signature field release.