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 对象以及其子类对象
}
);