Guides

创建文本与图片

ComPDF React Native SDK 提供了便捷的 API，用于创建文本和图片内容。

---

创建文本

该方法用于在指定页面上插入一个新的文本区域。它会在页面坐标系中创建一个文本框，并将提供的文本内容写入其中。坐标原点 (0, 0) 位于页面的左下角。

参数说明：

• pageIndex：目标页面索引，从 0 开始。
• content：要插入的文本内容。
• offset：文本区域左下角在 PDF 页面坐标系中的位置（单位：point）。
• maxWidth：文本区域的最大宽度。当文本超过该宽度时会自动换行；如果为 null，则宽度不受限制。
• attr：文本属性，如字体大小、颜色、对齐方式等。默认使用标准的 CPDFEditorTextAttr 配置。

示例：

await pdfReaderRef.current?._pdfDocument.createNewTextArea({
  pageIndex: 0,
  content: "Hello, ComPDF!",
  offset: { x: 100, y: 700 },
  maxWidth: 200,
  attr: {
    fontSize: 30,
    fontColor: "#2A2F2F",
    fontColorAlpha: 255,
    alignment: CPDFAlignment.LEFT,
    familyName: "Times",
    styleName: "Bold",
  },
});

注意： 在 2.6.0 版本中，该功能目前仅支持 Android 平台，iOS 将在后续版本中支持。

---

创建图片

该方法用于在指定页面上插入一个新的图片区域。它会在页面坐标系中创建一个图片框。坐标原点 (0, 0) 位于页面的左下角。

参数说明：

• pageIndex：目标页面索引，从 0 开始。
• imageData：要插入的图片数据，支持以下格式：
  • 文件路径：CPDFImageData.fromPath('/path/to/image.png')
  • Base64：CPDFImageData.fromBase64('iVBORw0KGgo...')
  • 资源文件：CPDFImageData.fromAsset('assets/images/logo.png')
  • URI（仅 Android）：CPDFImageData.fromUri('content://...')
• offset：图片区域左下角在 PDF 页面坐标系中的位置（单位：point）。
• width：图片区域的宽度，高度会根据图片的宽高比自动计算；如果为 null，则使用图片的原始宽度。

示例：

// 通过文件路径创建
const imageData = CPDFImageData.fromPath(uri);
await pdfReaderRef.current?._pdfDocument.createNewImageArea({
  pageIndex: 0,
  offset: { x: 100, y: 400 },
  width: 300,
  imageData: imageData,
});

// 通过 Base64 创建
const base64String = 'iVBORw0KGgoAAAANSUhEU...'; // 为简洁起见已截断
await pdfReaderRef.current?._pdfDocument.createNewImageArea({
  pageIndex: 0,
  offset: { x: 100, y: 400 },
  width: 200,
  imageData: CPDFImageData.fromBase64(base64String)
});

// 通过资源文件创建
await pdfReaderRef.current?._pdfDocument.createNewImageArea({
  pageIndex: 0,
  offset: { x: 100, y: 400 },
  width: 200,
  imageData: CPDFImageData.fromAsset('sign/signature_1.png')
});

注意： 在 2.6.0 版本中，该功能目前仅支持 Android 平台，iOS 将在后续版本中支持。

---

文本输入框与图片选择器的自动创建

在内容编辑模式下，点击 PDF 页面会自动创建文本输入框或弹出图片选择器，以便快速插入内容。在 2.6.0 版本中，您可以通过以下配置关闭该功能：

ComPDFKit.getDefaultConfig({
  readerViewConfig: {
    enableCreateEditTextInput: false,
    enableCreateImagePickerDialog: false,
  },
})