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

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)
            })
        }
      }
    )
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.

HarmonyOS

fox280

2024-12-24 16:48:05

7072浏览

回答 1

按赞同

按时间

zbw_apple

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

let option:image.DecodingOptions={
  sampleSize:1,
  rotate:0,
  editable:false,
  desiredSize:{
    width:800,
    height:800
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.

完整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)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.

2024-12-24 17:29:09

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

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

订阅鸿蒙技术特刊，精选内容抢先看