Let's draw Rect, Oval, Triangles...

compose-canvas.kt

package com.jshme.myapplication

import android.graphics.Paint
import android.graphics.Typeface
import android.media.tv.TvContract
import android.os.Bundle
import android.util.Log
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.RepeatMode
import androidx.compose.animation.core.tween
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.*
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.jshme.myapplication.ui.theme.MyApplicationTheme
import java.util.*
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Alignment
import androidx.compose.ui.geometry.CornerRadius
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.drawscope.rotate
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.TextFieldValue
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.async
import kotlinx.coroutines.coroutineScope
import kotlin.random.Random

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    SemiCircleProgressBar(0f)
                }
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MyApplicationTheme {
        val randomValueState = remember { mutableStateOf(0) }
        Column {
            SemiRoundSeekBar(randomValueState.value.toFloat())
            RandomDegreeButton {
                randomValueState.value = it
            }
        }
    }
}

// 반원형 곡선의 프로그래스 바
@Composable
fun SemiCircleProgressBar(randomValue: Float) {
    val animatedValue = remember { Animatable(0f) }
    var percent: Float = randomValue

    LaunchedEffect(animatedValue) {
         animatedValue.animateTo(
             targetValue = 1f,
             animationSpec = tween(durationMillis = 1000, easing = LinearEasing),
         )
    percent = randomValue * animatedValue.value
    }

    val scoreTextPaint = Paint().apply {
        textAlign = Paint.Align.CENTER
        textSize = 50f
        color = Color.Gray.toArgb()
    }

    Column {
        Box(
            modifier = Modifier.size(400.dp, 200.dp)
        ) {
            Canvas(modifier = Modifier
                .size(400.dp)
                .padding(16.dp)
            ) {
                drawArc(
                    color = Color.LightGray,
                    startAngle = 180f,
                    sweepAngle = 180f,
                    useCenter = false,
                    topLeft = Offset(30f, 10f),
                    size = Size(900.dp.value, 900.dp.value),
                    style = Stroke(width = 40f, cap = StrokeCap.Round)
                )

                drawArc(
                    color = Color.Green,
                    startAngle = 180f,
                    sweepAngle = percent,
                    useCenter = false,
                    topLeft = Offset(30f, 10f),
                    size = Size(900.dp.value, 900.dp.value),
                    style = Stroke(width = 40f, cap = StrokeCap.Round)
                )

                drawContext.canvas.nativeCanvas.drawText(percent.toString(), center.x, 200f, scoreTextPaint)
            }
        }
    }
}

@Composable
fun RandomDegreeButton(onClick: (Int) -> Unit) {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Center
    ) {
        OutlinedButton(
            onClick = {
                onClick(Random.nextInt(0, 180))
            }) {
            Text(
                text = "RandomValue"
            )
        }
    }
}

@Preview(showBackground = true)
@Composable
fun BanksaladLogoPreview() {
    MyApplicationTheme {
        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            BanksaladLogo()
        }
    }
}

// Banksalad Logo
@Composable
fun BanksaladLogo() {
    Canvas(
        modifier = Modifier
            .size(100.dp)
            .padding(16.dp)
    ) {
        drawCircle(
            color = Color(0xFF0091F2),
            radius = 30f,
            center = Offset(size.width * .25f, size.height * 0.05f),
        )

        rotate(degrees = 45F) {
            drawRoundRect(
                color = Color(0XFF00C3C3),
                size = Size(50f, 50f),
                topLeft = Offset(x = size.width * .25f, y = size.height * 0.05f),
                cornerRadius = CornerRadius(2f, 2f)
            )
        }

        drawPath(
            // draw for triangle
            path = Path().apply {
                moveTo(size.width * .35f, size.height * .25f)
                lineTo(size.width * .28f, size.height * 0.58f)
                lineTo(size.width * .60f, size.height * 0.50f)
                close()
            },
            color = Color(0xFFE97BBC),
        )

        drawArc(
            color = Color(0XFF00C379),
            startAngle = 360f,
            sweepAngle = 180f,
            useCenter = false,
            size = Size(size.width - 10f, size.height - 10f),
            style = Stroke(width = 45f, cap = StrokeCap.Square)
        )
    }
}

@Preview(showBackground = true)
@Composable
fun KakaoTalkLogoPreview() {
    MyApplicationTheme {
        KakaoTalkLogo()
    }
}

// KakaoTalk Logo
@Composable
fun KakaoTalkLogo() {
    Canvas(
        modifier = Modifier
            .size(100.dp)
            .background(Color.Yellow)
            .padding(16.dp)
    ) {
        val trianglePath = Path().let {
            it.moveTo(this.size.width * .25f, this.size.height * .70f)
            it.lineTo(this.size.width * .20f, this.size.height * 0.95f)
            it.lineTo(this.size.width * .45f, this.size.height * 0.80f)
            it.close()
            it
        }

        drawOval(
            color = Color(0XFF46292A),
            size = Size(this.size.width, this.size.height * 0.80f)
        )

        drawPath(
            path = trianglePath,
            color = Color(0XFF46292A)
        )

        val paint = Paint().apply {
            textAlign = Paint.Align.CENTER
            textSize = 60f
            color = Color.Yellow.toArgb()
        }
        drawContext.canvas.nativeCanvas.drawText("TALK", center.x, center.y, paint)

    }
}