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.StrokeCap
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
)
}
){ lineWidth ->
pathData.value = pathData.value.copy(
lineWidth = lineWidth
)
}
}
}
}
}
}
@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(
pathData.lineWidth,
cap = StrokeCap.Square
)
)
}
Log.d("MyLog", "Size: ${pathList.size}")
}
}
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,
val lineWidth: Float = 5f
)
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.material3.Slider
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
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, onLineWidthChange: (Float) -> Unit) {
Column(
modifier = Modifier
.fillMaxWidth()
.background(Color.LightGray),
horizontalAlignment = Alignment.CenterHorizontally
) {
ColorList{ color ->
onClick(color)
}
CustomSlider{ lineWidth ->
onLineWidthChange(lineWidth)
}
}
}
@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)
)
}
}
}
@Composable
fun CustomSlider(onChange: (Float) -> Unit){
var position by remember {
mutableStateOf(0.05f)
}
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Text("Line width: ${(position * 100).toInt()}")
Slider(
value = position,
onValueChange = {
val tempPos = if (it > 0) it else 0.01f
position = tempPos
onChange(tempPos * 100)
}
)
}
}