Skip to content
ComPDF
Guides

注释

ComPDF React Native SDK 支持多种注释事件监听,以下是常用的注释事件:

事件名称描述
onAnnotationCreationPrepared当用户准备创建签名、图章、超链接、图片注释时触发,返回注释类型。
CPDFEvent.ANNOTATIONS_CREATED当用户创建注释时触发,返回创建的注释数据。
CPDFEvent.ANNOTATIONS_SELECTED当用户选中注释时触发,返回选中的注释数据。
CPDFEvent.ANNOTATIONS_DESELECTED当用户取消选中注释时触发,返回取消选中的注释数据。

以下是相关回调事件使用说明:

onAnnotationCreationPrepared 用于在注释模式下点击底部的签名、图章、超链接、图片工具,或通过 pdfReaderRef.current.setAnnotationMode() 进入创建注释模式时触发。通过此回调,可在 React Native 应用中弹出自定义的选择框,而非使用 ComPDF 集成的选择弹窗。此功能需要配合 CPDFConfiguration 中的配置,禁止在创建这四种注释时弹出默认选择对话框:

tsx
ComPDFKit.getDefaultConfig({
  // 禁止创建签名、图章、超链接、图片注释时弹出选择对话框
  annotationsConfig: {
    autoShowLinkDialog: false,
    autoShowPicPicker: false,
    autoShowSignPicker: false,
    autoShowStampPicker: false
  }
})

要监听 onAnnotationCreationPrepared事件,可以在创建 CPDFReaderView 时传入相应的回调函数。例如:

tsx
<CPDFReaderView
  ref={pdfReaderRef}
  document={samplePDF}
  configuration={ComPDFKit.getDefaultConfig({
    modeConfig: {
      initialViewMode: "annotations",
    },
    annotationsConfig: {
      autoShowLinkDialog: false,
      autoShowPicPicker: false,
      autoShowSignPicker: false,
      autoShowStampPicker: false
    }
  })}
  onAnnotationCreationPrepared={(type, annotation)=> {
    // 签名、图章、图片注释在进入创建模式时(点击底部工具栏按钮或调用pdfReaderRef.current.setAnnotationMode())会触发此回调
    // 超链接注释在用户在页面中滑取矩形抬起手指后回调。
    // 可以弹出自定义的选择框,供用户选择签名、图章、图片等
  }}
  />

插入签名: 在选择完签名图片后,调用以下API插入签名注释:

tsx
await controller.prepareNextSignature('/path/to/signature.png');

插入图章: 在选择完标准图章、图片图章、文字图章后,调用以下API插入图章注释:

tsx
// 插入标准图章,查看CPDFStandardStamp枚举获取可用的标准图章类型
await pdfReaderRef.current?.prepareNextStamp({standardStamp: CPDFStandardStamp.Approved});

// 插入图片图章
await pdfReaderRef.current?.prepareNextStamp({ imagePath: '/path/to/stamp.png' });

// 插入文字图章
await pdfReaderRef.current.prepareNextStamp({
  textStamp: {
    content: "ComPDF",
    date: CPDFDateUtil.getTextStampDate({
      timeSwitch: true,
      dateSwitch: true,
    }),
    color: CPDFTextStampColor.blue,
    shape: CPDFTextStampShape.leftTriangle,
  },
});

通过以上方式,您可以在 React Native 应用中自定义签名和图章的选择过程,同时利用 ComPDF 强大的注释创建功能。

要监听其他注释事件,可以在创建 CPDFReaderView 后调用函数。例如:

tsx

pdfReaderRef.current?.addEventListener(
  CPDFEvent.ANNOTATIONS_CREATED,
  (annotation) => {
    // event 为 CPDFAnnotation 对象以及其子类对象
  }
);
pdfReaderRef.current?.addEventListener(
  CPDFEvent.ANNOTATIONS_SELECTED,
  (annotation) => {
    // event 为 CPDFAnnotation 对象以及其子类对象
  }
);

pdfReaderRef.current?.addEventListener(
  CPDFEvent.ANNOTATIONS_DESELECTED,
  (annotation) => {
    // event 为 CPDFAnnotation 对象以及其子类对象
  }
);