HarmonyOS TextReader组件在播控中心的icon显示依然不正确？

Question

TextReader组件在播控中心的icon显示不正确，没有铺满整个组件。

我们传入播控中心的图片是通过代码获取的image.PixelMap，获取image.PixelMap的代码是我们的官网提供的示例代码, 获取之后就在调用TextReader的时候传给 TextReader.ReadInfo中的image。

获取image.PixelMap的代码如下面所示：

class ImageSize {
  height: number = 800
  width: number = 800
}

export class ImagePixelMapUtil {
  private imagePixelMap: Map<string, PixelMap> = new Map()
  private options: Record<string, number | boolean | ImageSize> = {
    'alphaType': 0, // 透明度
    'editable': false, // 是否可编辑
    'pixelFormat': 3, // 像素格式
    'scaleMode': 1, // 缩略值
    'size': {
      height: 800, width: 800
    }
  }

  downLoadAndSave(imageUrl: string) {
    if (this.imagePixelMap.has(imageUrl)) {
      return
    }
    http.createHttp().request(imageUrl,
      (error: BusinessError, data: http.HttpResponse) => {
        if (error) {
          ZHGLog.error(`http request failed with. Code: ${error.code}, message: ${error.message}`);
        } else {
          image.createImageSource(data.result as ArrayBuffer)
            .createPixelMap(this.options)
            .then((pixelMap: PixelMap) => {
              this.saveImagePixelMap(imageUrl, pixelMap)
            })
        }
      }
    )
  }

Answer 1

需修改createPixelMap(this.options)中的option，修改为：

let option:image.DecodingOptions={
  sampleSize:1,
  rotate:0,
  editable:false,
  desiredSize:{
    width:800,
    height:800
  }
}

完整demo如下：

import { hilog } from '@kit.PerformanceAnalysisKit';
import { TextReader, TextReaderIcon, ReadStateCode } from '@kit.SpeechKit';
import { image } from '@kit.ImageKit';
import resourceManager from '@ohos.resourceManager';
const TAG = 'AI_SPEECH_KIT_DEMO'
class ImageSize {
  height: number = 800
  width: number = 800
}
@Entry
@Component
struct Index {
  @State message: string = '';
  @State tup:PixelMap|undefined=undefined
  /**
   * 待加载的文章
   */
  @State readInfoList: TextReader.ReadInfo[] = [];
  @State selectedReadInfo: TextReader.ReadInfo = this.readInfoList[0];

  /**
   * 播放状态
   */
  @State readState: ReadStateCode = ReadStateCode.WAITING;

  /**
   * 用于显示当前页的按钮状态
   */
  @State isInit: boolean = false;
  @State isListening: boolean = false;
  context = getContext(this);
  async aboutToAppear(){
    try {
      // 获取resourceManager资源管理器
      const resourceMgr = this.context.resourceManager;
      // 获取rawfile文件夹下icon.png的ArrayBuffer。
      const fileData = await resourceMgr.getRawFileContent("333.png");
      let option:image.DecodingOptions={
        sampleSize:1,
        rotate:0,
        editable:false,
        desiredSize:{
          width:800,
          height:800
        }
      }

      // 获取图片的ArrayBuffer
      const buffer = fileData.buffer;
      // 创建imageSource。
      const imageSource = image.createImageSource(buffer);
      // 创建PixelMap
      // this.tup = await imageSource.createPixelMap(options);
      this.tup=await imageSource.createPixelMap(option)
    } catch (err) {
      console.error(`filed: err = ${JSON.stringify(err)}`)
    }
    /**
     * 加载数据
     */
    console.info('ReadStateCode', JSON.stringify(this.readState))
    let readInfoList: TextReader.ReadInfo[] = [{
      id: '001',
      title: {
        text:'水调歌头.明月几时有',
        isClickable:true
      },
      author:{
        text:'宋.苏轼',
        isClickable:true
      },
      date: {
        text:'2024/01/01',
        isClickable:false
      },
      image:this.tup,
      bodyInfo: '明月几时有？把酒问青天。不知天上宫阙，今夕是何年。'
    }];
    this.readInfoList = readInfoList;
    this.selectedReadInfo = readInfoList[0];
    // this.getimg()
    this.init()
  }
  /**
   * 初始化
   */
  async init() {
    const readerParam: TextReader.ReaderParam = {
      isVoiceBrandVisible: true,
      businessBrandInfo: {
        panelName: '小艺朗读',
        panelIcon: $r('app.media.startIcon')
      }
    }
    try{
      await TextReader.init(getContext(this), readerParam);
      this.isInit = true;
    } catch (err) {
      hilog.error(0x0001, TAG, 'init error: %{public}s', JSON.stringify(err))
    }
  }

  // 设置操作监听
  setActionListener() {
    TextReader.on('setArticle', (id: string) => {});
    TextReader.on('clickArticle', (id: string) => {});
    TextReader.on('clickAuthor', (id: string) => {});
    TextReader.on('clickNotification', (id: string) => { hilog.info(0x0001, TAG, `onClickNotification ${id}`) });
    TextReader.on('showPanel', () => { hilog.info(0x0001, TAG, `onShowPanel`) });
    TextReader.on('hidePanel', () => { hilog.info(0x0001, TAG, `onHidePanel`) });
    TextReader.on('stop', () => { hilog.info(0x0001, TAG, `onStop`) });
    TextReader.on('release', () => { hilog.info(0x0001, TAG, `onRelease`) });
    TextReader.on('stateChange', (state: TextReader.ReadState) => {
      hilog.info(0x1, TAG, `ReadState: %{public}s`, JSON.stringify(state));
      this.onStatusChanged(state)
    });
    TextReader.on('requestMore', () => this.onStatusChanged);
  }

  onStatusChanged = (state: TextReader.ReadState) => {
    hilog.info(0x1, TAG, `selectedReadInfo.id: %{public}s`, this.selectedReadInfo?.id);
    if (this.selectedReadInfo?.id === state.id) {
      hilog.warn(0x1, TAG, `match, changeState to %{public}s`, JSON.stringify(state))
      this.readState = state.state;
    } else {
      this.readState = ReadStateCode.WAITING;
    }
  }

  // 设置事件监听
  setEventListener(){
    TextReader.on('eventNotification', (event: TextReader.NotificationEvent) => {
      hilog.info(0x0001, TAG, `event: ${JSON.stringify(event)}`)
    })
    TextReader.on('eventPanel', (event: TextReader.PanelEvent) => {
      hilog.info(0x0001, TAG, `event: ${JSON.stringify(event)}`)
    })
    TextReader.on('eventReadList', (event: Array<TextReader.ListEventState>) => {
      hilog.info(0x0001, TAG, `event: ${JSON.stringify(event)}`)
    })
  }

  build() {
    Column() {
      TextReaderIcon({ readState: this.readState })
        .margin({ right: 20 })
        .width(32)
        .height(32)
        .onClick(async () => {
          // 若未初始化，先初始化并启动
          try {
            this.setActionListener();
            this.setEventListener();
            await TextReader.start(this.readInfoList, this.selectedReadInfo?.id);
          } catch (err) {
            hilog.error(0x0001, TAG, 'init message: %{public}s', JSON.stringify(err))
          }
        })

      Text('click icon to play').fontSize(10)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}