HarmonyOS 鸿蒙Next commands 绘制arc控件

先上图：

import { PathShape } from ‘@kit.ArkUI’;

@Builder
function DefaultBuilder() {
}

@Component
export struct ArcLayoutView {
  @BuilderParam contentView?: CustomBuilder = DefaultBuilder;
  @State viewSzie: SizeOptions = { width: 0, height: 0 }
  @State arcHeight: number = 20

  build() {
    Stack() {
      if (this.contentView) {
        this.contentView()
      }
    }
    .constraintSize({ minHeight: ${this.arcHeight}vp })
    .clipShape(new PathShape({
      commands: <br> M0 0<br> H${(vp2px(this.viewSzie.width as number))}<br> V${(vp2px(this.viewSzie.height as number) - vp2px(this.arcHeight))}<br> H0 V0<br> M0 ${(vp2px(this.viewSzie.height as number) - vp2px(this.arcHeight))}<br> Q${(vp2px(this.viewSzie.width as number) /<br> 2)} ${(vp2px(this.viewSzie.height as number) +<br> vp2px(this.arcHeight))} ${(vp2px(this.viewSzie.width as number))} ${(vp2px(this.viewSzie.height as number) -<br> vp2px(this.arcHeight))}<br>
    }))
    .onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => {
      this.viewSzie = newValue
    })
    .shadow({
      radius: vp2px(10),
      color: Color.Gray,
      offsetX: 0,
      offsetY: 0
    })
  }
}

使用：

@Builder
ContentView() {
  Column() {
    ArcLayoutView({ contentView: () => this.ArcContent(), arcHeight: 50 })

  }
  .alignItems(HorizontalAlign.Start)
  .width(CommonConstants.FULL_PERCENT)
}

@Builder
ArcContent() {
  Column() {
    Image($r(‘app.media.meinv’))
      .objectFit(ImageFit.Cover)
      .width(‘100%’)
      .height(‘200vp’)
  }
  .width(‘100%’)
}