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%'