您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本文小编为大家详细介绍“怎么利用Jetpack Compose实现绘制五角星效果”,内容详细,步骤清晰,细节处理妥当,希望这篇“怎么利用Jetpack Compose实现绘制五角星效果”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。
我们实现绘制五角星的原理如下图,首先我们会虚构两个圆,将内圆和外圆角度平分五份,然后依次连接内圆和外圆的切点的坐标,然后使用path绘制完成。
代码中的实现涉及到自定义绘制,难度并不大。需要注意的点:
composse中角度的锚点是弧度(Math.PI)、而原生的锚点是角度(360)
默认的原点在左上角,我们绘制的时候需要主动移动到组合的中心点
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实现绘制五角星效果”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。