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
        }
)

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
    )
}

Ekranın dörtte birini kaplayan beyaz bir arka plan üzerine çizilmiş pembe dikdörtgen
Şekil 1. Compose'da Tuval kullanılarak çizilen dikdörtgen.

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.

Sol üst [0, 0] ve sağ alt [genişlik, yükseklik] koordinat sistemini gösteren ızgara
Şekil 2. Koordinat sistemi / çizim ızgarası.

Ö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
    )
}

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())
    }
}

Düzgün olmayan bir şekilde ölçeklenmiş daire
Şekil 3. Canvas'ta bir daireye ölçek işlemi uygulanıyor.

Ç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())
    }
}

Merkezden ayrılan bir daire
Şekil 4. Canvas'ta bir çevreye çeviri işlemi uygulanıyor.

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
        )
    }
}

Ekranın ortasında 45 derece döndürülmüş dikdörtgen bir telefon
Şekil 5. Geçerli çizim kapsamına döndürme uygulamak için rotate() kullanılır. Bu işlem, dikdörtgeni 45 derece döndürür.

İç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)
    }
}

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

Etrafıyla doldurulmuş bir dikdörtgen
Şekil 6. Çizim komutlarına ek ekleme.

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
        )
    }
}

Döndürülmüş dikdörtgeni ekranın yan tarafına kaydırılmış bir telefon
Şekil 7. withTransform hareketini kullanarak hem döndürme hem de çevirme işlemi uygulayın. Dikdörtgeni döndürüp sola kaydırın.

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")
}

Tuval üzerinde çizilmiş merhaba gösteriliyor
Şekil 8. Tuvale metin çizimi.

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()
)

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

Tüm alanın 2⁄3'ünü kaplayan ve arka planı dikdörtgen olan çok satırlı metinler
Şekil 9. Tüm alanın 2⁄3'ünü kaplayan ve arka planı dikdörtgen olan çok satırlı metinler.

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()
)

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

Pembe arka plan üzerine çizilmiş metin. Metni kesen üç nokta var.
Şekil 10. Metin ölçümünde sabit kısıtlamalarla TextOverflow.Ellipsis.
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)
})

Tuval'e çizilmiş köpek resmi
Şekil 11. Tuval üzerinde ImageBitmap çiziliyor.
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)
    }
)

API

Çıkış

drawCircle()

daire çizin

drawRect()

dikdörtgen çizin

drawRoundedRect()

yuvarlak dikdörtgen çiz

drawLine()

çizgi çizme

drawOval()

oval çiz

drawArc()

yay çizme

drawPoints()

çizim noktaları

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()
)

Compose'da baş aşağı mor bir yol üçgeni çizilmiş
Şekil 12. Compose'da Path oluşturup çizim.

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()
)

Tam boyutu kaplayan oval siyah ShapeDrawable
Şekil 13. Drawable çizmek için tuvale erişiliyor.

Daha fazla bilgi

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

ziyaret edin. ziyaret edin.