怎么利用Jetpack?Compose實現繪制五角星效果

本文小編為大家詳細介紹“怎么利用Jetpack Compose實現繪制五角星效果”，內容詳細，步驟清晰，細節處理妥當，希望這篇“怎么利用Jetpack Compose實現繪制五角星效果”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

原理

我們實現繪制五角星的原理如下圖，首先我們會虛構兩個圓，將內圓和外圓角度平分五份，然后依次連接內圓和外圓的切點的坐標，然后使用path繪制完成。

實現

代碼中的實現涉及到自定義繪制，難度并不大。需要注意的點：

1. composse中角度的錨點是弧度（Math.PI）、而原生的錨點是角度(360)

2. 默認的原點在左上角，我們繪制的時候需要主動移動到組合的中心點

3. path的繪制使用Fill可以填充閉合路徑圖形，使用Stroke可以繪制線性閉合路徑圖形

代碼

fun Modifier.customDraw(
    color: Color,
    starCount: Int = 5,
    checked: Boolean = false,
) =
    this.then(CustomDrawModifier(color, starCount, checked = checked))

class CustomDrawModifier(
    private val color: Color,
    private val starCount: Int = 5,//星的數量
    private var checked: Boolean = false,
) :
    DrawModifier {
    override fun ContentDrawScope.draw() {
        log("$size")
        val radiusOuter = if (size.width > size.height) size.height / 2 else size.width / 2 //五角星外圓徑
        val radiusInner = radiusOuter / 2 //五角星內圓半徑
        val startAngle = (-Math.PI / 2).toFloat() //開始繪制點的外徑角度
        val perAngle = (2 * Math.PI / starCount).toFloat() //兩個五角星兩個角直接的角度差
        val outAngles = (0 until starCount).map {
            val angle = it * perAngle + startAngle
            Offset(radiusOuter * cos(angle), radiusOuter * sin(angle))
        }//所有外圓角的頂點
        val innerAngles = (0 until starCount).map {
            val angle = it * perAngle + perAngle / 2 + startAngle
            Offset(radiusInner * cos(angle), radiusInner * sin(angle))
        }//所有內圓角的頂點
        val path = Path()//繪制五角星的所有內圓外圓的點連接線
        (0 until starCount).forEachIndexed { index, _ ->
            val outerX = outAngles[index].x
            val outerY = outAngles[index].y
            val innerX = innerAngles[index].x
            val innerY = innerAngles[index].y
//            drawCircle(Color.Red, radius = 3f, center = outAngles[index])
//            drawCircle(Color.Yellow, radius = 3f, center = innerAngles[index])
            if (index == 0) {
                path.moveTo(outerX, outerY)
                path.lineTo(innerX, innerY)
                path.lineTo(outAngles[(index + 1) % starCount].x,
                    outAngles[(index + 1) % starCount].y)
            } else {
                path.lineTo(innerX, innerY)//移動到內圓角的端點
                path.lineTo(outAngles[(index + 1) % starCount].x,
                    outAngles[(index + 1) % starCount].y)//連接到下一個外圓角的端點
            }
            if (index == starCount - 1) {
                path.close()
            }
        }
        translate(size.width / 2, size.height / 2) {
            drawPath(path, color, style = if (checked) Fill else Stroke(width = 5f))
        }
    }

}

最終實現效果

讀到這里，這篇“怎么利用Jetpack Compose實現繪制五角星效果”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。