Вырезать изображение в Jetpack Compose

Установка ширины - правильный подход, вам просто нужно правильно alignment Я думаю - используйте alignment = Alignment.CenterStart, чтобы увидеть начало вашего изображения, а не центр, как на вашем втором изображении:

Image(
    modifier = Modifier
        .height(142.dp)
        .width(58.dp)
        .padding(start = 20.dp, bottom = 20.dp)
        .rotate(TiltedImageRotation)
    painter = resourcePainter(R.drawable.image),
    contentScale = ContentScale.FillHeight,
    alignment = Alignment.CenterStart,
    contentDescription = null,
)

Если вы хотите выровнять с некоторым смещением, как предложено в другом ответе, это можно сделать и с помощью Alignment и проще:

val density = LocalDensity.current
Image(
    alignment = Alignment { _, _, _ ->
        val xOffset = density.run { 58.dp.toPx() / 2 }.roundToInt()
        IntOffset(x = -xOffset, 0)
    }
)

Отсечение не изменяет размеры составного объекта, а изменяет то, какая часть составного объекта рисуется. Без clip или clipToBounds вы можете рисовать что угодно из Composable с помощью модификаторов рисования, даже если размер Composable равен нулю.

Как в примере ниже с фигурой размером 200 пикселей.

 val shape = GenericShape { size: Size, layoutDirection: LayoutDirection ->
     addRect(Rect(0f, 0f, 200f, 200f))
 }

мы ограничиваем область рисования только до 200 пикселей, в то время как поле с изображением во фрагменте ниже покрывает 200.dp, но не 200 пикселей. 200.dp — это 200px * плотность устройства.

Row(modifier = Modifier.border(2.dp, Color.Blue)) {
     Box(
         modifier = Modifier
             .clip(shape)
             .clickable {

             }
             .size(100.dp)
             .background(Color.Green)
     ) {
         Image(
             modifier = Modifier.size(100.dp),
             painter = painterResource(id = R.drawable.landscape1),
             contentScale = ContentScale.FillBounds,
             contentDescription = null
         )
     }

     Box(
         modifier = Modifier
             .size(100.dp)
             .background(Color.Yellow)
     )
 }

Ограничение рисования размером при рисовании только части может быть достигнуто в любом случае, нет идеального или ключа к этому.

Вы можете сделать это, используя Modifier.layout{}, измерив полный размер Placeable, поместив его с размером для обрезки, например

modifier = Modifier
    .clipToBounds()
    .layout { measurable, constraints ->
        val width = (58 * density).toInt()

        val placeable = measurable.measure(
            constraints
        )

        layout(width, placeable.height) {
            placeable.place(0, 0)
        }
    }

И поскольку мы вырезаем область за пределы ширины макета, у нас есть только 58.dp компонуемых, которые рисуют из (0,0) в желаемую позицию.

Если вы измеряете составной объект шириной, указанной выше, вам также необходимо изменить выравнивание = Alignment.TopCenter, поскольку изображение использует Alignment.Center по умолчанию. Добавление выравнивания ко второму изображению решит проблему.

Image(
    modifier = Modifier.height(142.dp),
    painter = painterResource(R.drawable.landscape1),
    contentScale = ContentScale.FillHeight,
    contentDescription = null,
)

Row(
    modifier = Modifier.border(2.dp, Color.Green)
) {
    Image(
        modifier = Modifier
            .layout { measurable, constraints ->
                val width = (58 * density).toInt()

                val placeable = measurable.measure(
                    constraints.copy(
                        minWidth = width,
                        maxWidth = width
                    )
                )

                layout(placeable.width, placeable.height) {
                    placeable.place(0, 0)
                }
            }
            .height(142.dp),
        painter = painterResource(R.drawable.landscape1),
        contentScale = ContentScale.FillHeight,
        contentDescription = null,
    )
    Text(text = "Some Text After Image")
}

Row(
    modifier = Modifier.border(2.dp, Color.Blue)
) {
    Image(
        modifier = Modifier
            .clipToBounds()
            .layout { measurable, constraints ->
                val width = (58 * density).toInt()

                val placeable = measurable.measure(
                    constraints
                )

                layout(width, placeable.height) {
                    placeable.place(0, 0)
                }
            }
            .height(142.dp),
        painter = painterResource(R.drawable.landscape1),
        contentScale = ContentScale.FillHeight,
        contentDescription = null,
    )
    Text(text = "Some Text After Image")
}

Вы также можете использовать Canvas или Modifier.drawBehind для достижения того же результата. Следует учитывать, что мы обрезаем прямоугольник желаемого размера при рисовании внутренней ширины, которая является шириной фактического Painter или Bitmap, в то время как мы получаем высоту из Composable.

val painter = painterResource (R.drawable.landscape1)

Row(
    modifier = Modifier.border(2.dp, Color.Yellow)
) {
    Box(
        modifier = Modifier
            .width(58.dp)
            .drawBehind {
                clipRect(
                    left = 0f,
                    right = width
                ) {

                    with(painter) {
                        draw(size = Size(painter.intrinsicSize.width, size.height))
                    }
                }
            }
            .height(142.dp),
    )
    Text(text = "Some Text After Image")