HarmonyOS 鸿蒙Next中利用组件滚动拼接实现滚动截屏

HarmonyOS 鸿蒙Next中利用组件滚动拼接实现滚动截屏

1. 工具里面需要UIContext，需要在entrybility里面保存

let uiContext: UIContext | undefined = windowStage.getMainWindowSync().getUIContext(); 
AppStorage.setOrCreate('uiContext', uiContext);

1. 设置截图组件的id

list_id = 'List_ID'

1. 滚动截图

/**************begin snap****************/
private context = this.getUIContext().getHostContext() as common.UIAbilityContext;
private scroller: Scroller = new Scroller();
private listComponentWidth: number = 0;
private listComponentHeight: number = 0;
private curYOffset: number = 0;
private scrollHeight: number = 0;
private yOffsetBefore: number = 0;
private isClickStop: boolean= false;
@State isEnableScroll: boolean = true;
@StorageLink('screenWidth') screenWidth: number = 0;
@StorageLink('screenHeight') screenHeight: number = 0;
@State snapPopupPosition: Position = { x: 0, y: 0 };
@State mergedImage: PixelMap | undefined = undefined;
private areaArray: image.PositionArea[] = [];
private scrollYOffsets: number[] = [];

//滚动截图的入口方法
async scrollSnapshot() {
  // The settings list cannot be manually scrolled during the screenshot process
  // to avoid interference with the screenshot
  this.isEnableScroll = false;
  // Saves the current location of the component for recovery
  this.yOffsetBefore = this.curYOffset;
  // Set the prompt pop-up to be centered
  this.snapPopupPosition = PopupUtils.calcPopupCenter(this.screenWidth, this.screenHeight, 100, 200);
  await this.scrollSnapAndMerge();
  // [StartExclude context]
  // Open the prompt pop-up window
  this.isShowPreview = true;
  // Initial variable after stitching
  await this.afterGeneratorImage();
  // [EndExclude context]
  this.isEnableScroll = true;
  this.isClickStop = false;
}

//滚动拼接
async scrollSnapAndMerge() {
  // Record an array of scrolls
  this.scrollYOffsets.push(this.curYOffset - this.yOffsetBefore);
  // Call the API for taking screenshots to obtain the current screenshots
  const pixelMap = await this.getUIContext().getComponentSnapshot().get(this.LIST_ID);
  // Gets the number of bytes per line of image pixels.
  let area: image.PositionArea =
    await ImageUtils.getSnapshotArea(pixelMap, this.scrollYOffsets, this.listComponentWidth, this.listComponentHeight)
  this.areaArray.push(area);

  // During the loop, it is determined whether the bottom is reached, and the user does not stop taking screenshots
  if (!this.scroller.isAtEnd() && !this.isClickStop) {
    // Scroll to the next page without scrolling to the end
    CommonUtils.scrollAnimation(this.scroller, 1000, this.scrollHeight);
    await CommonUtils.sleep(1500);
    await this.scrollSnapAndMerge();
  } else {
    // After scrolling to the bottom, the buffer obtained by each round of scrolling is spliced
    // to generate a long screenshot
    this.mergedImage =
      await ImageUtils.mergeImage(this.areaArray, this.scrollYOffsets[this.scrollYOffsets.length - 1],
        this.listComponentWidth, this.listComponentHeight);
  }
}

//完成拼接
async afterGeneratorImage() {
  // Delay for transition animation
  await CommonUtils.sleep(200);
  this.snapPopupPosition = PopupUtils.calcPopupBottomLeft(this.screenHeight, 200);
  this.componentMaskImage = undefined;
  this.scrollYOffsets.length = 0;
  this.areaArray.length = 0;

}
/**************end snap****************/