Birçok uygulamanın, ekranda çizilenleri tam olarak kontrol edebilmesi gerekir. Bu, ekranda doğru yere bir kutu veya daire yerleştirmek gibi küçük bir şey olabileceği gibi, grafik öğelerinin birçok farklı stilde ayrıntılı bir düzenlemesi de olabilir.
Değiştiriciler ve DrawScope
içeren temel çizim
Oluşturma'da özel bir şey çizmenin temel yöntemi, Modifier.drawWithContent
,
Modifier.drawBehind
ve
Modifier.drawWithCache
gibi değiştiricileri kullanmaktır.
Örneğin, composable'ınızın arkasına bir şey çizmek için drawBehind
değiştiricisini kullanarak çizim komutlarını yürütmeye başlayabilirsiniz:
Spacer( modifier = Modifier .fillMaxSize() .drawBehind { // this = DrawScope } )
Yalnızca çizim yapan bir composable'a ihtiyacınız varsa Canvas
composable'ı kullanabilirsiniz. Canvas
composable, Modifier.drawBehind
için kullanışlı bir sarmalayıcıdır. Canvas
öğesini, düzeninize diğer tüm Compose kullanıcı arayüzü öğeleriyle aynı şekilde yerleştirirsiniz. Canvas
içerisinde, stilleri ve konumları üzerinde hassas kontrol kontrolüne sahip öğeler çizebilirsiniz.
Tüm çizim değiştiricileri, kendi durumunu koruyan kapsamlı bir çizim ortamı olan DrawScope
'i açığa çıkarır. Böylece, bir grup grafik öğesi için parametreleri
ayarlayabilirsiniz. DrawScope
, DrawScope
öğesinin mevcut boyutlarını belirten bir Size
nesnesi olan size
gibi birçok yararlı alan sağlar.
Bir şey çizmek için DrawScope
ürünündeki birçok çizim işlevinden birini kullanabilirsiniz. Örneğin, aşağıdaki kod ekranın sol üst köşesinde bir dikdörtgen çizer:
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 dokümanlarına bakın.
Koordinat sistemi
Ekranda bir şey çizmek için öğenizin belirli uzaklıkta kopyasını (x
ve y
) ve boyutunu bilmeniz gerekir. 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 kanvastaki [0, 0]
noktasına konumlandırır ve yukarıdaki örnekte olduğu gibi, çizim alanının tamamını kaplayan varsayılan bir size
sağlar. Dikdörtgenin sol üste yerleştirildiğini görebilirsiniz. Öğenizin boyutunu ve konumunu ayarlamak için Compose'daki koordinat sistemini anlamanız gerekir.
Koordinat sisteminin başlangıç noktası ([0,0]
), çizim alanında en soldaki pikselde bulunur. x
sağa hareket ettikçe, y
aşağı hareket ettikçe artar.
Örneğin, tuval alanının sağ üst köşesinden sol alt köşeye çapraz bir çizgi çizmek istiyorsanız DrawScope.drawLine()
işlevini kullanabilir ve karşılık gelen x ve y konumlarıyla bir başlangıç ve bitiş ofseti belirtebilirsiniz:
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 veya nasıl yürütüleceğini değiştirmek için dönüştürme işlemleri sunar.
Ölçek
Çizim işlemlerinizin boyutunu bir kat artırmak için DrawScope.scale()
kullanın. scale()
gibi işlemler, ilgili lambda içindeki tüm çizim işlemleri için geçerlidir. Örneğin, aşağıdaki kod scaleX
değerini 10 kez, scaleY
değerini ise 15 kez artırır:
Canvas(modifier = Modifier.fillMaxSize()) { scale(scaleX = 10f, scaleY = 15f) { drawCircle(Color.Blue, radius = 20.dp.toPx()) } }
Çevir
Çizim işlemlerinizi yukarı, aşağı, sola veya sağa taşımak için DrawScope.translate()
aracını kullanın. Örneğin, aşağıdaki kod çizimi 100 piksel sağa ve 300 piksel yukarı taşır:
Canvas(modifier = Modifier.fillMaxSize()) { translate(left = 100f, top = -300f) { drawCircle(Color.Blue, radius = 200.dp.toPx()) } }
Döndür
Çizim işlemlerinizi bir pivot nokta etrafında döndürmek için DrawScope.rotate()
kullanın. Örneğin, aşağıdaki kod bir 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
Çizim sınırlarını değiştirerek ve çizimleri uygun şekilde çevirerek mevcut DrawScope
öğesinin varsayılan parametrelerini ayarlamak için DrawScope.inset()
aracını kullanın:
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 fazla dönüşüm uygulamak için istediğiniz tüm değişiklikleri birleştiren tek bir dönüşüm oluşturup uygulayan DrawScope.withTransform()
işlevini kullanın. Compose'un iç içe yerleştirilmiş her dönüşümü hesaplayıp kaydetmesi gerekmeden tüm dönüşümler tek bir işlemde birlikte gerçekleştirilir. Bu nedenle withTransform()
kullanımı, bağımsız dönüşümlere iç içe geçmiş çağrılar yapmaktan daha verimlidir.
Örneğin, aşağıdaki kod dikdörtgene hem çevirme hem de döndürme uygular:
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
Oluştur'da metin çizmek için genellikle Text
composable'ı kullanabilirsiniz. Ancak, DrawScope
kullanıyorsanız veya metninizi özelleştirme ile manuel olarak çizmek istiyorsanız DrawScope.drawText()
yöntemini kullanabilirsiniz.
Metin çizmek için rememberTextMeasurer
kullanarak bir TextMeasurer
oluşturun ve ölçüm cihazıyla drawText
çağırın:
val textMeasurer = rememberTextMeasurer() Canvas(modifier = Modifier.fillMaxSize()) { drawText(textMeasurer, "Hello") }
Metni ölç
Metin çizme işlemi, diğer çizim komutlarından biraz farklı çalışır. Normalde, çizim komutuna şekli/görüntüyü çizeceği boyutu (genişlik ve yükseklik) verirsiniz. Metinde, oluşturulan metnin boyutunu kontrol eden yazı tipi boyutu, yazı tipi, bağ işaretleri ve harf aralıkları gibi birkaç parametre vardır.
Oluşturma özelliğinde, yukarıdaki unsurlara bağlı olarak ölçülen metin boyutuna erişmek için TextMeasurer
kullanabilirsiniz. Metnin arkasına bir arka plan çizmek istiyorsanız ölçülen bilgileri kullanarak metnin kapladığı alanın boyutunu öğrenebilirsiniz:
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 metin üzerinde pembe bir arka plan oluşturur:
Kısıtlamaları, yazı tipi boyutunu veya ölçülen boyutu etkileyen herhangi bir özelliği ayarlamak, yeni bir boyutun raporlanmasına neden olur. Hem width
hem de height
için sabit bir boyut ayarlayabilirsiniz. Ardından metin, TextOverflow
kümesini izler. Örneğin, aşağıdaki kod metni, composable alanın yüksekliğinin 1⁄3'ü ve genişliğinin 1⁄3'ünde oluşturur 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 sonunda üç nokta ile kısıtlamalarla çizilir:
Resim çizin
DrawScope
ile ImageBitmap
çizmek için resmi ImageBitmap.imageResource()
kullanarak yükleyin ve ardından drawImage
çağrısı yapın:
val dogImage = ImageBitmap.imageResource(id = R.drawable.dog) Canvas(modifier = Modifier.fillMaxSize(), onDraw = { drawImage(dogImage) })
Basit şekiller çizme
DrawScope
ürününde birçok şekil çizim işlevi var. Şekil çizmek için drawCircle
gibi önceden tanımlanmış çizim işlevlerinden birini kullanın:
val purpleColor = Color(0xFFBA68C8) Canvas( modifier = Modifier .fillMaxSize() .padding(16.dp), onDraw = { drawCircle(purpleColor) } )
API |
Çıkış |
Yol çizin
Yol, bir çizimin yürütülmesini sağlayan bir dizi matematiksel talimattır. DrawScope
, DrawScope.drawPath()
yöntemini kullanarak bir yol çizebilir.
Örneğin, üçgen çizmek istediğinizi varsayalım. Çizim alanının boyutunu kullanarak lineTo()
ve moveTo()
gibi işlevlerle bir yol oluşturabilirsiniz.
Ardından, üçgen elde etmek için yeni oluşturulan bu yolla drawPath()
yöntemini ç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. İşlevleri çağırabileceğiniz Canvas
nesnesine erişmek için DrawScope.drawIntoCanvas()
kullanabilirsiniz.
Örneğin, tuvale çizmek istediğiniz özel bir Drawable
varsa tuvale erişebilir ve Canvas
nesnesini geçirerek Drawable#draw()
yöntemini çağırabilirsiniz:
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ğıdaki kaynaklara göz atın:
- Grafik Değiştiriciler - Çizim değiştiricilerinin farklı türleri hakkında bilgi edinin.
- Fırça: İçeriğinizin resmini nasıl özelleştireceğinizi öğrenin.
- Oluşturulan Özel Düzenler ve Grafikler - Android Geliştirici Zirvesi 2022 - Düzen ve Grafiklerle Oluşturma işleminde özel bir kullanıcı arayüzünün nasıl oluşturulacağını öğrenin.
- JetLagged Örneği: Özel bir grafiğin nasıl çizileceğini gösteren örnek oluşturun.
Sizin için önerilenler
- Not: Bağlantı metni JavaScript kapalıyken görüntülenir
- Grafik Değiştiriciler
- Oluşturulan grafik
- Jetpack Compose'da hizalama çizgileri