编辑文本和图像属性

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

编辑文本属性

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

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

设置文本属性

使用 docViewer.setContentEditorProperty 可以设置选中文字或当前活动文本框的属性。

docViewer.setContentEditorProperty(type, props);

名称	必填	类型	可选值	描述
type	yes	string	text | image | common	内容编辑器类型。设置文本属性时使用 text。
props	yes	object	—	要设置的属性。
props.bold	no	boolean	true | false	添加或移除粗体，不改变斜体。
props.italic	no	boolean	true | false	添加或移除斜体，不改变粗体。
props.fontStyle	no	number | string	0 | 1 | 2 | 3 | regular | bold | italic | oblique | boldItalic | boldOblique	替换完整的粗体和斜体样式。0、1、2、3 分别表示常规、粗体、斜体和粗斜体。
props.underline	no	boolean	true | false	添加或移除下划线。
props.strikeThrough	no	boolean	true | false	添加或移除删除线。
props.strikethrough	no	boolean	true | false	strikeThrough 的已弃用兼容别名。
props.range	no	object	—	设置需要更新的字符范围。

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

docViewer.setContentEditorProperty('text', {
  bold: true,
  italic: true,
  underline: true,
  strikeThrough: false
});

bold、italic、underline 和 strikeThrough 属性相互独立。如果同时使用 fontStyle 与 bold 或 italic，接口会先应用 fontStyle，再由 bold 和 italic 覆盖对应样式。如果同时传入 strikeThrough 和已弃用的 strikethrough，以 strikeThrough 为准。

不传 range 时，属性应用于当前选中的字符；如果没有选择字符，则应用于整个活动文本框。若只需更新明确的字符范围，可以直接传入 contentSelected 事件返回的 camelCase range。该事件数据包含：

名称	类型	描述
selectedText	string	选中的文本。
pageNumber	number	当前文本编辑器所在的页码，从 1 开始。
textRects	Array<{ left, top, right, bottom }>	选中文字对应的矩形区域。
range	CharacterRange	使用公开 camelCase 格式表示的选中字符范围。

docViewer.addEvent('contentSelected', ({
  selectedText,
  pageNumber,
  textRects,
  range
}) => {
  docViewer.setContentEditorProperty('text', {
    bold: true,
    underline: true,
    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，表示第一个字符之前的位置；start 不能小于 end。显式范围无效时，API 返回 false，且不会修改文本。

旧版的完整样式替换方式仍然兼容。例如，以下代码会将完整的粗体/斜体状态设置为粗斜体：

docViewer.setContentEditorProperty('text', {
  fontStyle: 3
});

onst contentEditManager = docViewer.getContentEditManager();
const contentEditBoxes = contentEditManager.getContentBoxesList();
const contentEditBox = contentEditBoxes[0];

// 设置文本样式
contentEditBox.color = '#FF0000'
contentEditBox.opacity = 60;
contentEditBox.fontSize = 22;
contentEditBox.fontFamily = 'Times-Roman';
contentEditBox.fontStyle = 'bold';
contentEditBox.lineSpacing = 1.5;
contentEditBox.paragraphSpacing = 10;
contentEditBox.characterSpacing = 2;
contentEditBox.textAlign = 'center';

// 你也可以使用 setTextStyles API 来设置文本样式
contentEditBox.setTextStyles && contentEditBox.setTextStyles({
  color: '#000000',
  opacity: 60,
  fontSize: 22,
  fontFamily: 'Times-Roman',
  fontStyle: 'bold',
  textAlign: 'center', // left | right | center
})

编辑图像属性

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

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

const contentEditManager = docViewer.getContentEditManager();
const contentEditBoxes = contentEditManager.getContentBoxesList();
const contentEditBox = contentEditBoxes[0];

contentEditBox.opacity = 60;

// 旋转图像 90 度，-90 表示逆时针旋转 90 度
contentEditBox.rotateImage(90);
// 水平或垂直翻转图像
contentEditBox.flipImage('horizontal'); // horizontal | vertical
// 使用指定的左、上、右和下值裁剪图像
contentEditBox.cropImage({ left: 0, top: 0, right: 100, bottom: 100 });