Jetpack Compose’da grafik oluşturma | tarafından Saurabh Pant | Haz, 2022

Jetpack Compose'da grafik oluşturma |  tarafından Saurabh Pant |  Haz, 2022

Grafik sonunda aşağı geliyor!

https://www.ft.com/content/f1220e04-aad7-11e7-ab55-27219df83c97

Çoğu zaman bazı verileri aşamalı bir grafik şeklinde göstermemiz gerekir. Bu, kullanıcılara verileriyle ilgili daha iyi bir deneyim sunar. Bu makalede, Jetpack Compose’da grafik oluşturmanın birçok yolundan birini keşfedeceğiz. Bakalım nihai sonucumuz ne olacak.

Grafik Son Çıktı

Bir grafik oluşturmak için API oluşturma oldukça basit olsa da, ilgilenmemiz gereken bazı küçük şeyler var ve ayrıca koordinat sistemini biraz anlamamız gerekiyor çünkü çizilecek noktalarımızı hesaplayacağız. Yeterince konuşma, hadi sürece dalalım.

Bu durumda bazı özel çizimlere ihtiyacımız olduğu açık, bu yüzden Compose’da Canvas ile uğraşacağız.

varsayım

İlk olarak, grafiği nasıl çizeceğimizi ve bazı varsayımları anlayalım. Dolayısıyla, günleri temsil ettiğini varsaydığımız bir X eksenimiz ve bir kullanıcının o gün boyunca yürüdüğü adım sayısını temsil eden Y eksenimiz var. X ekseninde 10 gün ve y ekseninde 50 aralığında maksimum 350 adımımız olacak.

Grafik çizimi

Diyagram, grafiği oluşturacağımız bazı temel terimleri gösterir.

xAxisSpace

X eksenindeki değerler için sağlanan minimum veya eşit boşluk.

yAxisSpace

Y eksenindeki değerler için sağlanan minimum veya eşit boşluk.

1. Nokta

Grafikteki ilk başlangıç ​​noktası.

2. nokta

Grafikteki ikinci nokta ve Nokta 3.. vb.

Kontrol noktası 1 ve 2

Bu, bézier eğrisinin eğrisini Nokta 1 ve 2’den çizdiği noktadır.

Bezier eğrisinin nasıl çalıştığını bilmiyorsanız hemen bir göz atalım.

Kaynak: https://www.quackit.com/

Resimde görüldüğü gibi bezier eğrisi, eğrinin çizildiği bir başlangıç ​​(P0) ve bitiş (P3) noktasına sahiptir. Ayrıca eğrinin şeklini kontrol etmeye yardımcı olan iki kontrol noktası P1 ve P2’ye sahiptir. Örneğin, çeşitli değerler için her iki kontrol noktasını da değiştirirseniz, bazı şekiller olabilir.

Şimdiye kadar, ihtiyacımız olan tüm küçük detayları anladık. Şimdi az önce gördüklerimizi kodlayalım.

İlk olarak, aşağıdaki girdilerle oluşturulabilir bir Grafik oluşturalım

@Composable
fun Graph(
modifier : Modifier,
xValues: List<Int>,
yValues: List<Int>,
points: List<Float>,
paddingSpace: Dp,
verticalStep: Int
)

Değerler açıklayıcıdır. İkinci adıma geçelim. Şimdi bir kutumuz olacak ve içine bir tuval ekleyeceğiz.

Box(
modifier = modifier
.background(Color.White)
.padding(horizontal = 8.dp, vertical = 12.dp),
contentAlignment = Center
) {
Canvas(
modifier = Modifier.fillMaxSize(),
) { }
}

Tuvali kutunun tam boyutuna ve ebeveynden kontrol edeceğimiz kutunun boyutuna ayarlıyoruz. Şimdi önce x & y eksenimizi görüntüleyeceğiz. Ayrıca x ve y eksenindeki noktalar arasındaki boşluğu kutumuza sağladığımız dolguyu çıkararak ve eksendeki toplam noktalara bölerek hesaplayacağız. Ayrıca noktaların (koordinatların) üzerine küçük daireler çizerek noktalarımızın nerede olduğunu görebiliriz.

Uygulamayı buraya kadar çalıştırmak bize aşağıdaki çıktıyı verecektir.

Harika! oraya geliyoruz. Şimdi bu noktaları bezier eğrisini kullanarak birleştirmek için, sıfırdan başlayarak her bir nokta çifti için kontrol noktalarını belirlememiz gerekiyor.

Şimdi onlar için kontrol noktalarını hesaplayalım.

Şimdi tüm çiftler için koordinatlara ve kontrol noktalarına sahip olduğumuza göre, koordinatları birleştirelim. Önce ilk koordinata geçiyoruz ve sonra onlara katılmaya başlıyoruz.

Uygulamayı buraya kadar çalıştırmak bize aşağıdaki çıktıyı verecektir.

Harika! Değil mi? Şimdi son kısım, yolun altındaki alanı doldurmak. Bunun için yeni oluşturulan yolu kullanacağız ve alanı dolduracak şekilde genişleteceğiz. bu Doldurma Yolu nesne bizim son koordinatımızdan bir çizgi çizecek vuruşYolu dikey boşluk hariç sağ alt köşeye ve oradan grafiğin sol tarafına ve ardından son olarak ilk koordinata bir çizgi çizecektir. Bu, yolumuz için kapalı bir döngü sağlar.

Şimdi uygulamayı çalıştıracaksak, grafiğimizi ekrana çizdireceğiz. Bak, o kadar da zor değildi, sadece biraz matematik ve geometri.

adresindeki projeyi inceleyin githubçatallayın ve varyasyonları görmek için farklı değerlerle deneyin.

Kaynak kodu: https://github.com/aqua30/GraphCompose

Şimdilik hepsi bu kadar.

Bir sonrakine kadar…

Şerefe!

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.