HarmonyOS Scroller截取问题

如何截取Scroller上内容(可以滚动,存在内容比较多、或者半屏幕内容较少的情况)并生成image?

HarmonyOS
3天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang

可以按照以下步骤进行:

1.获取Scroller的内容:使用Scroller的scrollable参数来初始化Scroller组件。通过Scroller的controller属性绑定滚动控制器。使用控制器的currentOffset方法获取当前的滚动偏移量。

2.获取Scroller内容的视口尺寸:在Scroller的onComplete事件中,图片数据加载成功和解码成功时均会触发该回调。返回成功加载的图片尺寸。

3.使用Canvas截取Scroller内容:使用canvasToTempFilePath接口将Scroller内容导出为临时文件路径。在draw()回调里调用该方法才能保证图片导出成功。在draw()回调中,获取Scroller的当前滚动偏移量,并将其应用到Canvas的绘制中,截取指定区域的内容。

4.保存Canvas截取的内容为图片:使用canvasToTempFilePath接口将Canvas截取的内容生成指定大小的图片。指定目标文件的类型(如png或jpg)、图片质量和成功、失败、结束的回调函数。

参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-components-canvas-canvas-V5

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-scroll-V5#scroller

获取已加载的组件的截图,传入组件的组件标识,找到对应组件进行截图。通过回调返回结果示例代码:

import componentSnapshot from '@ohos.arkui.componentSnapshot'
import image from '@ohos.multimedia.image'

@Entry
@Component
struct SnapshotExample {
  @State pixmap: image.PixelMap | undefined = undefined
  build() {
    Column() {
      Row() {
        Image(this.pixmap).width(200).height(200).border({ color: Color.Black, width: 2 }).margin(5)
        Image($r('app.media.img')).autoResize(true).width(200).height(200).margin(5).id("root")
      }
      Button("click to generate UI snapshot")
        .onClick(() => {
          componentSnapshot.get("root")
            .then((pixmap: image.PixelMap) => {
              this.pixmap = pixmap
            }).catch((err:Error) => {
            console.log("error: " + err)
          })
        }).margin(10)
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
  }
}
分享
微博
QQ
微信
回复
3天前
相关问题
HarmonyOS string字符串截取问题
8浏览 • 1回复 待解决
HarmonyOS List控制器Scroller相关
103浏览 • 1回复 待解决
HarmonyOS string类型的字符串截取
679浏览 • 1回复 待解决
emoji字符串无法进行截取
886浏览 • 1回复 待解决
Scroller的fling实现有什么好的方案
790浏览 • 1回复 待解决