ArkUI画图形

前言

整体就是一个stack布局，一层一层叠上去的，主要就是图形的绘制，例如三角形之类的，这里是用Path组件来画的，以前CSS还可以用border的属性来绘制三角形，我找了华为官网，觉得Path不错，首先要了解的是vp和px的单位转换，我用vp2px（直接用即可）方法计算出1vp=3px，可能对于屏幕像素的差异会有所不同，然后就是Path的属性方法了
首先确实要给宽度和高度，我这里用px为单位，当然也可以不写
然后就是commands方法，里面的参数是字符串，这个可以参考Path，使用这个方法主要就是对于坐标要有概念，我这里用了M0 200（表示起点（0,200）），然后跟着L390 250，表示从起点开始画线到（390,250），然后就是S780 1050 730 1050，表示从坐标（780,1050）到（730,1050）画一条曲线，就是下图的右下角的圆角，最后Z收尾，表示最后一个坐标点直接连接回起点
然后就是自定义线的宽度和颜色，给整个区域内填充颜色用fill方法

效果

代码

@Entry
@Component
struct DialogPage {
  myDialogController:CustomDialogController = new CustomDialogController({
    builder:MyDialog()
  })
  build() {
    Column(){
      Button('click')
        .onClick(() => {
          this.myDialogController.open()
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)

  }
}

@CustomDialog
struct MyDialog{
  myDialogController?:CustomDialogController
  build() {
    Stack(){
      //background--pink
      Column(){

      }
      .width('80%')
      .height('50%')
      .backgroundColor(Color.Pink)
      .borderRadius(40)
      //middle--card
      Column(){
        Text('黑神话：悟空')
          .fontSize(20)
          .fontWeight(700)
          .width('100%')
          .padding(15)
      }
      .width('70%')
      .height('50%')
      .backgroundImage($r('app.media.head'))
      .backgroundBlurStyle(BlurStyle.Thick)
      .borderRadius(20)
      .offset({y:-20})

      Column(){
        Path()
          .width('780px')
          .height('800px')
          .commands('M0 200 L390 250 L780 200 L780 1000 S780 1050 730 1050 L50 1050 S0 1050 0 1000 Z')
          .fill('#ff302b2b')
          .stroke(Color.Black)
          .strokeWidth(3)
          .borderRadius({bottomLeft:10,bottomRight:10})
      }
      .alignItems(HorizontalAlign.Center)
      .width('80%')
      .height('50%')
      //cover
      Column(){
        Text('天')
          .fontColor('#ff835a06')
          .fontSize(50)
        Text('命')
          .fontColor('#ff835a06')
          .fontSize(50)
        Text('人')
          .fontColor('#ff835a06')
          .fontSize(50)
      }
        .width('80%')
        .height('45%')
        .offset({y:40})
        .borderRadius({bottomLeft:20,bottomRight:20})
      .justifyContent(FlexAlign.SpaceAround)
      .alignItems(HorizontalAlign.Center)
      .padding(20)

    }
    .width('100%')
    .height('100%')
    .onClick(() => {
      this.myDialogController?.close()
    })
  }
}