印章
印章是放置到页面上的基于图片的批注。WebViewer 支持标准、动态和自定义印章,通过印章面板和一组 UI API 管理。
UI API
UI.setStampPanelTabs(tabs)
配置印章面板显示的标签。
javascript
UI.setStampPanelTabs(['standard', 'dynamic', 'custom']); // STANDARD / DYNAMIC / CUSTOM调用 useViewer.setStampPanelTabs(tabs)。标签标识符:Standard、Dynamic、Custom(定义于 constants/dataElements.js)。
UI.setImportStamps(images)
设置可导入的印章列表。
javascript
UI.setImportStamps([{ src: '/stamps/approved.png', label: 'Approved' }]);调用 useViewer.setImportStamps(images)。
UI.addCustomStamps(images)
添加自定义印章图片。
javascript
UI.addCustomStamps([{ src: dataUrl, label: 'My Stamp' }]);调用 useViewer.addCustomStamps(images)。自定义印章持久化到 localStorage 的 customStamps 键。
UI.setCustomStamps(stamps)
替换自定义印章集合。
javascript
UI.setCustomStamps([ /* 完整印章列表 */ ]);调用 useViewer.setCustomStamps(stamps)。
UI.getCustomStamps()
获取当前自定义印章。
javascript
/**
* @method UI.getCustomStamps
*/
const stamps = UI.getCustomStamps();返回 viewer store 的 getCustomStamps getter。
印章状态(viewer store)
| 字段 | 用途 |
|---|---|
customStamps[] | 自定义印章(持久化到 localStorage)。 |
stampPanelTabs[] | 印章面板显示的标签。 |
importStamps[] | 可导入印章。 |
印章组件
StampPanel.vue(components/StampPanel/)——带 Standard / Dynamic / Custom 标签的印章选择器(标签在App/index.vue通过setStampPanelTabs设置)。懒加载。CustomStamp.vue——自定义印章创建 UI。DeleteCustomStampDialog——确认删除自定义印章。
Core 桥接层(印章接口)
core 桥接层在 instance.Core 上暴露:
| 函数 | 用途 |
|---|---|
getDynamicStampPreview | 获取动态印章预览。 |
getStampRect | 获取印章矩形。 |
handleStamp | 应用印章。 |
印章预览辅助
helpers/renderStampPreview.js 提供 renderStampPreview 类,创建一个浮动 .stamp-preview div,在 .document 区域跟随鼠标,放置前显示印章图片。方法:updateStampPreview(...)、handleMouseMove、hidePreview、applyStyles。
示例
添加自定义印章并打开印章面板
javascript
UI.addCustomStamps([{ src: '/stamps/draft.png', label: 'Draft' }]);
UI.openElement('stampPanel');将印章面板限制为标准+自定义
javascript
UI.setStampPanelTabs(['standard', 'custom']);读取当前自定义印章
javascript
const stamps = UI.getCustomStamps();