當(dāng)系統(tǒng)布局無法滿足需求的時候，就需要自己繪制了豺裆，我的需求是繪制如下圖拒秘，且跟跟隨上下滑動調(diào)整凹形大小号显。
snapshot_2024-11-11_10-33-59 拷貝.png
布局分析
對關(guān)鍵點(diǎn)拆分如下圖：
image.png
- 三個一樣大小的圓
- 進(jìn)行外切
- 中間的凹形
- DG弧度繪制
- AD/GE弧度繪制
- 上下滑動凹形大小尺寸變化
- 通過官網(wǎng)查詢，最合適是使用
Canvas躺酒，但Canvas.onReady只繪制一次押蚤，可以通過@Watch監(jiān)聽變量（圓的直徑）大小變化解決
用到的知識
1. 勾股定理
在平面上的一個直角三角形中，兩個直角邊邊長的平方加起來等于斜邊長的平方羹应。如果設(shè)直角三角形的兩條直角邊長度分別是和揽碘，斜邊長度是，那么可以用數(shù)學(xué)語言表達(dá)：
image.png
2. 弧度與角度轉(zhuǎn)化
弧度與角度轉(zhuǎn)換公式
1）將弧度轉(zhuǎn)換為角度：乘以 180园匹，除以 π
2）將角度轉(zhuǎn)換為弧度：乘以 π雳刺，除以 180
這是弧度與角度的對照列表：
| 角度 | 弧度（精確） | 弧度（近似） |
|---|---|---|
| 30° | π/6 | 0.524 |
| 45° | π/4 | 0.785 |
| 60° | π/3 | 1.047 |
| 90° | π/2 | 1.571 |
| 180° | π | 3.142 |
| 270° | 3π/2 | 4.712 |
| 360° | 2π | 6.283 |
布局開始繪制
對于以上的布局分析，可以知道裸违，布局繪制掖桦，其實(shí)畫三個弧線就可以完成了，代碼如下：
// AD左上弧-起始角度270供汛，終點(diǎn)角度330
this.context.arc(centerX - mar, radius, radius, 270 * Math.PI / 180, 330 * Math.PI / 180)
// DG底部弧-起始角度150枪汪，終點(diǎn)角度30
this.context.arc(centerX, 0, radius, 150 * Math.PI / 180, 30 * Math.PI / 180, true)
// GE右上弧-起始角度210，終點(diǎn)角度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，終點(diǎn)角度330
this.context.arc(centerX - mar, radius, radius, 270 * Math.PI / 180, 330 * Math.PI / 180)
// DG底部弧-起始角度150朱监，終點(diǎn)角度30
this.context.arc(centerX, 0, radius, 150 * Math.PI / 180, 30 * Math.PI / 180, true)
// GE右上弧-起始角度210，終點(diǎn)角度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()
})
}
}
