鸿蒙绘制凹形布局，滑动进行大小重绘

当系统布局无法满足需求的时候，就需要自己绘制了，我的需求是绘制如下图，且跟跟随上下滑动调整凹形大小。

snapshot_2024-11-11_10-33-59 拷贝.png

布局分析

对关键点拆分如下图：

image.png

1. 三个一样大小的圆

• 进行外切

2. 中间的凹形

• DG弧度绘制
• AD/GE弧度绘制

3. 上下滑动凹形大小尺寸变化

• 通过官网查询，最合适是使用Canvas，但Canvas.onReady只绘制一次，可以通过@Watch监听变量（圆的直径）大小变化解决

用到的知识

1. 勾股定理

在平面上的一个直角三角形中，两个直角边边长的平方加起来等于斜边长的平方。如果设直角三角形的两条直角边长度分别是和，斜边长度是，那么可以用数学语言表达：

image.png

2. 弧度与角度转化

弧度与角度转换公式
1）将弧度转换为角度：乘以 180，除以 π
2）将角度转换为弧度：乘以 π，除以 180

这是弧度与角度的对照列表：

布局开始绘制

对于以上的布局分析，可以知道，布局绘制，其实画三个弧线就可以完成了，代码如下：

// AD左上弧-起始角度270，终点角度330
this.context.arc(centerX - mar, radius, radius, 270 * Math.PI / 180, 330 * Math.PI / 180)
// DG底部弧-起始角度150，终点角度30
this.context.arc(centerX, 0, radius, 150 * Math.PI / 180, 30 * Math.PI / 180, true)
// GE右上弧-起始角度210，终点角度270
this.context.arc(centerX + mar, radius, radius, 210 * Math.PI / 180, 270 * Math.PI / 180)

完整代码如下

// 上下滑动修改fabSize的大小，使Canvas重新绘制
@State @Watch('drawBottomBar') fabSize: number = 80

drawBottomBar() {
    let width = this.context.width
    let height = this.context.height
    // 删除之前绘制的，重新绘制
    this.context.clearRect(0, 0, width, height)
    this.context.beginPath()

    let centerX = width / 2
    let radius = this.fabSize / 2
    // AB/BE的距离
    let mar = Math.sqrt(Math.pow(this.fabSize, 2) - Math.pow(radius, 2))
    // 左上直线
    this.context.lineTo(centerX - mar, 0)
    // AD左上弧-起始角度270，终点角度330
    this.context.arc(centerX - mar, radius, radius, 270 * Math.PI / 180, 330 * Math.PI / 180)
    // DG底部弧-起始角度150，终点角度30
    this.context.arc(centerX, 0, radius, 150 * Math.PI / 180, 30 * Math.PI / 180, true)
    // GE右上弧-起始角度210，终点角度270
    this.context.arc(centerX + mar, radius, radius, 210 * Math.PI / 180, 270 * Math.PI / 180)
    // 右上直线
    this.context.lineTo(width, 0)
    // 右下直线
    this.context.lineTo(width, height)
    // 底部直线
    this.context.lineTo(0, height)
    // 闭合
    this.context.closePath()
    // 颜色
    this.context.fillStyle = '#344955'
    // 填充
    this.context.fill()
}

build() {
    Stack() {
      Canvas(this.context)
        .height(80)
        .width('100%')
        .onReady(() => {
          this.drawBottomBar()
        })
    }
}