HarmonyOS 鸿蒙Next 自定义View怎么转换

import componentSnapshot from '@ohos.arkui.componentSnapshot'
import image from '@ohos.multimedia.image'
[@Entry](/user/Entry)
[@Component](/user/Component)
struct waterMarkPage {
  [@State](/user/State) pixmap: image.PixelMap | undefined = undefined
  build() {
    Column() {
      Stack({ alignContent: Alignment.Center }){
        Image($r('app.media.startIcon')).autoResize(true).width(300).height(300)
        Row() {
          Text("水印").width(40).height(20).fontSize(16).fontColor(Color.White)
            .border({ color: Color.Red, width: 1 }).borderRadius(4)
            .margin({top:10,right:10})
        }
        .width(300).height(300)
        .alignItems(VerticalAlign.Top)
        .justifyContent(FlexAlign.End)
        Row() {
          Image($r('app.media.startIcon')).autoResize(true).width(40).height(40).margin({bottom:10,right:10})
        }
        .width(300).height(300)
        .alignItems(VerticalAlign.Bottom)
        .justifyContent(FlexAlign.End)
      }
      .id("root")
      Button("生成水印图片")
        .onClick(() => {
          componentSnapshot.get("root")
            .then((pixmap: image.PixelMap) => {
              this.pixmap = pixmap
            }).catch((err:Error) => {
            console.log("error: " + err)
          })
        }).margin(10)
      Image(this.pixmap).width(300).height(300).border({ color: Color.Blue, width: 1 }).margin(5)
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
  }
}