Python ve Kivy ile Uygulama Geliştirme – 8

Categories python kivyPosted on
teknopenguen kivy uygulama

Kivy ile uygulama geliştirme derslerimizin 8. si olan bu derste canvas ve scatter yapısını inceleyeceğiz.

Canvas kivy de basit grafikler çizmemizi sağlayan yapıdır. Canvasla geometrik şekiller çizebiliriz daha karmaşık yapılar oluşturabiliriz ve renklerden de yararlanarak grafik çizimlerimizi yaparız.

İsterseniz canvasın nasıl kullanıldığına kodlarımızda bakalım. İki adet dosya oluşturuyoruz dosyalarımızdan biri calisma.py diğeri ise calisma.kv ilk olarak calisma.py dosyamızın içeriğine bakalım.

 

  1. from kivy.app import App
  2.  
  3. class calisma(App):
  4.  
  5. def build(self):
  6. pass
  7.  
  8.  
  9. if __name__ == "__main__":
  10.  
  11. calisma().run()

önceki derslerimizden aşina olduğumuz yapılar dışında bir yapı yok. Eğer kütüphaneleri kv dosyasından kullanırsak burada import etmemiz gerekmez arkadaşlar. Şimdi gelelim kv dosyamıza ve asıl çizim yapacağımız yapıya.

  1. FloatLayout:
  2.  
  3. pos_hint: {"center_x":0.5 , "center_y":0.5}
  4. size_hint: 0.5,0.5
  5.  
  6. canvas:
  7.  
  8. Color:
  9. rgba: 0,1,0,1
  10.  
  11. Rectangle:
  12.  
  13. pos: self.pos
  14. size: self.size

önceki dersimizden hatırladığımız floatlayout yapısını burada da görüyoruz.

Eğer o dersimize bakmadı iseniz bir göz gezdirip tekrar gelmenizi öneririm. Layoutumuzu ekranın ortasına yerleştiriyoruz ve boyutunuda ekranın boyutunun yarısı olacak şekilde ayarlıyoruz. 

Daha sonra çizim yapabilmek için canvasımızı tanımlıyoruz. Çizim rengimizi belirliyoruz. Renk belirlerken renk formatını yazıyoruz. Ben burada rgba formatını kullandım bu formatta 4 parametre gerekli eğer siz rgb yaparsanız 3 parametre yazabilirsiniz. Diğer renk formatlarını kivy.org sitesindeki dökümanlardan bulabilirsiniz.

Rengimizi de belirttikten sonra çizim olarak ne yapacağımızı yazdık “Rectangle” yani bir dortgen çizeceğimi belirttik ve dörtgenimizin boyut ve pozisyon özelliklerini belirledik. Self.size diyerek dörtgenimizin boyutunun parent’ı olan floatlayoutla aynı aynı boyutta olmasını istedik ve yine self.pos ifadesi ile aynı pozisyon yerleşiminde olmasını istedik. Yani uygulamamızı çalıştırdığımızda karşımıza çıkacak olan dörtgen layoutumuzu tam kaplar durumda olacak.

kivy calisma

uygulama görüntünüzün bu şekilde olması gerekir. Eğer başarılı oldu iseniz bir de rectangle yerine Ellipse yazın ve öyle deneyin. Bakalım bu sefer nasıl bir görüntü elde edeceksizin. Bu şekilde ellipse tanımlamanın dörtgen tanımlamakla benzer şekilde olduğunu göreceksiniz tabi yazarken büyük e ile başlamayı unutmayın.

Ellipse tanımlamayı da gördü iseniz bir başka çizim yapımız olan line a geçelim bu biraz farklıdır. Line için başlangıç ve bitiş noktaları belirlememiz gerekir. Hemen bir örnekle açıklayalım.

 

  1. canvas:
  2.  
  3. Color:
  4. rgba: 0,1,0,1
  5.  
  6. Line:
  7.  
  8. points: 0,0,200,200
  9. width: 5

canvasımızı bu şekilde değiştirelim ve uygulamamızı başlatalım ekranda 0,0 noktasından başlayıp 200,200 noktasına uzanan ve 5px kalınlığında olan bir çizgi görüyor olmalısınız. Bunu gördü iseniz birde şunu deneyin points kısmını şu şekilde değiştirin:

  1. canvas:
  2.  
  3. Color:
  4. rgba: 0,1,0,1
  5.  
  6. Line:
  7.  
  8. points: 0,0,200,200,300,100
  9. width: 5

Bu sefer görüntümüzün aşağıdaki gibi olduğunu göreceksiniz. Kivy bu sefer de 200,200 noktasından 300,100 noktasına bir çizgi çekti bu şekilde devam ederek farklı şekiller elde edebiliriz.

kivy cizim alani

Gelin bu şekli bir üçgene dönüştürelim bunun için bu iki çizgiyi üçgen oluşacak şekilde bir çizgi çekmek mantıklı gelebilir ama bunun için bu noktaları hesaplayıp tekrar kodu değiştirmemiz gerekir.

 Kivy de bunun daha kolay yolu var close parametresine true değerini atayarak kivynin bu çizgileri kendisinin tamamlamasını sağlayabiliriz. Hemen kodlarımızı gösterelim:

  1. FloatLayout:
  2.  
  3. pos_hint: {"center_x":0.5 , "center_y":0.5}
  4. size_hint: 0.5,0.5
  5.  
  6. canvas:
  7.  
  8. Color:
  9. rgba: 0,1,0,1
  10.  
  11. Line:
  12.  
  13. points: 0,0,200,200,300,100
  14. width: 5
  15. close: True

kv dosyamız bu şekilde şimdi uygulamamızı çalıştıralım ve sonucu görelim.

kivy calisma ucgen

Gördüğünüz gibi kivy çizgileri kapalı bir şekil olacak şekilde birleştirdi. Bu şekilde daha değişik şekiller elde etmeye çalışarak alıştırma yapabilirsiniz. Şimdi de kv dosyamızı şu şekilde belirleyelim:

  1. FloatLayout:
  2.  
  3. pos_hint: {"center_x":0.5 , "center_y":0.5}
  4. size_hint: 0.5,0.5
  5.  
  6. canvas:
  7.  
  8. Color:
  9. rgba: 0,1,0,1
  10.  
  11. Rectangle:
  12.  
  13. pos: self.pos
  14. size: self.size
  15.  
  16. canvas:
  17.  
  18. Color:
  19. rgba: 1,0,0,1
  20.  
  21. Ellipse:
  22.  
  23. pos: self.pos
  24. size: self.size

kodlarımıza baktığımızda beklentimiz nedir? Yeşil bir dörtgen ve onun üzerine çizilmiş kırmızı bir ellipse değilmi. Çaliıştırın bakalım sonuç ne olacak. Hayal kırıklığına uğradık değil mi ekranda kırmızı bir ellipseten başka bir şey yok işte bu durumda isteğimizi yapabilmek için işin içine canvas.after ve canvas.before giriyor. Şimdi ellipse i oluşturan canvasımızı şu şekilde değiştirelim:

  1. canvas.after:
  2.  
  3. Color:
  4. rgba: 1,0,0,1
  5.  
  6. Ellipse:
  7.  
  8. pos: self.pos
  9. size: self.size

şimdi istediğimiz sonuca ulaştık. Yaptığımız tek değişiklik after ifadesini değiştirmek. Bu sonucu rectangle ı oluşturan canvas a before ekleyerekte elde edebiliriz.

Son bir yapı daha görelim bu eğlenceli bir yapı scatter yapısı. Kv dosyamızı tekrar değiştiriyoruz ve içerği bu sefer şu şekilde.

 

  1. RelativeLayout:
  2.  
  3. Scatter:
  4.  
  5. canvas:
  6.  
  7. Color:
  8. rgba: 0,1,0,1
  9.  
  10. Rectangle:
  11.  
  12. pos: 50,50
  13. size: 50,50

Layoutumuzu değiştirdik ve scatter yapısını ekledik. Şimdi uygulamayı çalıştırın ve çıkan dörtgeni fare ile sürüklemeye çalışın. Gördüğünüz gibi dörtgenimiz hareketli. Scatter yapısı bize mobil cihazlarda sahip olduğumuz yetenekleri sağlar örneğin dokunduğumuz bir cismi hareket ettirme veya iki parmağımızla tutup büyütme veya çevirme. Scatter ile bunu yapabiliriz. Şimdi kutunun bir noktasına sağ tıklayın

kivy calisma gor

kutunun üzerinde resimde görüldüğü gibi bir nokta belirdi değil mi? Şimdi kutunun nbaşka bir noktasını farenin sol tuşu ile yakalayın ve kutuyu genişletmeye çalışın ve kutuyu çevirin. Gördüğünüz gibi kivy de fare ile dokunma hareketlerini bu şekilde simule edebiliriz.

Bu dersimiz de bu kadar biraz uzun ve karışık olabilir. Eğer anlamadığınız bir nokta varsa youtube kanalımızda ders anlatım videomuzla eksikliklerinizi giderebilirsiniz. Bir dahaki dersimizde görüşmek üzere.

 

 

 

avatar