Oluşturulan Grafikler

Pek çok uygulamanın ekranda çizilen çizgiyi tam olarak kontrol edebilmesi gerekir. tıklayın. Bu, ekrana bir kutu veya daire yerleştirmek kadar küçük yerine koymanız gerekmeyebilir ya da bu, ayrıntılı bir birçok farklı stilde görüntüleyebilir.

Değiştiriciler ve DrawScope içeren temel çizim

Oluşturma'da özel bir şey çizmenin temel yolu, Modifier.drawWithContent Modifier.drawBehind ve Modifier.drawWithCache.

Örneğin, composable'ınızın arkasına bir şey çizmek için Çizim komutlarını yürütmeye başlamak için drawBehind değiştiricisi:

Spacer(
    modifier = Modifier
        .fillMaxSize()
        .drawBehind {
            // this = DrawScope
        }
)
CanvasSnippets.kt

Tek ihtiyacınız çizim yapan bir composable ise Canvas composable. Canvas composable, Modifier.drawBehind için uygun bir sarmalayıcı içerir. Canvas cihazını Diğer Compose kullanıcı arayüzü öğeleriyle aynı şekilde düzenleyin. Şuranın içinde: Canvas, öğeleri stilleri üzerinde hassas kontrolle çizebilir ve konum.

Tüm çizim değiştiricileri, kapsamlı bir çizim ortamı olan DrawScope'ı gösterir. durumunu korur. Bu, bir grup kullanıcı için parametreleri grafik öğeleridir. DrawScope, size gibi bazı kullanışlı alanlar sağlar. DrawScope öğesinin mevcut boyutlarını belirten bir Size nesnesi.

Bir şeyler çizmek için DrawScope cihazındaki çok sayıda çizim işlevinden birini kullanabilirsiniz. Örneğin, aşağıdaki kodda gösterildiği gibi, aşağıdaki kod snippet'inin sol üst köşesine ekran:

Canvas(modifier = Modifier.fillMaxSize()) {
    val canvasQuadrantSize = size / 2F
    drawRect(
        color = Color.Magenta,
        size = canvasQuadrantSize
    )
}
CanvasSnippets.kt

Farklı çizim değiştiricileri hakkında daha fazla bilgi edinmek için Grafik Değiştiriciler bölümüne bakın. belgelerinden faydalanabilirsiniz.

Koordinat sistemi

Ekranda bir şey çizmek için ofseti (x ve y) ve boyutunu bilmeniz gerekir öğedir. DrawScope üzerindeki çizim yöntemlerinin çoğunda, konum ve boyut varsayılan parametre değerleri tarafından sağlanır. Varsayılan parametreler genellikle öğeyi kanvasta [0, 0] noktasına konumlandırın ve bir varsayılan değer belirtin tüm çizim alanını kaplayan size (yukarıdaki örnekte gösterildiği gibi) ile dikdörtgen sol üste yerleştirilir. Resmin boyutunu ve konumunu ayarlamak için Compose'daki koordinat sistemini anlamanız gerekir.

Koordinat sisteminin başlangıç noktası ([0,0]), bir grafiktir. x sağa hareket ettikçe, y hareket ettikçe artar aşağı doğru yükseliyor.

Örneğin, bir tabletin sağ üst köşesinden çapraz bir çizgi çizmek sol alt köşede görmek isterseniz DrawScope.drawLine() işlevini kullanın ve ilgili x ve y konumları:

Canvas(modifier = Modifier.fillMaxSize()) {
    val canvasWidth = size.width
    val canvasHeight = size.height
    drawLine(
        start = Offset(x = canvasWidth, y = 0f),
        end = Offset(x = 0f, y = canvasHeight),
        color = Color.Blue
    )
}
CanvasSnippets.kt

Temel dönüşümler

DrawScope, çizim komutlarının nerede ve nasıl kullanılacağını değiştirmek için dönüşümler sunar yürütüldüğünden emin olun.

Ölçek

Tekliflerinizi otomatikleştirmek ve optimize etmek için DrawScope.scale() sayısını bir çarpan ile artırın. Şunun gibi işlemler: scale(), ilgili lambda içindeki tüm çizim işlemlerine uygulanır. Örneğin, Örneğin, aşağıdaki kod scaleX değerini 10 kez, scaleY değerini ise 15 kat artırır kez:

Canvas(modifier = Modifier.fillMaxSize()) {
    scale(scaleX = 10f, scaleY = 15f) {
        drawCircle(Color.Blue, radius = 20.dp.toPx())
    }
}
CanvasSnippets.kt

Çevir

Tekliflerinizi otomatikleştirmek ve optimize etmek için DrawScope.translate() tuşuna basarak çizim işlemlerinizi yukarı, aşağı, sola veya sağa doğru hareket ettirebilirsiniz. Örneğin, aşağıdaki kod çizimi 100 piksel sağa ve 300 piksel yukarıya taşır:

Canvas(modifier = Modifier.fillMaxSize()) {
    translate(left = 100f, top = -300f) {
        drawCircle(Color.Blue, radius = 200.dp.toPx())
    }
}
CanvasSnippets.kt

Döndür

Tekliflerinizi otomatikleştirmek ve optimize etmek için DrawScope.rotate() kullanarak çizim işlemlerinizi bir pivot nokta etrafında döndürün. Örneğin, aşağıdaki kod dikdörtgeni 45 derece döndürür:

Canvas(modifier = Modifier.fillMaxSize()) {
    rotate(degrees = 45F) {
        drawRect(
            color = Color.Gray,
            topLeft = Offset(x = size.width / 3F, y = size.height / 3F),
            size = size / 3F
        )
    }
}
CanvasSnippets.kt

İçe doğru

Geçerli parametrenin varsayılan parametrelerini ayarlamak için DrawScope.inset() DrawScope, çizim sınırlarını değiştirme ve çizimleri çevirme buna göre:

Canvas(modifier = Modifier.fillMaxSize()) {
    val canvasQuadrantSize = size / 2F
    inset(horizontal = 50f, vertical = 30f) {
        drawRect(color = Color.Green, size = canvasQuadrantSize)
    }
}
CanvasSnippets.kt

Bu kod, çizim komutlarına etkili bir şekilde dolgu ekler:

Birden fazla dönüşüm

Çizimlerinize birden çok dönüşüm uygulamak için DrawScope.withTransform() işlevi, istediğiniz tüm değişiklikleri birleştiren tek bir dönüşüm uygular. Kullanım withTransform(), kullanıcılara iç içe yerleştirilmiş çağrılar yapmaktan daha verimlidir çünkü tüm dönüşümler tek bir ekranda yazması ve her bir mesajı kaydetmesi gereken tek bir işlemin dönüşümlerinin nasıl yapıldığını anlatır.

Örneğin, aşağıdaki kod şuraya hem çeviri hem de rotasyon uygulama: dikdörtgen:

Canvas(modifier = Modifier.fillMaxSize()) {
    withTransform({
        translate(left = size.width / 5F)
        rotate(degrees = 45F)
    }) {
        drawRect(
            color = Color.Gray,
            topLeft = Offset(x = size.width / 3F, y = size.height / 3F),
            size = size / 3F
        )
    }
}
CanvasSnippets.kt

Genel çizim işlemleri

Metin çizin

Compose'da metin çizmek için genellikle Text composable'ı kullanabilirsiniz. Ancak, DrawScope içindeyseniz veya metninizi manuel olarak çizmek istiyorsanız özelleştirilebilir olması için DrawScope.drawText() yöntemidir.

Metin çizmek için rememberTextMeasurer kullanarak bir TextMeasurer oluşturun ve ölçüm aracıyla drawText adlı kişiyi arayın:

val textMeasurer = rememberTextMeasurer()

Canvas(modifier = Modifier.fillMaxSize()) {
    drawText(textMeasurer, "Hello")
}
CanvasSnippets.kt

Metni ölçün

Metin çizimi, diğer çizim komutlarından biraz farklı şekilde çalışır. Normalde çizim komutuna şeklin/resmin çizileceği boyut (genişlik ve yükseklik) değerini verin. Metinde, oluşturulan resmin boyutunu kontrol eden birkaç parametre vardır. bilgileri kontrol edin.

Oluştur'da, ölçülen öğelere erişmek için TextMeasurer metnin boyutunu değiştirebilirsiniz. Arka plan çizmek isterseniz sonra, ölçülen bilgileri kullanarak metnin boyutunu ve metnin kapladığı alan:

val textMeasurer = rememberTextMeasurer()

Spacer(
    modifier = Modifier
        .drawWithCache {
            val measuredText =
                textMeasurer.measure(
                    AnnotatedString(longTextSample),
                    constraints = Constraints.fixedWidth((size.width * 2f / 3f).toInt()),
                    style = TextStyle(fontSize = 18.sp)
                )

            onDrawBehind {
                drawRect(pinkColor, size = measuredText.size.toSize())
                drawText(measuredText)
            }
        }
        .fillMaxSize()
)
CanvasSnippets.kt

Bu kod snippet'i, metinde pembe bir arka plan oluşturur:

Kısıtlamaları, yazı tipi boyutunu veya ölçülen boyutu etkileyen herhangi bir özelliği ayarlama yeni bir boyut raporlanır. Hem width hem de eşleme için sabit bir boyut ayarlayabilirsiniz ve height; metin de TextOverflow grubunu takip eder. Örneğin, Örneğin, aşağıdaki kodda metin, yüksekliğin 1⁄3'ü ve genişliğinin 1⁄3'ü oranında oluşturulur değerini değiştirir ve TextOverflow değerini TextOverflow.Ellipsis olarak ayarlar:

val textMeasurer = rememberTextMeasurer()

Spacer(
    modifier = Modifier
        .drawWithCache {
            val measuredText =
                textMeasurer.measure(
                    AnnotatedString(longTextSample),
                    constraints = Constraints.fixed(
                        width = (size.width / 3f).toInt(),
                        height = (size.height / 3f).toInt()
                    ),
                    overflow = TextOverflow.Ellipsis,
                    style = TextStyle(fontSize = 18.sp)
                )

            onDrawBehind {
                drawRect(pinkColor, size = measuredText.size.toSize())
                drawText(measuredText)
            }
        }
        .fillMaxSize()
)
CanvasSnippets.kt

Metin artık kısıtlamalar içinde üç nokta ile çizilir:

ziyaret edin.

Resim çizin

DrawScope ile ImageBitmap çizmek için resmi şunu kullanarak yükleyin: ImageBitmap.imageResource() ve ardından drawImage numaralı telefonu ara:

val dogImage = ImageBitmap.imageResource(id = R.drawable.dog)

Canvas(modifier = Modifier.fillMaxSize(), onDraw = {
    drawImage(dogImage)
})
CanvasSnippets.kt

ziyaret edin.

Temel şekiller çizme

DrawScope üzerinde çok sayıda şekil çizim işlevi var. Şekil çizmek için birini kullanın şu gibi önceden tanımlanmış çizim işlevlerinin bir kısmıdır: drawCircle:

val purpleColor = Color(0xFFBA68C8)
Canvas(
    modifier = Modifier
        .fillMaxSize()
        .padding(16.dp),
    onDraw = {
        drawCircle(purpleColor)
    }
)
CanvasSnippets.kt

API	Çıkış
drawCircle()
drawRect()
drawRoundedRect()
drawLine()
drawOval()
drawArc()
drawPoints()

Yol çizin

Yol, bir defa yapılan çizimle sonuçlanan bir dizi matematiksel talimattır. yürütüldü. DrawScope, DrawScope.drawPath() yöntemini kullanarak yol çizebilir.

Örneğin, bir üçgen çizmek istediğinizi düşünelim. Birlikte yol oluşturmak için fonksiyonlarını (ör. lineTo() ve moveTo()) kullanabilirsiniz. Ardından, bir üçgen elde etmek için yeni oluşturulan bu yolla drawPath() komutunu çağırın.

Spacer(
    modifier = Modifier
        .drawWithCache {
            val path = Path()
            path.moveTo(0f, 0f)
            path.lineTo(size.width / 2f, size.height / 2f)
            path.lineTo(size.width, 0f)
            path.close()
            onDrawBehind {
                drawPath(path, Color.Magenta, style = Stroke(width = 10f))
            }
        }
        .fillMaxSize()
)
CanvasSnippets.kt

Canvas nesneye erişiliyor

DrawScope ile bir Canvas nesnesine doğrudan erişiminiz yok. Tekliflerinizi otomatikleştirmek ve optimize etmek için Almak için DrawScope.drawIntoCanvas() işlev çağırabileceğiniz Canvas nesnesine erişim.

Örneğin, eklemek istediğiniz özel bir Drawable tuvale erişebilir ve Drawable#draw() numaralı telefonu, Canvas nesne:

val drawable = ShapeDrawable(OvalShape())
Spacer(
    modifier = Modifier
        .drawWithContent {
            drawIntoCanvas { canvas ->
                drawable.setBounds(0, 0, size.width.toInt(), size.height.toInt())
                drawable.draw(canvas.nativeCanvas)
            }
        }
        .fillMaxSize()
)
CanvasSnippets.kt

Daha fazla bilgi

Compose'da Çizim yapma hakkında daha fazla bilgi için aşağıdakilere göz atın: kaynaklar:

• Grafik Değiştiriciler - Farklı çizim türleri hakkında bilgi edinin kullanabilirsiniz.
• Fırça: İçeriğinizin resmini nasıl özelleştireceğinizi öğrenin.
• Compose'da Özel Düzenler ve Grafikler - Android Dev Summit 2022 - Compose'da Layouts ile özel kullanıcı arayüzü oluşturmayı öğrenin ve Grafikler.
• JetLagged Sample - Örnek oluştur: özel grafiktir.

ziyaret edin.

Sizin için önerilenler

• Not: JavaScript kapalıyken bağlantı metni gösterilir
• Grafik Değiştiriciler
• Compose'daki grafikler
• Jetpack Compose'da hizalama çizgileri

ziyaret edin.