Chapter 2 : Graphics : The Canvas

Basic shapes

Code Python file name : drawing

 
   from kivy.app import App
   from kivy.uix.relativelayout import RelativeLayout

   class DrawingSpace(RelativeLayout):
      pass

   class DrawingApp(App):
      def build(self):
         return DrawingSpace()
    
   if __name__=="__main__":
      DrawingApp().run()

File name : drawing.kv

 
  <DrawingSpace>:
  canvas:
  Rectangle: 
   pos: self.x+10,self.top-80
   size: self.width*0.15, self.height*0.3
  Ellipse: 
   angle_start: 120 
   angle_end: 420 
   pos: 110, 110
   size: 80,80
  Ellipse:
   segments: 3 
   pos: 210,110
   size: 60,80
  Triangle: 
   points: 310,110,340,190,380,130
  Quad: 
   points: 410,110,430,180,470,190,490,120
  Line: 
   points: 10,30, 90,90, 90,10, 10,60
  Point: 
   points: 110,30, 190,90, 190,10, 110,60
   pointsize: 3 
  Bezier: 
   points: 210,30, 290,90, 290,10, 210,60
   segments: 360
   dash_length: 10
   dash_offset: 5 
  Mesh: 
   mode: 'triangle_fan'
   vertices: 310,30,0,0, 390,90,0,0, 390,10,0,0, 310,60,0,0
   indices: 0,1,2,3
  Mesh:
   mode: 'triangle_fan'
   vertices: 430,90,0,0, 470,90,0,0, 490,70,0,0, 450,10,0,0,410,70,0,0
   indices: 0,1,2,3,4

ผลลัพธ์ที่ได้...

Basic shapes

Code Python file name : drawing

 
   from kivy.app import App
   from kivy.uix.relativelayout import RelativeLayout

   class DrawingSpace(RelativeLayout):
      pass

   class DrawingApp(App):
      def build(self):
         return DrawingSpace()
    
   if __name__=="__main__":
      DrawingApp().run()

File name : drawing.kv

 
 <DrawingSpace>:
  canvas:
   Line:
    ellipse: 10, 20, 80, 60, 120, 420, 180
    width: 2
   Line:
    circle: 150, 50, 40, 0, 360, 180
   Line:
    rectangle: 210,10,80,80
   Line:
    points: 310,10,340,90,390,20
    close: True

ผลลัพธ์ที่ได้...

Images, colors, and backgrounds

Code Python file name : drawing

 
   from kivy.app import App
   from kivy.uix.relativelayout import RelativeLayout

   class DrawingSpace(RelativeLayout):
      pass

   class DrawingApp(App):
      def build(self):
         return DrawingSpace()
    
   if __name__=="__main__":
      DrawingApp().run()

File name : drawing.kv

 
<DrawingSpace>:
 canvas:
  Ellipse:
   pos: 10,10
   size: 80,80
   source: 'kivy.png'
  Rectangle:
   pos: 110,10
   size: 80,80
   source: 'kivy.png'
  Color:
   rgba: 0,0,1,.75
  Line:
   points: 10,10,390,10
   width: 10
   #cap: 'square'
   #cap: 'round'
   cap: 'none'
  Color:
   rgba: 0,1,0,1
  Rectangle:
   pos: 210,10
   size: 80,80
   source: 'kivy.png'
  Rectangle:
   pos: 310,10
   size: 80,80

ผลลัพธ์ที่ได้...

Images, colors, and backgrounds

Code Python file name : drawing

 
   from kivy.app import App
   from kivy.uix.relativelayout import RelativeLayout

   class DrawingSpace(RelativeLayout):
      pass

   class DrawingApp(App):
      def build(self):
         return DrawingSpace()
    
   if __name__=="__main__":
      DrawingApp().run()

File name : drawing.kv

 
<DrawingSpace>:
 canvas.before:
  Color:
   rgba: 1,0,0,1
  Rectangle:
   pos: 0,0
   size: 100,100
 canvas:
  Color:
   rgba: 0,1,0,1
  Rectangle:
   pos: 100,0
   size: 100,100
 canvas.after:
  Color:
   rgba: 0,0,1,1
  Rectangle:
   pos: 200,0
   size: 100,100
 Button:
  text: 'A very very very long button'
  pos_hint: {'center_x': .5, 'center_y': .5}
  size_hint: .9,.1

ผลลัพธ์ที่ได้...

สรุป

# รูปที่ 1 เเถว บน

Rectangle: # รูปสี่เหลี่ยม
pos: self.x+10,self.top-80
size: self.width*0.15, self.height*0.3

# รูปที่ 2 เเถว บน

Ellipse: # วงรี
   angle_start: 120 # เริ่มที่ *มุม
   angle_end: 420 # สิ้นสุดที่ *มุม
   pos: 110, 110
   size: 80,80

# รูปที่ 3 เเถว บน

Ellipse:
   segments: 3 # จำนวนของมุม
   pos: 210,110
   size: 60,80

# รูปที่ 4 เเถว บน

Triangle: # สามเหลี่ยม
points: 310,110,340,190,380,130

# รูปที่ 5 เเถว บน

Quad: # สี่เหลี่ยมคางหมู
points: 410,110,430,180,470,190,490,120

# รูปที่ 6 เเถว ล่าง

Line: # เส้นตรง
points: 10,30, 90,90, 90,10, 10,60

# รูปที่ 7 เเถว ล่าง

Point: # จุด
points: 110,30, 190,90, 190,10, 110,60
pointsize: 3 # ขนาดของจุด

# รูปที่ 8 เเถว ล่าง

Bezier: # เส้นโค้ง
   points: 210,30, 290,90, 290,10, 210,60
   segments: 360
   dash_length: 10 # ความยาวของเส้นที่วาด
   dash_offset: 5 # ความยาวของการปล่อยว่าง

# รูปที่ 9 เเถว ล่าง

Mesh: # ตาข่าย
   mode: 'triangle_fan'
   vertices: 310,30,0,0, 390,90,0,0, 390,10,0,0, 310,60,0,0
   indices: 0,1,2,3

# รูปที่ 10 เเถว ล่าง

Mesh:
   mode: 'triangle_fan'
   vertices: 430,90,0,0, 470,90,0,0, 490,70,0,0, 450,10,0,0,410,70,0,0
   indices: 0,1,2,3,4