目录

自定义页面背景

当应用需要支持自定义背景时，开发者可通过ReaderSetting的themeColor及themeBgImg属性，实现对阅读内容自定义背景色及背景图片的实时修改。

更改页面背景色，可能会涉及到字体颜色和深色模式的适配。比如：设置了白色背景，但是当前是深色模式，字体颜色也是白色，这样会导致内容看不清楚。

自定义页面背景图片支持两种存放路径：

业务流程

接口说明

自定义页面背景主要涉及3个接口，具体介绍如下表所示。

接口名 描述
setPageConfig(pageConfig: ReaderSetting): void 设置或者修改页面排版属性。
on('resourceRequest') 注册资源请求回调，如果设置了自定义背景、字体时，排版引擎会通过此接口获取对应的资源ArrayBuffer。
off('resourceRequest') 注销资源请求回调接口，可在页面销毁时调用。

开发准备

开发步骤

  1. 导入相关模块。

    import { fileIo as fs } from '@kit.CoreFileKit';
import { common } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';

  2. 单独设置背景色。如果有设置背景图片的情况下，背景色通常用于仿真翻页时背面主题色的绘制。否则，背景色还会用于渲染阅读页的背景色。

    this.readerSetting.themeColor = '#FFFFFF';
this.readerSetting.themeBgImg = '';
// 当设置背景色为浅色时，需要将深色模式关掉
this.readerSetting.nightMode = false;
// 当设置背景色为浅色时，字体颜色也需要适配
this.readerSetting.fontColor = '#000000';

  3. 设置背景图片。需要同时设置与背景图片相近的主题颜色，用于仿真翻页时背面主题色的绘制。

    this.readerSetting.themeBgImg = 'dark_sky_first.jpg';
this.readerSetting.themeColor = '#000000';
// 当设置背景图为深色时，需要将深色模式开启
this.readerSetting.nightMode = true;
// 当设置背景图为深色时，字体颜色也需要适配
this.readerSetting.fontColor = '#FFFFFF';

  4. 调用ReaderComponentController组件控制器的setPageConfig接口，重新渲染界面。

    this.readerComponentController.setPageConfig(this.readerSetting);

  5. 注册排版引擎资源请求接口，并返回相应的背景图资源。

    在排版引擎检测到是自定义背景图片场景时，会通过接口请求背景图片资源。开发者需要根据返回的文件路径，判断是否为请求背景图片资源。如果是，则根据背景图片资源所在的路径，返回对应的ArrayBuffer。

    aboutToAppear(): void {
  // 注册资源请求回调
  this.readerComponentController.on('resourceRequest', this.resourceRequest);
}

aboutToDisappear(): void {
  // 注销资源请求回调
  this.readerComponentController.off('resourceRequest', this.resourceRequest);
}

/**
 * 资源请求回调
 */
private resourceRequest: bookParser.CallbackRes<string, ArrayBuffer> = (filePath: string): ArrayBuffer => {
  hilog.info(0x0000, 'ReaderLog', 'resourceRequest : filePath = ' + filePath);
  if (filePath.length === 0) {
    return new ArrayBuffer(0);
  }
  try {
    let context = this.getUIContext().getHostContext() as common.UIAbilityContext;
    // 获取资源路径resources/rawfile下的背景图片文件Uint8Array数据
    let value: Uint8Array = context.resourceManager.getRawFileContentSync(filePath);
    hilog.info(0x0000, 'ReaderLog', 'resourceRequest : get other resource succeeded ');
    return value.buffer as ArrayBuffer;
  } catch (error) {
    let code = (error as BusinessError).code;
    let message = (error as BusinessError).message;
    hilog.error(0x0000, 'ReaderLog',
      `resourceRequest : get other resource failed, error code: ${code}, message: ${message}.`);
  }
  // 如果在资源路径源路径resources/rawfile下获取背景图片文件数据失败，则去沙箱目录下获取背景图片数据
  return this.loadFileFromPath(filePath);
}

private loadFileFromPath(filePath: string): ArrayBuffer {
  let file: fs.File | null = null;
  try {
    let stats = fs.statSync(filePath);
    file = fs.openSync(filePath, fs.OpenMode.READ_ONLY);
    let buffer = new ArrayBuffer(stats.size);
    fs.readSync(file.fd, buffer);
    return buffer;
  } catch (error) {
    let code = (error as BusinessError).code;
    let message = (error as BusinessError).message;
    hilog.error(0x0000, 'ReaderLog',
      `loadFileFromPath : get file failed, error code: ${code}, message: ${message}.`);
    return new ArrayBuffer(0);
  } finally {
    if (file) {
      fs.closeSync(file);
    }
   }
 }