HarmonyOS 组件旋转后,使用componentSnapshot截图,截到的图片不是显示给用户显示的样子

Image($r('app.media.img2'))
  .width('100%')
  .height(200)
  .rotate({angle:90})
  .id('saveView')

Button('截图')
  .onClick(() => {
    componentSnapshot.get("saveView", async (error: Error, pixmap: image.PixelMap) => {
      if (error) {
        console.error("error: " + JSON.stringify(error))
        return;
      }
      this.pixmap = pixmap;
    })
  })

Image(this.pixmap)
  .width('100%')

最后显示的还是图片原来的样子

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

图形那边的规格是组件截图不支持旋转属性,因为旋转可能会存在超过父组件的行为。如果要截带旋转属性的图,需要给image包一个父组件,截屏时截父组件。

参考demo如下:

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)
        Row(){
          Image($r('app.media.dog'))
            .autoResize(true)
            .width(200)
            .height(200)
            .margin(5)
              // .id("root")
              // 旋转90度
            .rotate({ angle: 90 })
        }
        .id("root")
      }

      Button("click to generate UI snapshot")
        .onClick(() => {
          componentSnapshot.get("root", (error: Error, pixmap: image.PixelMap) => {
            if (error) {
              console.log("error: " + JSON.stringify(error))
              return;
            }
            this.pixmap = pixmap
          })
        }).margin(10)
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS 截图保存图片相册
38浏览 • 1回复 待解决
循环显示包含图片组件
856浏览 • 1回复 待解决
HarmonyOS 图片显示
41浏览 • 1回复 待解决
HarmonyOS 旋转屏幕后显示不正常
29浏览 • 1回复 待解决