编辑文本和图像属性

ComPDFKit 支持修改文本与图像属性。

编辑文本属性

ComPDFKit 支持修改文本属性，如字体大小、名称、颜色、对齐方式、斜体、粗体、透明度等。下面的代码展示了如何将文本设置为 22px、黑色、Times-Roman 字体、粗体和不透明度 60%。

ComPDF for Web 支持 Helvetica、Courier、Times-Roman、和 DroidSansFallbackFull 字体。 DroidSansFallbackFull 字体是一个支持 Chinese、Japanese、Korean 等字体的字体族。

设置文本属性

使用内容编辑管理器的 setContentBoxAttributes 可以设置选中文字或当前活动文本框的属性。

await contentEditManager.setContentBoxAttributes(attributes, contentBox, range);

名称	必填	类型	可选值	描述
attributes	yes	object	—	要设置的属性。
attributes.bold	no	boolean	true | false	添加或移除粗体，不改变斜体。
attributes.italic	no	boolean	true | false	添加或移除斜体，不改变粗体。
attributes.fontStyle	no	number | string	0 | 1 | 2 | 3 | regular | bold | italic | oblique | boldItalic | boldOblique	替换完整的粗体和斜体样式。0、1、2、3 分别表示常规、粗体、斜体和粗斜体。
attributes.underline	no	boolean	true | false	添加或移除下划线。
attributes.strikeout	no	boolean	true | false	添加或移除删除线。
contentBox	yes	ContentBox	—	要更新的文本框。
range	no	object	—	设置需要更新的字符范围。

以下示例将选中文字设置为粗斜体并添加下划线。如果没有选中字符，这些属性将应用于整个活动文本框。

const contentEditManager = documentViewer.getContentEditManager();
const contentBox = contentEditManager.getSelectedContentBox();
await contentEditManager.setContentBoxAttributes({
  bold: true,
  italic: true,
  underline: true,
  strikeout: false
}, contentBox);

bold、italic、underline 和 strikeout 属性相互独立。如果同时使用 fontStyle 与 bold 或 italic，接口会先应用 fontStyle，再由 bold 和 italic 覆盖对应样式。

不传 range 时，属性应用于当前选中的字符；如果没有选择字符，则应用于整个活动文本框。若只需更新明确的字符范围，可以传入选区的 range。选区变化时会触发内容编辑管理器的 contentEditSelectionChange 事件，参数为内容框，可以从内容框读取选区：

名称	类型	描述
getSelectedText()	string	选中的文本。
pageNumber	number	当前文本编辑器所在的页码，从 1 开始。
(await getTextSelectionGeometry()).rects	Array<Rect>	选中文字对应的矩形区域。
(await getTextSelectionGeometry()).range	{ start, end }	以排版位置表示的选中字符范围。
getTextSelection()	{ startIndex, endIndex }	以字符下标表示的选中字符范围。

contentEditManager.addEventListener('contentEditSelectionChange', async (contentBox) => {
  const selection = contentBox?.getTextSelection();
  if (!selection || selection.startIndex === selection.endIndex) {
    return;
  }
  const selectedText = contentBox.getSelectedText();
  const { pageNumber } = contentBox;
  const { rects: textRects, range } = await contentBox.getTextSelectionGeometry();
  await contentEditManager.setContentBoxAttributes({
    bold: true,
    underline: true
  }, contentBox, range);
});

字符范围格式如下：

const range = {
  start: {
    sectionIndex: 0,
    lineIndex: 0,
    runIndex: 0,
    charIndex: -1
  },
  end: {
    sectionIndex: 0,
    lineIndex: 0,
    runIndex: 0,
    charIndex: 4
  }
};

start 和 end 都包含上述四个整数字段。sectionIndex、lineIndex 和 runIndex 为非负数；charIndex 可以为 -1，表示第一个字符之前的位置。字符范围也可以用字符下标表示，如 { startIndex: 0, endIndex: 4 }，文本中的段落以 \n 分隔。起点不能在终点之后。范围无效时，返回的 Promise 会被拒绝，且不会修改文本。

fontStyle 会替换完整的粗体/斜体状态。例如，以下代码会将文本设置为粗斜体：

await contentEditManager.setContentBoxAttributes({
  fontStyle: 3
}, contentBox);

const contentEditManager = documentViewer.getContentEditManager();
const contentEditBoxes = await contentEditManager.loadContentBoxes(1);
const contentEditBox = contentEditBoxes.find(box => box.type === ContentEdit.Types.TEXT);

// 设置文本样式
await ContentEdit.setTextColor(contentEditBox, '#FF0000');
await ContentEdit.setTextOpacity(contentEditBox, 0.6);
await ContentEdit.setContentFontSize(contentEditBox, 22);
await ContentEdit.setContentFont(contentEditBox, 'Times-Roman');
await ContentEdit.setTextAttributes(contentEditBox, { fontStyle: 'bold' });
await ContentEdit.setContentLineSpacing(contentEditBox, 1.5);
await ContentEdit.setContentParagraphSpacing(contentEditBox, 10);
await ContentEdit.setContentCharacterSpacing(contentEditBox, 2);
await ContentEdit.alignContents(contentEditBox, 'center');

// 你也可以使用 setTextAttributes API 来设置文本样式
await ContentEdit.setTextAttributes(contentEditBox, {
  color: '#000000',
  opacity: 0.6,
  fontSize: 22,
  fontName: 'Times-Roman',
  bold: true,
  textAlign: 'center', // left | right | center
})

编辑图像属性

ComPDFKit 支持修改图像属性，如旋转、裁剪、镜像和设置透明度。

以下是如何旋转图像并将其设置为半透明的示例代码：

const contentEditManager = documentViewer.getContentEditManager();
const contentEditBoxes = await contentEditManager.loadContentBoxes(1);
const contentEditBox = contentEditBoxes.find(box => box.type === ContentEdit.Types.OBJECT);
const editor = await contentEditBox.startContentEditing();

await editor.setOpacity(0.6);

// 顺时针旋转图像 90 度，270 表示逆时针旋转 90 度
await editor.rotate(90);
// 水平或垂直翻转图像
await editor.flipHorizontal(); // flipHorizontal | flipVertical
// 使用页面坐标中指定的左、上、右和下值裁剪图像
await editor.crop(new Core.Math.Rect(0, 0, 100, 100));