Guides

自定义 PDF 内容区域 UI

本章节介绍如何通过 readerViewConfig.uiStyle 自定义 PDF 页面内部的交互 UI 样式。该配置仅作用于 PDF 内容区域，包括文本选中、注释与表单选中边框、截图选区、页面矩形高亮及页面内图标等视觉元素，不包含工具栏、主题色或阅读器整体 UI 配置。

注释与内容编辑选中样式

用于控制注释和内容编辑对象在选中状态下的边框与控制点样式。

const configuration = ComPDFKit.getDefaultConfig({
  readerViewConfig: {
    uiStyle: {
      focusBorderStyle: {
        nodeColor: "#FC534E",
        borderColor: "#FC534E",
        borderWidth: 2,
        borderDashPattern: [20, 10]
      },
    },
  },
});

字段	类型	说明
nodeColor	String	控制点（角点）颜色。
borderColor	String	选中边框颜色。
borderWidth	Number	边框宽度。
borderDashPattern	Number[]	虚线样式，格式为 [实线长度, 间隔长度]。

内容编辑默认边框样式

用于控制内容编辑对象在未选中状态下的边框显示样式。

const configuration = ComPDFKit.getDefaultConfig({
  readerViewConfig: {
    uiStyle: {
      defaultBorderStyle: {
        borderColor: "#50507F",
        borderWidth: 2,
        borderDashPattern: [20, 10],
      },
    },
  },
});

字段	类型	说明
borderColor	String	边框颜色。
borderWidth	Number	边框宽度。
borderDashPattern	Number[]	虚线样式。

表单绘制与预览样式

用于设置表单控件创建过程中的绘制预览效果。

const configuration = ComPDFKit.getDefaultConfig({
  readerViewConfig: {
    uiStyle: {
      formPreview: {
        style: "fill",
        color: "#48C2FF6C",
      },
    },
  },
});

字段	说明
style	预览样式，支持 fill / stroke。
strokeWidth	边框宽度。
color	预览颜色（支持透明度）。

截图选区样式

用于自定义截图功能中选区边框及遮罩区域的显示效果。

const configuration = ComPDFKit.getDefaultConfig({
  readerViewConfig: {
    uiStyle: {
      screenshot: {
        fillColor: "#00000000",
        borderColor: "#FF6499FF",
        outsideColor: "#00000000",
        borderWidth: 5,
        borderDashPattern: [20, 10],
      },
    },
  },
});

字段	说明
outsideColor	选区外遮罩颜色。
fillColor	选区内部填充颜色。
borderColor	边框颜色。
borderWidth	边框宽度。
borderDashPattern	虚线样式。

文本选中样式与操作角标

用于控制文本选中区域的背景色及两侧操作角标图标。

const configuration = ComPDFKit.getDefaultConfig({
  readerViewConfig: {
    uiStyle: {
      icons: {
        selectTextLeftIcon: "ic_test_cursor_left",
        selectTextRightIcon: "ic_test_cursor_right",
        selectTextIcon: "ic_test_cursor",
        rotationAnnotationIcon: "ic_test_rotate",
      },
      selectTextColor: "#E7473BBC",
    },
  },
});

字段	说明
selectTextColor	文本选中背景色。
selectTextLeftIcon	左侧操作角标图标。
selectTextRightIcon	右侧操作角标图标。
selectTextIcon	默认操作图标。
rotationAnnotationIcon	旋转注释图标。

添加自定义图标资源：

• Android：将图标文件（如 ic_test_cursor.png）放入 android/app/src/main/res/drawable 目录。
• iOS：将图标文件（如 ic_test_cursor.png）添加到 ios/Runner/Assets.xcassets 资源集。

页面矩形高亮样式

用于通过 controller.setDisplayPageIndex() API 高亮显示指定页面时的矩形区域样式。

const configuration = ComPDFKit.getDefaultConfig({
  readerViewConfig: {
    uiStyle: {
      displayPageRect: {
        fillColor: "#4D1460F3",
        borderColor: "#FF6499FF",
        borderWidth: 2,
        borderDashPattern: [0, 0]
      },
    },
  },
});

字段	说明
fillColor	矩形区域填充颜色。
borderColor	矩形边框颜色。
borderWidth	边框宽度。
borderDashPattern	虚线样式。

书签标记图标

用于自定义页面内书签标记的显示图标。

const configuration = ComPDFKit.getDefaultConfig({
  readerViewConfig: {
    uiStyle: {
      bookmarkIcon: "ic_test_bookmark",
    },
  },
});

当未配置该字段时，SDK 将使用默认书签图标。