Skip to content
全新发布

PDF SDK 与 AI 文档处理

在 GitHub 获取完整的私有化部署SDK 包及 AI 智能文档处理能力,一键部署,快速构建您的文档处理工作流。

工具

工具负责创建和操作批注、表单字段、测量和内容的鼠标/触摸交互。本指南介绍工具系统及激活、查看和注册工具的 API。

工具注册表

工具由工具名字符串和 data-element 字符串(激活它的工具栏按钮)标识。两者均集中定义在 packages/webview/src/constants/toolNames.js

  • ToolNames —— 每个工具名的 UPPER_SNAKE → camelCase 映射(视图、批注、表单、测量、内容编辑、签名、安全)。
  • DataElementToToolName —— 从 DataElements.*_BUTTONToolNames.* 的反向映射。
  • map —— { [toolName]: { tool, toolName? } } 查找表,供 document store 的 setToolState 将 UI 工具键转为 core.setTool(tool, toolName) 参数。
  • register(tool) —— 向 map 添加自定义工具(registerTool 使用的扩展钩子)。

UI API

UI.setActiveTool(dataElement)

data-element 激活工具。

javascript
/**
 * @method UI.setActiveTool
 * @param {string} dataElement 要激活工具的 dataElement。
 */
UI.setActiveTool('annotationHighlightButton');

内部:若 dataElement 为假或被禁用,调用 useDocument.setToolState()(清空)。否则从 constants/toolNames 查找 map[dataElement];未找到则警告并返回;否则调用 useDocument.setToolState(tool.toolName || tool.tool)

UI.getActiveTool()

获取当前活动工具对象。

javascript
/**
 * @method UI.getActiveTool
 */
const tool = UI.getActiveTool();

返回 document store 的 getActiveTool getter。

UI.getTool(tool)

按键获取工具配置对象。

javascript
/**
 * @method UI.getTool
 * @param {string} tool
 * @returns {object}
 */
const cfg = UI.getTool('highlight');   // => { color, ... }

返回 document store 工具条目的浅拷贝 { ...store[tool] }(持有工具样式预设:coloropacitystroke 等)。

UI.getToolColor(tool)

获取工具颜色。

javascript
/**
 * @method UI.getToolColor
 * @param {string} tool
 * @returns {string} color
 */
UI.getToolColor('square');   // => '#FF0000'

返回 store[tool].color

UI.registerTool(tool, options)

注册自定义批注工具。

javascript
/**
 * @method UI.registerTool
 * @param {Object} tool 要注册的工具实例。
 * @param {Object} options 注册选项。
 * @returns {boolean} 工具是否已注册。
 */
const ok = UI.registerTool(myTool, { /* … */ });

将工具名注册到本地 register 表(constants/toolNames)并委托给 core.registerTool(tool, options)(core 桥接层)。桥接层探测 documentViewer.toolRegistry.register,回退到 documentViewer.registerTool,若都不存在则返回 false

工具样式预设

每个工具在 document store(packages/webview/src/stores/modules/document.js)中有样式预设:

工具默认样式
highlightcolor: '#FFEC66'
underline / squiggly / strikeoutcolor: '#FF0000'
square / arc / polygon / polyline / circle / arrow / linecoloropacity: '0.8'stroke: '1pt'
inkcoloropacitystroke: '2pt'
freetextcolor: '#000000'
textcolor: '#FF0000'
redactioncolor: '#000000'
removecolor: '#FF0000'
表单字段(textfield/checkbox/radiobutton/listbox/combobox/pushbuttoncolorborderColor

setActiveToolColor(color) 写入 this[activeTool].color 并通过 core.setTool(activeTool) 推送到引擎。setToolState(tool) 在工具已激活时切换关闭,否则调用 core.setTool(mapTool.tool, mapTool.toolName)

工具分类

类别工具
视图PanCropPageSelectText
批注TextInkEraserHighlightUnderlineStrikeoutSquigglyCircleArcSquarePolygonCloudyPolylineArrowLineFreetextCalloutStampSignatureImageLink
表单TextfieldCheckboxRadiobuttonListboxComboboxPushbutton
测量LinePolylineCurveArcCircleRectanglePolygon(测量变体)
内容编辑AddTextAddImage
签名SignatureFieldsAddDigitalSignAddElectronicSign
安全RedactionRemove

相关引擎桥接函数

core 桥接层暴露(见 Core 桥接层):setToolswitchToolsetToolModegetToolModegetToolStylessetToolStylesregisterToolsetDefaultSelectsetEraseModegetEraseMode

示例

激活高亮工具并设置颜色

javascript
UI.setActiveTool('annotationHighlightButton');
// document store 现在驱动引擎;要更改颜色请使用样式面板
// 或直接通过 Core 推送:
instance.Core.setTool('Highlight', 'highlight');

注册自定义工具

javascript
UI.registerTool(
  { toolName: 'myTool', /* 工具实现 */ },
  { buttonName: 'myToolButton', icon: 'MyIcon' }
);

相关