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 ) }
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 ) }
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()) } }
Ç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()) } }
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 ) } }
İç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:
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 ) } }
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") }
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:
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:
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) })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ış |
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() )
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() )
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.
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