Промежуток между двумя рисунками в Jetpack compose Canvas

Question

Я пытаюсь сделать прямоугольник и дугу, прикрепленную к основанию прямоугольника. Я использовал размер, предоставляемый drawScope, для размещения рисунков на экране, но я не могу понять, почему между двумя рисунками существует ненужный промежуток, даже если указанный параметр дуги topLeft равен высоте нарисованного прямоугольника.

      Canvas(
        modifier = Modifier.fillMaxWidth()
            .height(200.dp)
    ){

        drawRect(
            color = Color(0xFFEF3125),
            topLeft = Offset(0f, 0f),
            size = Size(this.size.width, this.size.height.times(0.75f))
        )

        drawArc(
            color = Color(0xFFEF3125),
            startAngle = 0f,
            sweepAngle = 180f,
            useCenter = false,
            topLeft = Offset(
                0f, this.size.height.times(0.75f)
            )
        )
    }

Answer 1

Существует зазор, потому что когда вы рисуете дугу, вы используете прямоугольник в качестве ссылки, но вы рисуете дугу до половины этого прямоугольника, поэтому вам нужно сместиться вверх на половину высоты прямоугольника, в который вы рисуете дугу.

      @Composable
private fun ArcSample() {
    Canvas(
        modifier = Modifier.fillMaxWidth()
            .height(200.dp)
    ){

        drawRect(
            color = Color(0xFFEF3125),
            size = Size(this.size.width, this.size.height.times(0.75f)),
            style = Stroke(4.dp.toPx())
        )


        drawArc(
            color = Color(0xFFEF3125),
            startAngle = 0f,
            sweepAngle = 180f,
            useCenter = false,
            size = Size(size.width, size.height.times(.25f)),
            topLeft = Offset(
                0f, this.size.height.times(0.625f)
            ),
            style = Stroke(4.dp.toPx())
        )
    }
}

Я использовал стиль Stroke, чтобы показать границы, это для демонстрации.

      @Composable
private fun ArcSample2() {
    Canvas(
        modifier = Modifier.fillMaxWidth()
            .height(200.dp)
    ){

        drawRect(
            color = Color(0xFFEF3125),
            size = Size(this.size.width, this.size.height.times(0.75f))
        )


        val sizeCoefficient = 0.25f

        drawArc(
            color = Color(0xFFEF3125),
            startAngle = 0f,
            sweepAngle = 360f,
            useCenter = false,
            size = Size(size.width, size.height.times(sizeCoefficient)),
            topLeft = Offset(
                0f, this.size.height.times(0.75f-sizeCoefficient/2f)
            )
        )
    }
}