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%')
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.

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

HarmonyOS
2024-12-24 16:25:41
浏览
收藏 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)
  }
}
  • 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.
分享
微博
QQ
微信
回复
2024-12-24 17:56:17
相关问题
HarmonyOS 截图保存图片相册
505浏览 • 1回复 待解决
循环显示包含图片组件
1035浏览 • 1回复 待解决
HarmonyOS Web组件显示图片
387浏览 • 1回复 待解决
HarmonyOS 图片显示
573浏览 • 1回复 待解决