用 Compose 畫個小老虎恭賀新春

效果圖

大傢不要誤會,效果圖不是上面的圖。。。上面的圖太復雜瞭,我畫的老虎可沒有這麼好看😂。。

哈哈哈,是不太好看哈。。不要在意那些細節,這不重要!重要的是迎接 2022 年虎年的那顆炙熱且純真的心,還加瞭點動畫,當點擊老虎的頭的時候會動。。。

在這裡先祝大傢在虎年虎虎生威,每天都能虎虎大睡!

思路

本來想畫一個好看的老虎,但真的動手的時候就有點不知所措瞭,本來想的一層一層放圖片,就有點 PS 那意思瞭,那樣效果確實比這個好,但是誠意和這個一筆一筆畫的就不一樣瞭。

後來決定通過 Path 來進行繪制,因為 Compose 中的 Path 在之前的項目中使用的較少,那就來吧,跟著我一步一步來畫這個醜老虎吧。

開始擼碼 畫腦袋

先來畫老虎腦袋吧,說好聽點叫老虎腦袋,說不好聽點那就是個圓。。。

val size = this.sizeval path = Path()path.moveTo(size.width / 2, bigSize)val start = size.width / 6​// 畫圓path.addOval(Rect(start, 300f, start * 5, 300 + start * 5 - start))path.close()​drawPath(path = path, color = Color.Yellow,         style = Stroke(width = 10f))

Path 直接通過 addOval 就可以畫一個圓,然後計算出圓的位置就行,下面來看下效果吧:

畫頭上的王字

腦袋畫完瞭,接下來畫一下老虎頭上的王字,這是老虎的標志啊!

// 寫頭上的王字path.addRect(Rect(start * 3 - 40f, 300f + 60f, start * 3 + 40f, 300f + 65f))path.addRect(Rect(start * 3 - 50f, 300f + 85f, start * 3 + 50f, 300f + 90f))path.addRect(Rect(start * 3 - 35f, 300f + 110f, start * 3 + 35f, 300f + 115f))path.addRect(Rect(start * 3 - 2.5f, 300f + 60f, start * 3 + 2.5f, 300f + 115f))

addRect 是為 Path 添加矩形,當讓直接通過 drawLine 也可以實現,不過既然用 Path 瞭,就都用它吧,再來看下效果:

怎麼樣,是不是有點意思瞭😂!

畫眉毛和眼睛

腦袋和王字都畫好瞭,下面來畫眉毛和眼睛吧,眉毛也可以用矩形代替,眼睛還用圓來代替就行:

// 畫眉毛path.addRect(Rect(start * 1.5f + 50, bigSize + 200f, start * 1.5f + 130f, bigSize + 205f))path.addRect(Rect(start * 3.5f + 50, bigSize + 200f, start * 3.5f + 130f, bigSize + 205f))​// 畫眼睛path.addOval(    Rect(        start * 1.5f + 50,        550f,        start * 1.5f + 130f,        550 + start * 1.5f + 130f - (start * 1.5f + 50)    ))path.addOval(    Rect(        start * 3.5f + 50,        550f,        start * 3.5f + 130f,        550 + start * 3.5f + 130f - (start * 3.5f + 50)    ))

各位,請上眼:

畫鼻子和嘴

眼睛也有瞭,鼻子和嘴還沒畫,簡單點,鼻子也用矩形代替,嘴用橢圓代替吧:

// 畫鼻子path.addRect(    Rect(        start * 3 - 40f,        680f,        start * 3 + 40f,        680f + start * 3 + 40f - (start * 3 - 40f)    ))​// 畫嘴path.addOval(    Rect(        start * 3 - 100f,        850f,        start * 3 + 100f,        850f + start * 3 + 40f - (start * 3 - 40f)    ))

接下來再來看看效果吧:

畫胡須

上面的圖眼睛、鼻子、嘴都有瞭,連腦袋上的王字都畫瞭,怎麼感覺不像老虎呢???對瞭,老虎有胡須啊,也可以通過矩形來代替:

// 畫胡須path.addRect(    Rect(start - 70f, 680f, start + 70f, 685f))path.addRect(    Rect(start - 100f, 725f, start + 100f, 730f))path.addRect(    Rect(start - 80f, 770f, start + 80f, 775f))path.addRect(    Rect(start * 5 - 70f, 680f, start * 5 + 70f, 685f))path.addRect(    Rect(start * 5 - 100f, 725f, start * 5 + 100f, 730f))path.addRect(    Rect(start * 5 - 80f, 770f, start * 5 + 80f, 775f))

誒,沒錯,左右一邊三根,各位,請上眼:

畫耳朵

怎麼還是感覺不對呢???少瞭什麼東西???

對啊!耳朵呢?五官還沒有湊齊呢!

// 畫耳朵path.addOval(    Rect(        start * 1.2f,        bigSize - 50f,        start * 2.2f,        bigSize - 50f + start    ))path.addOval(    Rect(        start * 3.8f,        bigSize - 50f,        start * 4.8f,        bigSize - 50f + start    ))

耳朵也可以用圓來代替嘛,很簡單,現在再來看下:

哈哈哈,有那味瞭吧!!!

寫祝福語

老虎畫完瞭,該加上祝福語瞭!

Column(    modifier = Modifier        .fillMaxSize(),    horizontalAlignment = Alignment.CenterHorizontally,) {    Text(text = "恭喜", fontSize = 150.sp, color = Color.Yellow, fontFamily = FontFamily.Serif)    Text(text = "發財", fontSize = 150.sp, color = Color.Yellow, fontFamily = FontFamily.Serif)}

下面再加上老虎,再考慮下橫豎屏的切換:

@Composablefun NewYearWidget() {    val isLand = LocalConfiguration.current.orientation == Configuration.ORIENTATION_LANDSCAPE    if (!isLand) {        Column(            modifier = Modifier                .fillMaxSize()                .background(color = Color.Red),            horizontalAlignment = Alignment.CenterHorizontally,        ) {            TigerWidget()            TextWidget()        }    } else {        Row(            modifier = Modifier                .fillMaxSize()                .background(color = Color.Red),            verticalAlignment = Alignment.CenterVertically,        ) {            TigerWidget()            TextWidget()        }    }}

讓老虎動起來

隻畫個老虎頭吧,身子就先不畫瞭,現在想想辦法讓它動起來。那就當點擊老虎頭的時候動一下吧。

var isBig by remember { mutableStateOf(true) }val bigSize by animateFloatAsState(    if (isBig) 300f else 150f,    animationSpec = spring(Spring.StiffnessVeryLow))Canvas(    modifier = Modifier        .size(360.dp)        .background(color = Color.Red)        .clickable {            isBig = !isBig        })

很簡單,將剛才設置高度的值修改下,轉為動畫的 State,大傢都知道,Compose 中的 UI 是數據驅動刷新的,直接設置上就可以瞭。

到這裡就畫完瞭,是不是很簡單,哈哈哈,當點擊老虎頭的時候就會像上面的效果圖那樣伸縮。

總結

因為今年是虎年,所以想畫個小老虎,但是最後把自己都給醜哭瞭。。。但是意思就是那麼個意思。細心的大傢可能都發現瞭,本文中基本沒有直接運行項目,而是通過 Compose 的 Preview 進行預覽的,效果也非常好,大傢都可以試試。

本文所有代碼都在 Github 中,下面是 Github 地址:

https://github.com/zhujiang521/PlayWeather/blob/master/app/src/main/java/com/zj/weather/ui/view/tiger/NewYaerWidget.kt

最後在這裡給大傢拜年瞭!!!

祝大傢:新年快樂!虎年萬事如意!

本文來自網絡,不代表程式碼花園立場,如有侵權,請聯系管理員。https://www.codegarden.cn/article/5478/
返回顶部