API de Canvas en Android Jetpack Compose

Jetpack Compose es un conjunto de herramientas de interfaz de usuario moderno que está diseñado para simplificar el desarrollo de la interfaz de usuario en Android. Consiste en un modelo de programación reactivo con la concisión y facilidad del lenguaje de programación Kotlin. Es completamente declarativo para que pueda describir su interfaz de usuario llamando a una serie de funciones que transformarán sus datos en una jerarquía de interfaz de usuario. Cuando los datos cambian o se actualizan, el marco recuerda automáticamente estas funciones y actualiza la vista por usted. A veces, una aplicación necesita dibujar algunos gráficos personalizados en la pantalla y tener un control preciso sobre lo que se ha dibujado en la pantalla. En este artículo, aprenderemos los conceptos básicos de Canvas API en jetpack compose e intentaremos crear un logotipo de GeeksforGeeks usando canvas API. A continuación se muestra la imagen de cómo se verá finalmente,

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en la versión Canary de Android Studio, consulte Cómo crear un nuevo proyecto en la versión Canary de Android Studio con Jetpack Compose .

Paso 2: trabajar con el archivo MainActivity.kt

Vaya a la aplicación > java > el nombre del paquete de su aplicación y abra el archivo MainActivity.kt.

@Composable
fun Icon(modifier: Modifier = Modifier) {
    Canvas(modifier = modifier.size(100.dp), onDraw = {
    
        val canvasWidth = size.width
        val canvasHeight = size.height
  
        // we first draw the arc which
        // will be the curve of the logo
        drawArc(
            color = Color.White,
            // arc starts at 0 degree and ends
            startAngle = 0f,
            // set use center to false to draw the
            // arc without centered line
            // Tip: use center to true to draw the arc
            // with centered line and see the difference
            useCenter = false,
            // set the end angle of the arc
            sweepAngle = 300f,
            // set the width of the arc and 
            // how the arc cap will be drawn
            // cap = StrokeCap.Round will draw 
            // the arc with rounded end
            style = Stroke(width = 40f, cap = StrokeCap.Square)
        )
   
    })
  
}

Si llama a este componible desde setContent, verá algo como esto.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
              // CanvasApiTheme is Auto generated theme,
              // It will be appnameTheme in your case
            CanvasAPITheme {
                Icon()
            }
        }
    }
}

Ahora necesitamos agregar una línea en el centro. Usaremos la función drawLine en el alcance del lienzo. Agregue este código debajo del arco para que esté encima del arco.

Nota: El orden en que se escriben las formas en el ámbito del lienzo es el orden en que se colocarán unas sobre otras.

// draw the center line of the logo
drawLine(            
            color = Color.White,
            // set the start point of the 
            // line to the center of the canvas
            start = Offset(x = 0f, y = canvasHeight / 2),
            // set the end point of the 
            // line to the center of the canvas
            end = Offset(x = canvasWidth, y = canvasHeight / 2),
            // set the width of the line
            strokeWidth = 40f
        )

Ahora, si ejecuta la aplicación, verá una G completa como esta.

Nuestro único lado del logotipo está completo, solo necesitamos colocar dos íconos componibles en una fila de modo que uno sea la imagen especular del otro. MainActivity ahora se verá así. Consulte los comentarios para una mejor comprensión.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CanvasAPITheme {
                // Create a box to and set contentAlignment
                // to Center to  center the Icon
                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .background(Color(0xFF308D46)),
  
                    contentAlignment = Alignment.Center
                ) {
  
                    // Create a row
                    Row {
  
                        // Place one Icon in the row but 
                        // rotate Y Axis by -180 degree
                        // it will look like mirror image
                        Icon(Modifier.graphicsLayer(rotationY = -180f))
                          
                        // set some space between the icons
                        Spacer(modifier = Modifier.width(20.dp))
  
                        // Original Icon without rotation
                        Icon()
  
                    }
                }
            }
        }
    }
}

Ahora ejecute la aplicación para ver el resultado final.

Producción:

En este artículo, usamos Arco y Línea. Canvas también ofrece la opción de dibujar otras formas como

• drawRect para dibujar un rectángulo.
• drawImage para dibujar el mapa de bits.
• drawRoundRect para dibujar un rectángulo redondeado.
• drawCircle para dibujar un círculo.
• drawOval por oval.
• drawPath para la ruta de dibujo.
• drawPoints para dibujar puntos dados en el argumento.