0
715
Vistas¿Cómo dibujar polígonos de esquinas redondeadas en Jetpack Compose Canvas?
Estoy tratando de crear un triángulo redondeado usando Canvas en Jetpack Compose.
Intento este código para dibujar un triángulo:
@Composable fun RoundedTriangle() { Canvas(modifier = Modifier.size(500.dp)) { val trianglePath = Path().apply { val height = size.height val width = size.width moveTo(width / 2.0f, 0f) lineTo(width, height) lineTo(0f, height) } drawPath(trianglePath, color = Color.Blue) } } Pero no sé cómo redondear las esquinas del triángulo. También traté de usar arcTo , pero no pude obtener un resultado adecuado.
¿Cómo puedo dibujar algo como la figura de abajo?
2 Respuestas
Responde la pregunta0
Para Stroke puede especificar un redondeo como este:
drawPath( ... style = Stroke( width = 2.dp.toPx(), pathEffect = PathEffect.cornerPathEffect(4.dp.toPx()) ) ) Sin embargo, Fill parece falta de redondeo de apoyo. He creado una solicitud de función , márcala con una estrella.
Pero Canvas tiene la función drawOutline , que acepta tanto el Outline , que puede envolver una Path , como la Paint , para la cual puede especificar el efecto de pathEffect :
Canvas(modifier = Modifier.fillMaxWidth().aspectRatio(1f)) { val rect = Rect(Offset.Zero, size) val trianglePath = Path().apply { moveTo(rect.topCenter) lineTo(rect.bottomRight) lineTo(rect.bottomLeft) close() } drawIntoCanvas { canvas -> canvas.drawOutline( outline = Outline.Generic(trianglePath), paint = Paint().apply { color = Color.Black pathEffect = PathEffect.cornerPathEffect(rect.maxDimension / 3) } ) } } Asistentes de Path :
fun Path.moveTo(offset: Offset) = moveTo(offset.x, offset.y) fun Path.lineTo(offset: Offset) = lineTo(offset.x, offset.y)Resultado:
0
Basado en la respuesta de @ philip-dukhov, si alguien está interesado en aplicar esto a un cuadrado
@Composable fun SquirclePath( modifier: Modifier, smoothingFactor: Int = 60, color: Color, strokeWidth: Float, ) { Canvas( modifier = modifier ) { val rect = Rect(Offset.Zero, size) val percent = smoothingFactor.percentOf(rect.minDimension) val squirclePath = Path().apply { with(rect) { lineTo(topRight) lineTo(bottomRight) lineTo(bottomLeft) lineTo(topLeft) // this is where the path is finally linked together close() } } drawIntoCanvas { canvas -> canvas.drawOutline( outline = Outline.Generic(squirclePath), paint = Paint().apply { this.color = color this.style = PaintingStyle.Fill this.strokeWidth = strokeWidth pathEffect = PathEffect.cornerPathEffect(percent) } ) } } } fun Int.percentOf(target:Float) = (this.toFloat() / 100) * target