Özel boyacı

Compose'da, çizilebilen bir öğeyi temsil etmek (Android'de tanımlanan Drawable API'lerinin yerine) ve bunu kullanan ilgili kompozisyonun ölçümünü ve düzenini etkilemek için bir Painter nesnesi kullanılır. CEVAP BitmapPainter, ekranda Bitmap çizebilecek bir ImageBitmap alır.

Çoğu kullanım durumu için yukarıdaki painterResource() kullanıldığında doğru öğenin boyacısı (ör. BitmapPainter veya VectorPainter). Daha fazla arasındaki farklarla ilgili bilgi için ImageBitmap ve ImageVector bölümünü okuyun.

Painter, kendisine verilen sınırlar içinde çizilen ve bileşenin ölçümü veya düzeni üzerinde hiçbir etkisi olmayan DrawModifier'ten farklıdır.

Özel bir boyayıcı oluşturmak için Painter sınıfını genişletin ve özel grafikler çizmek üzere DrawScope erişimine izin veren onDraw yöntemini uygulayın. Ayrıca, kullanılacak intrinsicSize politikasını geçersiz kılabilirsiniz. içinde bulunduğu Besteable'ı etkiler:

class OverlayImagePainter constructor(
    private val image: ImageBitmap,
    private val imageOverlay: ImageBitmap,
    private val srcOffset: IntOffset = IntOffset.Zero,
    private val srcSize: IntSize = IntSize(image.width, image.height),
    private val overlaySize: IntSize = IntSize(imageOverlay.width, imageOverlay.height)
) : Painter() {

    private val size: IntSize = validateSize(srcOffset, srcSize)
    override fun DrawScope.onDraw() {
        // draw the first image without any blend mode
        drawImage(
            image,
            srcOffset,
            srcSize,
            dstSize = IntSize(
                [e-mail](),
                [e-mail]()
            )
        )
        // draw the second image with an Overlay blend mode to blend the two together
        drawImage(
            imageOverlay,
            srcOffset,
            overlaySize,
            dstSize = IntSize(
                [e-mail](),
                [e-mail]()
            ),
            blendMode = BlendMode.Overlay
        )
    }

    /**
     * Return the dimension of the underlying [ImageBitmap] as it's intrinsic width and height
     */
    override val intrinsicSize: Size get() = size.toSize()

    private fun validateSize(srcOffset: IntOffset, srcSize: IntSize): IntSize {
        require(
            srcOffset.x >= 0 &&
                srcOffset.y >= 0 &&
                srcSize.width >= 0 &&
                srcSize.height >= 0 &&
                srcSize.width <= image.width &&
                srcSize.height <= image.height
        )
        return srcSize
    }
}
CustomPainterSnippets.kt

Artık özel Painter alanımıza sahip olduğumuza göre kaynak resim şu şekildedir:

val rainbowImage = ImageBitmap.imageResource(id = R.drawable.rainbow)
val dogImage = ImageBitmap.imageResource(id = R.drawable.dog)
val customPainter = remember {
    OverlayImagePainter(dogImage, rainbowImage)
}
Image(
    painter = customPainter,
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier.wrapContentSize()
)
CustomPainterSnippets.kt

İki resmi özel bir boya fırçasıyla birleştirmenin sonucunu aşağıda görebilirsiniz:

Şekil 1: İki görüntüyü birbirinin üzerine çıkaran Özel Boyacı

Özel bir boya ustası Modifier.paint(customPainter) ile de kullanılabilir. bir composable'a çizmek için aşağıdaki adımları uygulayın:

val rainbowImage = ImageBitmap.imageResource(id = R.drawable.rainbow)
val dogImage = ImageBitmap.imageResource(id = R.drawable.dog)
val customPainter = remember {
    OverlayImagePainter(dogImage, rainbowImage)
}
Box(
    modifier =
    Modifier.background(color = Color.Gray)
        .padding(30.dp)
        .background(color = Color.Yellow)
        .paint(customPainter)
) { /** intentionally empty **/ }
CustomPainterSnippets.kt

Not: Yukarıdaki özel Painter, DrawModifier kullanılarak da uygulanabilir. Ölçümü veya düzeni etkilemeniz gerekiyorsa Painter kullanmanız gerekir. Oluşturma işlemini yalnızca size verilen sınırlar içinde bekliyorsanız bunun yerine bir DrawModifier kullanın.