MainActivity.kt
import android.os.Bundle
import android.util.Log
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.gestures.detectDragGestures
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.input.pointer.pointerInput
import com.neco_desarrollo.drawapp.ui.BottomPanel
import com.neco_desarrollo.drawapp.ui.PathData
import com.neco_desarrollo.drawapp.ui.theme.DrawAppTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
val pathData = remember {
mutableStateOf(PathData())
}
DrawAppTheme {
Column {
DrawCanvas(pathData)
BottomPanel{ color ->
pathData.value = pathData.value.copy(
color = color
)
}
}
}
}
}
}
@Composable
fun DrawCanvas(pathData: MutableState<PathData>) {
var tempPath = Path()
val pathList = remember {
mutableStateListOf(PathData())
}
Canvas(
modifier = Modifier
.fillMaxWidth()
.fillMaxHeight(0.75f)
.pointerInput(true) {
detectDragGestures(
onDragStart = {
tempPath = Path()
},
onDragEnd = {
pathList.add(
pathData.value.copy(
path = tempPath
)
)
}
) { change, dragAmount ->
tempPath.moveTo(
change.position.x - dragAmount.x,
change.position.y - dragAmount.y
)
tempPath.lineTo(
change.position.x,
change.position.y
)
if(pathList.size > 0){
pathList.removeAt(pathList.size - 1)
}
pathList.add(
pathData.value.copy(
path = tempPath
)
)
}
}
){
pathList.forEach { pathData ->
drawPath(
pathData.path,
color = pathData.color,
style = Stroke(5f)
)
}
Log.d("MyLog", "Size: ${pathList.size}")
}
}
BottomPanel.kt
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
@Composable
fun BottomPanel(onClick: (Color) -> Unit) {
Column(
modifier = Modifier.fillMaxWidth()
.background(Color.LightGray),
horizontalAlignment = Alignment.CenterHorizontally
) {
ColorList(){ color ->
onClick(color)
}
}
}
@Composable
fun ColorList(onClick: (Color) -> Unit) {
val colors = listOf(
Color.Blue,
Color.Red,
Color.Black,
Color.Magenta,
Color.Yellow,
Color.Green,
)
LazyRow(
modifier = Modifier.padding(10.dp)
) {
items(colors) { color ->
Box(
modifier = Modifier
.padding(end = 10.dp)
.clickable {
onClick(color)
}
.size(40.dp)
.background(color, CircleShape)
)
}
}
}
PathData.kt
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Path
data class PathData(
val path: Path = Path(),
val color: Color = Color.Blue
)