網(wǎng)站首頁(yè) 編程語(yǔ)言 正文
說(shuō)明
compose中我們的所有ui操作,包括一些行為,例如:點(diǎn)擊、手勢(shì)等都需要使用Modifier來(lái)進(jìn)行操作。因此對(duì)Modifier的理解可以幫助我們解決很多問(wèn)題的
自定義星行Modifier
本文我們打算自定義一個(gè)Modifier,通過(guò)這個(gè)modifier我們可以實(shí)現(xiàn)用一個(gè)操作符就畫(huà)出五角星的效果
原理
我們實(shí)現(xiàn)繪制五角星的原理如下圖,首先我們會(huì)虛構(gòu)兩個(gè)圓,將內(nèi)圓和外圓角度平分五份,然后依次連接內(nèi)圓和外圓的切點(diǎn)的坐標(biāo),然后使用path繪制完成。
實(shí)現(xiàn)
代碼中的實(shí)現(xiàn)涉及到自定義繪制,難度并不大。需要注意的點(diǎn):
- composse中角度的錨點(diǎn)是弧度(Math.PI)、而原生的錨點(diǎn)是角度(360)
- 默認(rèn)的原點(diǎn)在左上角,我們繪制的時(shí)候需要主動(dòng)移動(dòng)到組合的中心點(diǎn)
- 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,//星的數(shù)量
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 //五角星內(nèi)圓半徑
val startAngle = (-Math.PI / 2).toFloat() //開(kāi)始繪制點(diǎn)的外徑角度
val perAngle = (2 * Math.PI / starCount).toFloat() //兩個(gè)五角星兩個(gè)角直接的角度差
val outAngles = (0 until starCount).map {
val angle = it * perAngle + startAngle
Offset(radiusOuter * cos(angle), radiusOuter * sin(angle))
}//所有外圓角的頂點(diǎn)
val innerAngles = (0 until starCount).map {
val angle = it * perAngle + perAngle / 2 + startAngle
Offset(radiusInner * cos(angle), radiusInner * sin(angle))
}//所有內(nèi)圓角的頂點(diǎn)
val path = Path()//繪制五角星的所有內(nèi)圓外圓的點(diǎn)連接線
(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)//移動(dòng)到內(nèi)圓角的端點(diǎn)
path.lineTo(outAngles[(index + 1) % starCount].x,
outAngles[(index + 1) % starCount].y)//連接到下一個(gè)外圓角的端點(diǎn)
}
if (index == starCount - 1) {
path.close()
}
}
translate(size.width / 2, size.height / 2) {
drawPath(path, color, style = if (checked) Fill else Stroke(width = 5f))
}
}
}
最終實(shí)現(xiàn)效果
原文鏈接:https://blog.csdn.net/ymeddmn/article/details/124211249
相關(guān)推薦
- 2022-11-16 anaconda打開(kāi)閃退的解決過(guò)程_python
- 2024-02-29 UNI-APP項(xiàng)目在引用官方提供的Uni-App-Demo實(shí)例中的組件時(shí)應(yīng)該注意的問(wèn)題
- 2022-08-10 python數(shù)組中的?k-diff?數(shù)對(duì)例題解析_python
- 2022-03-28 Python實(shí)現(xiàn)網(wǎng)頁(yè)文件轉(zhuǎn)PDF文件和PNG圖片的示例代碼_python
- 2022-03-30 用C語(yǔ)言畫(huà)一個(gè)圓_C 語(yǔ)言
- 2023-05-07 Python?Matplotlib中使用plt.savefig存儲(chǔ)圖片的方法舉例_python
- 2022-06-02 C/C++編程中const的使用詳解_C 語(yǔ)言
- 2022-10-04 C語(yǔ)言指針和數(shù)組深入探究使用方法_C 語(yǔ)言
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細(xì)win安裝深度學(xué)習(xí)環(huán)境2025年最新版(
- Linux 中運(yùn)行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲(chǔ)小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運(yùn)算符,流程控制 Flo
- 1. Int 和Integer 的區(qū)別,Jav
- spring @retryable不生效的一種
- Spring Security之認(rèn)證信息的處理
- Spring Security之認(rèn)證過(guò)濾器
- Spring Security概述快速入門(mén)
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯(cuò)誤:Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實(shí)現(xiàn)加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡(jiǎn)單動(dòng)態(tài)字符串(SD
- arthas操作spring被代理目標(biāo)對(duì)象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊(duì)列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠(yuǎn)程分支