Grafik değiştiriciler

Compose'da Canvas composable'ın yanı sıra kullanışlı birkaç grafik bulunur Özel içerik çizimine yardımcı olan Modifiers. Bu değiştiriciler, çünkü tüm composable'lara uygulanabilir.

Çizim değiştiricileri

Tüm çizim komutları, Oluşturma'da bir çizim değiştiriciyle yapılır. Oluşturma bölümünde üç ana çizim değiştirici vardır:

• drawWithContent
• drawBehind
• drawWithCache

Çizimin temel değiştiricisi drawWithContent. Burada özel çizim sırası ve içindeki çizim komutlarını kullanabilirsiniz. drawBehind, drawWithContent etrafında uygun bir sarmalayıcıdır ve çizim sırasını, kompozisyonun içeriğinin arkasına ayarlanmıştır. drawWithCache içinden onDrawBehind veya onDrawWithContent yöntemini çağırır ve nesneleri önbelleğe alma mekanizmasıdır.

Modifier.drawWithContent: Çizim sırasını seçin

Modifier.drawWithContent şunları yapmanıza olanak tanır: öncesinde veya sonrasında DrawScope işlemlerini yürütecek, composable'dan bahsetmek istiyorum. Mevcut içeriği oluşturmak için drawContent işlevini çağırdığınızdan emin olun composable. Bu değiştiriciyi kullanarak, içeriğinizin özel çizim işlemlerinizden önce mi yoksa sonra mı çizileceğine karar verebilirsiniz.

Örneğin, kullanıcı arayüzünde el feneri anahtar deliği efekti oluşturmak için içeriğinizin üzerine radyal degrade oluşturmak istiyorsanız aşağıdakileri yapabilirsiniz:

var pointerOffset by remember {
    mutableStateOf(Offset(0f, 0f))
}
Column(
    modifier = Modifier
        .fillMaxSize()
        .pointerInput("dragging") {
            detectDragGestures { change, dragAmount ->
                pointerOffset += dragAmount
            }
        }
        .onSizeChanged {
            pointerOffset = Offset(it.width / 2f, it.height / 2f)
        }
        .drawWithContent {
            drawContent()
            // draws a fully black area with a small keyhole at pointerOffset that’ll show part of the UI.
            drawRect(
                Brush.radialGradient(
                    listOf(Color.Transparent, Color.Black),
                    center = pointerOffset,
                    radius = 100.dp.toPx(),
                )
            )
        }
) {
    // Your composables here
}
GraphicsModifiersSnippets.kt

Şekil 1: El feneri türünde bir kullanıcı arayüzü deneyimi oluşturmak için Composable'ın üst kısmında kullanılan Modifier.drawWithContent.

Modifier.drawBehind: Bir composable'ın arkasına çizim yapma

Modifier.drawBehind şunları yapmanıza olanak tanır: Ekranda çizilen composable içeriğin arkasındaki DrawScope işlemleri. Eğer Canvas uygulamasına göz atarken, Modifier.drawBehind etiketi için uygun bir sarmalayıcıdır.

Text öğesinin arkasına yuvarlak bir dikdörtgen çizmek için:

Text(
    "Hello Compose!",
    modifier = Modifier
        .drawBehind {
            drawRoundRect(
                Color(0xFFBBAAEE),
                cornerRadius = CornerRadius(10.dp.toPx())
            )
        }
        .padding(4.dp)
)
GraphicsModifiersSnippets.kt

Aşağıdaki sonucu verir:

Şekil 2: Değiştirici.drawBehind kullanılarak çizilen bir metin ve bir arka plan

Modifier.drawWithCache: Çizim nesnelerini çizme ve önbelleğe alma

Modifier.drawWithCache nesneleri korur otomatik olarak oluşturulur. Çizim alanının boyutu aynı olduğu veya okunan durum nesneleri değişmediği sürece nesneler önbelleğe alınır. Bu değiştirici, hem çizim çağrılarının performansını iyileştirmek için nesnelerin (örneğin: Brush, Shader, Path vb.) yeniden tahsis edilmesi ihtiyacını önler otomatik olarak oluşturulur.

Alternatif olarak, remember öğesini kullanarak kullanabilirsiniz. Ancak, her zaman erişim sahibi olmadığınızdan bu işlemi yapmak her zaman mümkün olmayabilir. bileşime dahil edilir. drawWithCache, nesne yalnızca çizim için kullanılır.

Not: Modifier.drawWithCache özelliğini yalnızca olması gereken nesneler oluştururken kullanın önbelleğe alınmış olması gerekir. Nesneleri önbelleğe almaya gerek kalmadan bu değiştiriciyi kullanmak, gereksiz lambda ayırmaları anlamına gelir.

Örneğin, Text arkasına bir renk geçişi çizmek için şunu kullanarak bir Brush oluşturursanız: drawWithCache, çizim alanının boyutuna kadar Brush nesnesini önbelleğe alır değişiklikler:

Text(
    "Hello Compose!",
    modifier = Modifier
        .drawWithCache {
            val brush = Brush.linearGradient(
                listOf(
                    Color(0xFF9E82F0),
                    Color(0xFF42A5F5)
                )
            )
            onDrawBehind {
                drawRoundRect(
                    brush,
                    cornerRadius = CornerRadius(10.dp.toPx())
                )
            }
        }
)
GraphicsModifiersSnippets.kt

Şekil 3: Fırça nesnesinidrawWithCache ile önbelleğe alma

Grafik değiştiriciler

Modifier.graphicsLayer: Dönüşüm işlemlerini composable'lara uygulama

Modifier.graphicsLayer, birleştirilebilir çizimin içeriğini çizim katmanı haline getiren bir değiştiricidir. CEVAP katmanı, aşağıdakiler gibi birkaç farklı işlev sağlar:

• Çizim talimatları için izolasyon (RenderNode benzeri). Çizim bir katmanın parçası olarak yakalanan talimatların, uygulama kodunu yeniden çalıştırmadan ardışık düzen oluşturabilirsiniz.
• Bir tablodaki tüm çizim talimatlarına uygulanan katmanıdır.
• Kompozisyon özellikleri için pikselleştirme. Bir katman pikselleştirildiğinde, Çizim talimatları uygulanır ve çıktı, ekranın dışındaki bir ekrana arabellek. Sonraki kareler için böyle bir arabelleğin birleştirilmesi, ancak her bir işlem için bir bit eşlem olarak davranır ve dönüştürme veya döndürme gibi dönüşümler uygulanır.

Dönüşümler

Modifier.graphicsLayer, çizim talimatları için yalıtım sağlar; şunun için: Modifier.graphicsLayer kullanılarak çeşitli dönüştürme işlemleri uygulanabilir. Bunlar, çizimi yeniden yürütmeye gerek kalmadan canlandırılabilir veya değiştirilebilir lambda.

Modifier.graphicsLayer, cihazınızın ölçülen boyutunu veya yerleşimini değiştirmez. composable, çünkü yalnızca çizim aşamasını etkiliyor. Bu, composable projenizin Düzen sınırlarının dışında çizimle sonuçlanıyorsa diğerleriyle çakışabilir.

Not: Performans sırasında bu değiştiricinin lambda sürümünü tercih etmeniz gerekir. graphicsLayer özelliğini güncellemek için State nesnesinin kullanılmasını ifade eder.

Bu değiştiriciyle aşağıdaki dönüşümler uygulanabilir:

Ölçek - boyutu artır

scaleX ve scaleY, yatay veya dikey içeriği büyütür ya da küçültür girin. 1.0f değeri, ölçekte değişiklik olmadığını gösterir. 0.5f değeri ise boyutun yarısını ifade eder.

Image(
    painter = painterResource(id = R.drawable.sunset),
    contentDescription = "Sunset",
    modifier = Modifier
        .graphicsLayer {
            this.scaleX = 1.2f
            this.scaleY = 0.8f
        }
)
GraphicsModifiersSnippets.kt

Şekil 4: composable'a uygulanan scaleX ve scaleY

Çeviri

translationX ve translationY, graphicsLayer ile değiştirilebilir. translationX, composable'ı sola veya sağa taşır. translationY, aşağı yukarı composable'ı seçtim.

Image(
    painter = painterResource(id = R.drawable.sunset),
    contentDescription = "Sunset",
    modifier = Modifier
        .graphicsLayer {
            this.translationX = 100.dp.toPx()
            this.translationY = 10.dp.toPx()
        }
)
GraphicsModifiersSnippets.kt

Şekil 5: Değiştirici.graphicsKatmanlar ile Resim'e çeviriX ve çeviriY uygulandı

Döndürme

Yatay döndürmek için rotationX simgesini, dikey olarak döndürmek için rotationY değerine ayarlayın ve Z ekseninde döndürmek için rotationZ tuşuna basın (standart döndürme). Bu değer belirtilir (0-360) olarak ayarlanır.

Image(
    painter = painterResource(id = R.drawable.sunset),
    contentDescription = "Sunset",
    modifier = Modifier
        .graphicsLayer {
            this.rotationX = 90f
            this.rotationY = 275f
            this.rotationZ = 180f
        }
)
GraphicsModifiersSnippets.kt

Şekil 6: Değiştirici.graphicsKatman tarafından Resim üzerinde ayarlanan rotasyonX, döndürmeY ve döndürmeZ

Köken

Bir transformOrigin belirtilebilir. Daha sonra, bu hedefin gerçekleşmesidir. Şimdiye kadarki tüm örneklerde TransformOrigin.Center, şurada: (0.5f, 0.5f). (0f, 0f) noktasında orijini belirtirseniz dönüşümler, birleştirilebilir öğenin sol üst köşesinden başlar.

Kaynağı rotationZ dönüşümüyle değiştirirseniz öğe, composable'ın sol üst etrafında döner:

Image(
    painter = painterResource(id = R.drawable.sunset),
    contentDescription = "Sunset",
    modifier = Modifier
        .graphicsLayer {
            this.transformOrigin = TransformOrigin(0f, 0f)
            this.rotationX = 90f
            this.rotationY = 275f
            this.rotationZ = 180f
        }
)
GraphicsModifiersSnippets.kt

Şekil 7: TransformOrigin 0f, 0f olarak ayarlandığında uygulanan döndürme

Klip ve şekil

Şekil, clip = true sırasında içeriğin klibinin ana hatlarını belirtir. İçinde Bu örnekte, iki farklı klibe sahip olmak için iki kutu seçtik. Biri; graphicsLayer klip değişkeni, diğeri ise uygun sarmalayıcıyı kullanarak Modifier.clip.

Column(modifier = Modifier.padding(16.dp)) {
    Box(
        modifier = Modifier
            .size(200.dp)
            .graphicsLayer {
                clip = true
                shape = CircleShape
            }
            .background(Color(0xFFF06292))
    ) {
        Text(
            "Hello Compose",
            style = TextStyle(color = Color.Black, fontSize = 46.sp),
            modifier = Modifier.align(Alignment.Center)
        )
    }
    Box(
        modifier = Modifier
            .size(200.dp)
            .clip(CircleShape)
            .background(Color(0xFF4DB6AC))
    )
}
GraphicsModifiersSnippets.kt

İlk kutunun içeriği ("Merhaba Oluştur" yazan metin) şu şekilde kırpılır: daire şekli:

Şekil 8: Kutu bileşimine uygulanan klip

Daha sonra üstteki pembe daireye bir translationY uygularsanız sınırların iki özel halen aynıdır ancak daire, daire (ve sınırları dışında) üzerinde çalışır.

Şekil 9: Klip çevrilebilirY ve dış çizgi için kırmızı kenarlık uygulanmıştır

composable'ı çizildiği bölgeye göre klip oluşturmak için başka bir öğe ekleyebilirsiniz Modifier.clip(RectangleShape), değiştirici zincirinin başında. İçerik orijinal sınırların içinde kalır.

Column(modifier = Modifier.padding(16.dp)) {
    Box(
        modifier = Modifier
            .clip(RectangleShape)
            .size(200.dp)
            .border(2.dp, Color.Black)
            .graphicsLayer {
                clip = true
                shape = CircleShape
                translationY = 50.dp.toPx()
            }
            .background(Color(0xFFF06292))
    ) {
        Text(
            "Hello Compose",
            style = TextStyle(color = Color.Black, fontSize = 46.sp),
            modifier = Modifier.align(Alignment.Center)
        )
    }

    Box(
        modifier = Modifier
            .size(200.dp)
            .clip(RoundedCornerShape(500.dp))
            .background(Color(0xFF4DB6AC))
    )
}
GraphicsModifiersSnippets.kt

Şekil 10: Grafik katmanı dönüşümünün üzerine klip uygulandı

Alfa

Modifier.graphicsLayer, tamamı için alpha (opaklık) ayarlamak üzere kullanılabilir katmanıdır. 1.0f tamamen opak ve 0.0f görünmez.

Image(
    painter = painterResource(id = R.drawable.sunset),
    contentDescription = "clock",
    modifier = Modifier
        .graphicsLayer {
            this.alpha = 0.5f
        }
)
GraphicsModifiersSnippets.kt

Şekil 11: Alfa uygulanmış resim

Not: Bir alfa sürümü 1,0f'den düşük bir değere ayarlandığında, katmanın tüm içeriği ekran dışı bir arabelleğe alınır (CompositingStrategy ModulateAlpha) tıklayın. Daha fazla bilgi için CompositingStrategy bölümüne bakın.

Birleştirme stratejisi

Alfa sürümü ve şeffaflıkla çalışmak, tek bir veri deneyimini sağlamak kadar kolay olmayabilir. alfa değeri. Bir alfa sürümünü değiştirmenin yanı sıra, graphicsLayer cihazda CompositingStrategy. CompositingStrategy, composable'ın içeriği, composable'ın diğer zaten ekranda çizilir.

Not: CompositingStrategy, Oluştur 1.4.0-alpha02'te kullanıma sunulmuştur.

Farklı stratejiler şunlardır:

Otomatik (varsayılan)

Birleştirme stratejisi, graphicsLayer parametreleridir. Alfa, şundan küçükse katmanı ekran dışı bir arabellekte oluşturur: 1.0f veya RenderEffect olarak ayarlanmıştır. Alfa 1'den azsa içeriği oluşturmak ve ardından bu ekran dışı arabelleği hedefe ilgili alfa ile çizmek için otomatik olarak bir birleştirme katmanı oluşturulur. Bir RenderEffect veya üzerine kaydırma yapıldığında içerik her zaman ekran dışı olarak oluşturulur CompositingStrategy grubundan bağımsız olarak arabelleğe alınır.

Ekran dışı

Birleştirilebilir öğenin içeriği, hedefte oluşturulmadan önce her zaman ekran dışı bir dokuya veya bitmap'e rasterleştirilir. Bu, özellikle içeriği maskelemek ve performansı artırmak için BlendMode işlemleri bir dizi çizim talimatını oluşturmamıza yardımcı oluyor.

BlendModes, CompositingStrategy.Offscreen kullanımına örnek olarak verilebilir. Aşağıdaki örneğe göz atalım. Image composable'ın bazı bölümlerini kaldırmak istediğinizi varsayalım. Bunun için BlendMode.Clear kullanır. compositingStrategy özelliğini CompositingStrategy.Offscreen, BlendMode tüm içeriklerle etkileşimde bulunur dokunun.

Image(painter = painterResource(id = R.drawable.dog),
   contentDescription = "Dog",
   contentScale = ContentScale.Crop,
   modifier = Modifier
       .size(120.dp)
       .aspectRatio(1f)
       .background(
           Brush.linearGradient(
               listOf(
                   Color(0xFFC5E1A5),
                   Color(0xFF80DEEA)
               )
           )
       )
       .padding(8.dp)
       .graphicsLayer {
           compositingStrategy = CompositingStrategy.Offscreen
       }
       .drawWithCache {
           val path = Path()
           path.addOval(
               Rect(
                   topLeft = Offset.Zero,
                   bottomRight = Offset(size.width, size.height)
               )
           )
           onDrawWithContent {
               clipPath(path) {
                   // this draws the actual image - if you don't call drawContent, it wont
                   // render anything
                   [e-mail]()
               }
               val dotSize = size.width / 8f
               // Clip a white border for the content
               drawCircle(
                   Color.Black,
                   radius = dotSize,
                   center = Offset(
                       x = size.width - dotSize,
                       y = size.height - dotSize
                   ),
                   blendMode = BlendMode.Clear
               )
               // draw the red circle indication
               drawCircle(
                   Color(0xFFEF5350), radius = dotSize * 0.8f,
                   center = Offset(
                       x = size.width - dotSize,
                       y = size.height - dotSize
                   )
               )
           }

       }
)
GraphicsModifiersSnippets.kt

CompositingStrategy, Offscreen değerine ayarlandığında ekran dışı bir görüntü oluşturulur dokusuyla (BlendMode yalnızca . Daha sonra, videoyu önceden zaten çizilmiş olan içeriği etkilemez.

Şekil 12: Uygulama içinde BlendMode.Clear ve CompositingStrategy.Offscreen ile bir daire göstergesi gösteren bir resimde Modifier.drawWithContent

CompositingStrategy.Offscreen kullanmadıysanız BlendMode.Clear uygulamanın sonuçları, önceden ayarlanmış olandan bağımsız olarak hedefteki tüm pikselleri temizler ve pencerenin oluşturma arabelleğinin (siyah) görünür kalmasını sağlar. Çoğu alfa içeren BlendModes, arabelleğe alma’yı tıklayın. Kırmızı daire göstergesinin etrafındaki siyah halkaya dikkat edin:

Şekil 13: BlendMode.Clear ve Compositingstratejisi ayarlanmamış dairesel bir gösterimin gösterildiği resimde, Modifier.drawWithContent

Bunu biraz daha açıklamak gerekirse: Uygulamanın şeffaf bir pencere arka planı varsa ve CompositingStrategy.Offscreen'ü kullanmadıysanız BlendMode, uygulamanın tamamıyla etkileşim kurar. Bu örnekte gösterildiği gibi, uygulamayı veya altındaki duvar kağıdını göstermek için tüm pikselleri temizler:

Şekil 14: Compositingstratejisi ayarlanmamış ve BlendMode.Clear'ı şeffaf pencere arka planına sahip bir uygulamayla kullanma. Pembe duvar kağıdının, kırmızı durum dairesinin çevresinde nasıl gösterildiğine dikkat edin.

Şunu belirtmek gerekir ki, CompositingStrategy.Offscreen kullanırken ekran dışında boyutundaki bir doku oluşturulur ve tekrar tıklayın. Bu stratejiyle yapılan çizim komutları, varsayılan olarak bu bölgeye kırpılıyor. Aşağıdaki kod snippet'i, ekran dışı dokuları kullanmaya geçiş yapma:

@Composable
fun CompositingStrategyExamples() {
   Column(
       modifier = Modifier
           .fillMaxSize()
           .wrapContentSize(Alignment.Center)
   ) {
       /** Does not clip content even with a graphics layer usage here. By default, graphicsLayer
       does not allocate + rasterize content into a separate layer but instead is used
       for isolation. That is draw invalidations made outside of this graphicsLayer will not
       re-record the drawing instructions in this composable as they have not changed **/
       Canvas(
           modifier = Modifier
               .graphicsLayer()
               .size(100.dp) // Note size of 100 dp here
               .border(2.dp, color = Color.Blue)
       ) {
           // ... and drawing a size of 200 dp here outside the bounds
           drawRect(color = Color.Magenta, size = Size(200.dp.toPx(), 200.dp.toPx()))
       }

       Spacer(modifier = Modifier.size(300.dp))

       /** Clips content as alpha usage here creates an offscreen buffer to rasterize content
       into first then draws to the original destination **/
       Canvas(
           modifier = Modifier
               // force to an offscreen buffer
               .graphicsLayer(compositingStrategy = CompositingStrategy.Offscreen)
               .size(100.dp) // Note size of 100 dp here
               .border(2.dp, color = Color.Blue)
       ) {
           /** ... and drawing a size of 200 dp. However, because of the CompositingStrategy.Offscreen usage above, the
           content gets clipped **/
           drawRect(color = Color.Red, size = Size(200.dp.toPx(), 200.dp.toPx()))
       }
   }
}
GraphicsModifiersSnippets.kt

Şekil 15: Compositingstrateji.Auto ve Compositingstratejisi. Offscreen: Ekran dışındaki klipler, otomatik oluşturulan bölge için devre dışıdır.

ModulateAlpha

Bu beste stratejisi, çizimlerin her biri için alfayı değiştirir. graphicsLayer içinde kaydedildi. Herhangi bir RenderEffect ayarlanmadığı sürece alfa 1, 0f'nin altında alfa için ekran dışı arabellek.Böylece alfa oluşturma için daha verimli olduğunu gördük. Ancak farklı sonuçlar verebilir farklı olabilir. İçeriğin önceden bilindiği kullanım alanları için olduğundan daha iyi performans sağlayabilir. alfa değerleri 1'den küçük olan CompositingStrategy.Auto.

Farklı beste stratejilerine ilişkin başka bir örnek aşağıda verilmiştir: alfa öğelerini composable'ların farklı bölümlerine eklemek ve Modulate uygulamak strateji:

@Preview
@Composable
fun CompositingStratgey_ModulateAlpha() {
  Column(
      modifier = Modifier
          .fillMaxSize()
          .padding(32.dp)
  ) {
      // Base drawing, no alpha applied
      Canvas(
          modifier = Modifier.size(200.dp)
      ) {
          drawSquares()
      }

      Spacer(modifier = Modifier.size(36.dp))

      // Alpha 0.5f applied to whole composable
      Canvas(modifier = Modifier
          .size(200.dp)
          .graphicsLayer {
              alpha = 0.5f
          }) {
          drawSquares()
      }
      Spacer(modifier = Modifier.size(36.dp))

      // 0.75f alpha applied to each draw call when using ModulateAlpha
      Canvas(modifier = Modifier
          .size(200.dp)
          .graphicsLayer {
              compositingStrategy = CompositingStrategy.ModulateAlpha
              alpha = 0.75f
          }) {
          drawSquares()
      }
  }
}

private fun DrawScope.drawSquares() {

  val size = Size(100.dp.toPx(), 100.dp.toPx())
  drawRect(color = Red, size = size)
  drawRect(
      color = Purple, size = size,
      topLeft = Offset(size.width / 4f, size.height / 4f)
  )
  drawRect(
      color = Yellow, size = size,
      topLeft = Offset(size.width / 4f * 2f, size.height / 4f * 2f)
  )
}

val Purple = Color(0xFF7E57C2)
val Yellow = Color(0xFFFFCA28)
val Red = Color(0xFFEF5350)
GraphicsModifiersSnippets.kt

Şekil 16: ModlateAlpha, alfa grubunu her çizim komutuna uygular

Bir composable'ın içeriğini bit eşlem olarak yazma

Not: Bu snippet'te kullanılan rememberGraphicsLayer() işlevi yalnızca Compose'da mevcut 1.7.0-alfa07 ve sonraki sürümler.

Yaygın kullanım alanlarından biri, bir composable'dan Bitmap oluşturmaktır. Kopyalamak için içeriğini bir Bitmap olarak ayarlamak için aşağıdaki kodu kullanarak bir GraphicsLayer oluşturun: rememberGraphicsLayer().

Çizim komutlarını drawWithContent() komutunu kullanarak yeni katmana yönlendirin ve graphicsLayer.record{}. Daha sonra, aşağıdakini kullanarak katmanı görünür tuvalde çizin: drawLayer:

val coroutineScope = rememberCoroutineScope()
val graphicsLayer = rememberGraphicsLayer()
Box(
    modifier = Modifier
        .drawWithContent {
            // call record to capture the content in the graphics layer
            graphicsLayer.record {
                // draw the contents of the composable into the graphics layer
                [e-mail]()
            }
            // draw the graphics layer on the visible canvas
            drawLayer(graphicsLayer)
        }
        .clickable {
            coroutineScope.launch {
                val bitmap = graphicsLayer.toImageBitmap()
                // do something with the newly acquired bitmap
            }
        }
        .background(Color.White)
) {
    Text("Hello Android", fontSize = 26.sp)
}
AdvancedGraphicsSnippets.kt

Bit eşlemesini diske kaydedip paylaşabilirsiniz. Daha fazla bilgi için örnek snippet'i inceleyin. Denemeden önce cihaz üzerindeki izinleri kontrol ettiğinizden emin olun diske kaydedin.

Özel çizim değiştirici

Kendi özel değiştiricinizi oluşturmak için DrawModifier arayüzünü uygulayın. Bu size, gösterilenle aynı ContentDrawScope erişimi sunar. (Modifier.drawWithContent() kullanırken) Ardından, kodu temizlemek ve kullanışlı sarmalayıcılar sağlamak için yaygın çizim işlemlerini özel çizim değiştiricilerine ayıklayabilirsiniz. Örneğin, Modifier.background() kullanışlı bir DrawModifier'dur.

Örneğin, dikey olarak dönen bir Modifier uygulamak istiyorsanız aşağıdaki gibi bir şablon oluşturabilirsiniz:

class FlippedModifier : DrawModifier {
    override fun ContentDrawScope.draw() {
        scale(1f, -1f) {
            [e-mail]()
        }
    }
}

fun Modifier.flipped() = this.then(FlippedModifier())
GraphicsModifiersSnippets.kt

Ardından, Text tarihinde uygulanan ters çevrilmiş bu değiştiriciyi kullanın:

Text(
    "Hello Compose!",
    modifier = Modifier
        .flipped()
)
GraphicsModifiersSnippets.kt

Şekil 17: Metin Üzerinde Özel Ters Edilmiş Değiştirici

Ek kaynaklar

graphicsLayer ve özel çizimin kullanıldığı daha fazla örnek için şuraya göz atın: şu kaynakları inceleyin:

• Compose'da denizanalarını hareket ettirme
• Reklam Oluşturmada ADS 2022 Düzenleri ve Grafikleri