این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

یک تصویر را سفارشی کنید

تصاویر را می توان با استفاده از ویژگی های موجود در یک Image composable ( contentScale ، colorFilter ) سفارشی کرد. همچنین می توانید Modifiers موجود را برای اعمال جلوه های مختلف بر روی Image خود اعمال کنید. اصلاح‌کننده‌ها را می‌توان در هر Composable استفاده کرد، نه فقط Image composable، در حالی که contentScale و colorFilter پارامترهای صریح در Image composable هستند.

مقیاس محتوا

یک گزینه contentScale را برای برش یا تغییر نحوه مقیاس بندی یک تصویر در محدوده آن مشخص کنید. به طور پیش فرض، اگر گزینه contentScale را مشخص نکنید، ContentScale.Fit استفاده خواهد شد.

در مثال زیر، Image composable به اندازه 150dp با حاشیه محدود شده است و پس‌زمینه روی Image composable روی زرد تنظیم شده است تا گزینه‌های ContentScale مختلف را در جدول زیر نشان دهد.

val imageModifier = Modifier
    .size(150.dp)
    .border(BorderStroke(1.dp, Color.Black))
    .background(Color.Yellow)
Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Fit,
    modifier = imageModifier
)CustomizeImageSnippets.kt

تنظیم گزینه های مختلف ContentScale منجر به خروجی های متفاوتی می شود. در زیر جدولی وجود دارد که می تواند به انتخاب حالت ContentScale صحیح مورد نیاز شما کمک کند:

تصویر منبع
`ContentScale`	نتیجه - تصویر پرتره:	نتیجه - تصویر منظره:
`ContentScale.Fit` : با حفظ نسبت تصویر (پیش‌فرض) تصویر را به طور یکنواخت مقیاس دهید. اگر محتوا کوچک‌تر از اندازه باشد، تصویر برای تناسب با محدوده‌ها، بزرگ‌تر می‌شود.
`ContentScale.Crop` : تصویر را در فضای موجود وسط برش دهید.
`ContentScale.FillHeight` : منبع را با حفظ نسبت تصویر مقیاس کنید تا مرزها با ارتفاع مقصد مطابقت داشته باشند.
`ContentScale.FillWidth` : منبع را با حفظ نسبت ابعادی مقیاس دهید تا مرزها با عرض مقصد مطابقت داشته باشند.
`ContentScale.FillBounds` : محتوا را به صورت عمودی و افقی به صورت غیر یکنواخت مقیاس کنید تا محدوده مقصد را پر کنید. (توجه: اگر تصاویر را در محفظه هایی قرار دهید که با نسبت دقیق تصویر مطابقت ندارند، این کار باعث تحریف می شود)
`ContentScale.Inside` : منبع را برای حفظ نسبت تصویر در محدوده مقصد، مقیاس کنید. اگر منبع در هر دو بعد کوچکتر یا مساوی با مقصد باشد، رفتاری مشابه با «هیچ» دارد. محتوا همیشه در محدوده ها قرار می گیرد. اگر محتوا کوچکتر از کران باشد، هیچ مقیاسی اعمال نخواهد شد.	تصویر منبع بزرگتر از کران: تصویر منبع کوچکتر از کران:	تصویر منبع بزرگتر از کران: تصویر منبع کوچکتر از کران:
`ContentScale.None` : هیچ مقیاسی روی منبع اعمال نکنید. اگر محتوا کوچکتر از محدوده مقصد باشد، برای تناسب با منطقه بزرگ نمی شود.	تصویر منبع بزرگتر از کران: تصویر منبع کوچکتر از کران:	تصویر منبع بزرگتر از کران: تصویر منبع کوچکتر از کران:

یک `Image` قابل ترکیب را به یک شکل برش دهید

برای اینکه یک تصویر متناسب با یک شکل باشد، از اصلاح کننده clip داخلی استفاده کنید. برای برش یک تصویر به شکل دایره، از Modifier.clip(CircleShape) استفاده کنید:

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(200.dp)
        .clip(CircleShape)
)CustomizeImageSnippets.kt

شکل گوشه گرد - از Modifier.clip(RoundedCornerShape(16.dp) ) با اندازه گوشه هایی که می خواهید گرد شوند استفاده کنید:

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(200.dp)
        .clip(RoundedCornerShape(16.dp))
)CustomizeImageSnippets.kt

**شکل 2** : برش یک تصویر با RoundedCornerShape

همچنین می توانید با گسترش Shape و ارائه Path برای برش دادن شکل، شکل برش خود را ایجاد کنید:

class SquashedOval : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        val path = Path().apply {
            // We create an Oval that starts at ¼ of the width, and ends at ¾ of the width of the container.
            addOval(
                Rect(
                    left = size.width / 4f,
                    top = 0f,
                    right = size.width * 3 / 4f,
                    bottom = size.height
                )
            )
        }
        return Outline.Generic(path = path)
    }
}

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(200.dp)
        .clip(SquashedOval())
)CustomizeImageSnippets.kt

**شکل 3** : برش یک تصویر با شکل مسیر سفارشی

یک حاشیه به `Image` composable اضافه کنید

یک عملیات رایج ترکیب Modifier.border() با Modifier.clip() برای ایجاد یک حاشیه در اطراف یک تصویر است:

val borderWidth = 4.dp
Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(150.dp)
        .border(
            BorderStroke(borderWidth, Color.Yellow),
            CircleShape
        )
        .padding(borderWidth)
        .clip(CircleShape)
)CustomizeImageSnippets.kt

**شکل 4** : یک تصویر را بریده و یک حاشیه در اطراف آن ایجاد کنید

اگر می‌خواهید یک مرز گرادیان ایجاد کنید، می‌توانید از Brush API برای ترسیم یک مرز گرادیان رنگین کمانی در اطراف تصویر استفاده کنید:

val rainbowColorsBrush = remember {
    Brush.sweepGradient(
        listOf(
            Color(0xFF9575CD),
            Color(0xFFBA68C8),
            Color(0xFFE57373),
            Color(0xFFFFB74D),
            Color(0xFFFFF176),
            Color(0xFFAED581),
            Color(0xFF4DD0E1),
            Color(0xFF9575CD)
        )
    )
}
val borderWidth = 4.dp
Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(150.dp)
        .border(
            BorderStroke(borderWidth, rainbowColorsBrush),
            CircleShape
        )
        .padding(borderWidth)
        .clip(CircleShape)
)CustomizeImageSnippets.kt

حاشیه دایره گرادیان رنگین کمان — **شکل 5** : مرز دایره گرادیان رنگین کمان

یک نسبت ابعاد سفارشی تنظیم کنید

برای تبدیل یک تصویر به یک نسبت ابعاد سفارشی، از Modifier.aspectRatio(16f/9f) استفاده کنید تا نسبت سفارشی برای یک تصویر (یا هر نوع قابل ترکیبی برای آن موضوع) ارائه دهید.

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    modifier = Modifier.aspectRatio(16f / 9f)
)CustomizeImageSnippets.kt

استفاده از Modifier.aspectRatio (16f/9f) در تصویر — **شکل 6** : استفاده از `Modifier.aspectRatio(16f/9f)` در تصویر

فیلتر رنگ - تغییر رنگ پیکسل های تصویر

Image composable دارای یک پارامتر colorFilter است که می تواند خروجی تک تک پیکسل های تصویر شما را تغییر دهد.

رنگ آمیزی یک تصویر

با استفاده از ColorFilter.tint(color, blendMode) یک حالت ترکیبی با رنگ داده شده بر روی Image قابل ترکیب شما اعمال می شود. ColorFilter.tint(color, blendMode) از BlendMode.SrcIn برای رنگ آمیزی محتوا استفاده می کند، به این معنی که رنگ ارائه شده نشان داده می شود، جایی که تصویر روی صفحه نمایش داده می شود. این برای نمادها و وکتورهایی که نیاز به تم های متفاوت دارند مفید است.

Image(
    painter = painterResource(id = R.drawable.baseline_directions_bus_24),
    contentDescription = stringResource(id = R.string.bus_content_description),
    colorFilter = ColorFilter.tint(Color.Yellow)
)CustomizeImageSnippets.kt

ColorFilter.tint با BlendMode.SrcIn اعمال شد — **شکل 7** : ColorFilter.tint با BlendMode.SrcIn اعمال می شود

سایر BlendMode در جلوه های متفاوتی نتیجه می دهند. برای مثال، تنظیم BlendMode.Darken با Color.Green روی یک تصویر نتیجه زیر را ایجاد می کند:

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    colorFilter = ColorFilter.tint(Color.Green, blendMode = BlendMode.Darken)
)CustomizeImageSnippets.kt

رنگ.رنگ سبز با BlendMode.Darken — **شکل 8** : رنگ. رنگ سبز با BlendMode.Darken

برای اطلاعات بیشتر در مورد حالت های ترکیبی مختلف موجود، به مستندات مرجع BlendMode مراجعه کنید.

اعمال فیلتر `Image` با ماتریس رنگ

تصویر خود را با استفاده از گزینه ColorFilter ماتریس رنگ تغییر دهید. به عنوان مثال، برای اعمال یک فیلتر سیاه و سفید بر روی تصاویر خود می توانید از ColorMatrix استفاده کنید و میزان اشباع را روی 0f تنظیم کنید.

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    colorFilter = ColorFilter.colorMatrix(ColorMatrix().apply { setToSaturation(0f) })
)CustomizeImageSnippets.kt

**شکل 9** : ماتریس رنگ با اشباع 0 (تصویر سیاه و سفید)

کنتراست یا روشنایی یک `Image` قابل ترکیب را تنظیم کنید

برای تغییر کنتراست و روشنایی یک تصویر، می توانید از ColorMatrix برای تغییر مقادیر استفاده کنید:

val contrast = 2f // 0f..10f (1 should be default)
val brightness = -180f // -255f..255f (0 should be default)
val colorMatrix = floatArrayOf(
    contrast, 0f, 0f, 0f, brightness,
    0f, contrast, 0f, 0f, brightness,
    0f, 0f, contrast, 0f, brightness,
    0f, 0f, 0f, 1f, 0f
)
Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    colorFilter = ColorFilter.colorMatrix(ColorMatrix(colorMatrix))
)CustomizeImageSnippets.kt

**شکل 10** : تنظیم روشنایی و کنتراست تصویر با استفاده از ColorMatrix

رنگ های یک `Image` قابل ترکیب را معکوس کنید

برای معکوس کردن رنگ های یک تصویر، ColorMatrix را طوری تنظیم کنید که رنگ ها را معکوس کند:

val colorMatrix = floatArrayOf(
    -1f, 0f, 0f, 0f, 255f,
    0f, -1f, 0f, 0f, 255f,
    0f, 0f, -1f, 0f, 255f,
    0f, 0f, 0f, 1f, 0f
)
Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    colorFilter = ColorFilter.colorMatrix(ColorMatrix(colorMatrix))
)CustomizeImageSnippets.kt

تار کردن `Image` قابل ترکیب

برای محو کردن یک تصویر، از Modifier.blur() استفاده کنید، که radiusX و radiusY را تامین می کند، که شعاع تاری را به ترتیب در جهت افقی و عمودی مشخص می کند.

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(150.dp)
        .blur(
            radiusX = 10.dp,
            radiusY = 10.dp,
            edgeTreatment = BlurredEdgeTreatment(RoundedCornerShape(8.dp))
        )
)CustomizeImageSnippets.kt

**شکل 12** : BlurEffect روی تصویر اعمال شده است

هنگام محو کردن Images ، توصیه می شود از BlurredEdgeTreatment(Shape) به جای BlurredEdgeTreatment.Unbounded استفاده کنید، زیرا دومی برای محو کردن رندرهای دلخواه استفاده می شود که انتظار می رود خارج از محدوده محتوای اصلی ارائه شوند. برای تصاویر، این احتمال وجود دارد که آنها خارج از محدوده محتوا ارائه نشوند. در حالی که محو کردن یک مستطیل گرد ممکن است به این تمایز نیاز داشته باشد.

به عنوان مثال، اگر BlurredEdgeTreatment را در تصویر بالا روی Unbounded قرار دهیم، لبه های تصویر به جای شارپ تار به نظر می رسند:

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(150.dp)
        .blur(
            radiusX = 10.dp,
            radiusY = 10.dp,
            edgeTreatment = BlurredEdgeTreatment.Unbounded
        )
        .clip(RoundedCornerShape(8.dp))
)CustomizeImageSnippets.kt