如何在pdf.js 3.0中通过JavaScript设置墨迹与文本编辑器的颜色等属性

直接修改HTML输入元素的值无效，因为PDF.js的编辑器内部维护独立状态，必须通过官方提供的API方法来修改属性。以下是具体实现方案：

核心思路 #

PDF.js的编辑器实例提供了setProperties方法，用于更新编辑器的颜色、大小等配置，需要先获取目标编辑器的实例，再调用该方法传入配置对象。

1. 获取编辑器实例 #

有两种可靠方式获取当前活动的编辑器：

• 调用pdfViewer.getActiveEditor()直接获取当前激活的编辑器
• 监听editorChanged事件，在编辑器切换时自动获取实例

2. 设置墨迹编辑器（ink-editor）属性 #

支持设置的核心属性包括：

• strokeColor: 墨迹颜色，可传入RGB数组（0-1范围）或十六进制字符串
• strokeWidth: 墨迹线宽，单位为像素

示例代码：

// 方式1：直接获取当前激活的墨迹编辑器
const activeEditor = pdfViewer.getActiveEditor();
if (activeEditor?.name === 'ink-editor') {
  activeEditor.setProperties({
    strokeColor: [1, 0, 0], // 红色
    strokeWidth: 3 // 线宽3px
  });
}

// 方式2：监听编辑器切换事件，自动配置属性
pdfViewer.eventBus.on('editorChanged', (editor) => {
  if (editor?.name !== 'ink-editor') return;
  
  editor.setProperties({
    strokeColor: '#00ff00', // 绿色（十六进制格式）
    strokeWidth: 5
  });
});

3. 设置自由文本编辑器（freetext-editor）属性 #

支持设置的核心属性包括：

• fontSize: 字体大小，单位为像素
• fillColor: 文本颜色，格式同墨迹颜色
• fontFamily: 字体类型（需确保字体在运行环境中可用）
• fontWeight: 字体粗细（如'bold'）

示例代码：

pdfViewer.eventBus.on('editorChanged', (editor) => {
  if (editor?.name !== 'freetext-editor') return;
  
  editor.setProperties({
    fontSize: 18,
    fillColor: [0, 0, 1], // 蓝色
    fontFamily: 'Arial',
    fontWeight: 'bold'
  });
});

注意事项 #

• 确保pdfViewer实例已完成初始化，否则无法获取编辑器或调用API
• RGB颜色值需为0-1范围的浮点数，十六进制字符串需带#前缀
• 字体相关属性依赖运行环境的字体支持，未加载的字体会 fallback 到默认字体

内容的提问来源于stack exchange，提问作者Ralf Albrecht