Kivy(WidgetsEvent)

  ในเรื่องนี้จะอธิบายเกี่ยวกับการสร้างการทำงานให้มีการตอบโต้กับเราโดยทีการเกิดนั้นจะมาจากการจัดการ canvas ของ widgets ตัวนึงกับด้วย widgets ของอีกตัวนึงเริ่มจากให้เราลองดูตัวอย่างในท้ายบทที่ 1(ComicCreator) โดยในบทที่ 1 นั้นแต่ละตัวจะไม่สามารถกดแล้วมีการตอบสนองใดๆได้แต่ในบทนี้นั้นเราจะทำให้มันตอบโต้กับเราได้โดยมี diagram แสดงว่าตัวไหนสัมพันธ์กับตัวไหนจากรูป

ภาพจากหนังสือ kivy interactive applications in Python

 โดยส่วนสำคัญที่เราใช้อ้างอิงว่าเป็นตัวไหนนั้นคือ id ซึ่งจะกำหนดไว้ใน .kv หรือ ส่วนของ kivy นั้นเอง

และจะมีตัวอย่างโค้ดที่ให้มาคือโค้ดเดียวกับตอนท้ายบทที่1แต่มีการเพิ่ม attibute ของแต่ละตัวเข้าไป

โค้ดในไฟล์ .kv
<ComicCreator>:
  AnchorLayout:
    anchor_x: 'left'
    anchor_y: 'top'
    ToolBox:
      id: _tool_box
      drawing_space: _drawing_space
      comic_creator: root
      size_hint: None, None
      width: 100
  AnchorLayout:
    anchor_x: 'right'
    anchor_y: 'top'
    DrawingSpace:
      id: _drawing_space
      status_bar: _status_bar
      general_option: _general_options
      tool_box: _tool_box
      size_hint: None,None
      width: root.width - _tool_box.width
      height: root.height -_general_options.height-_status_bar.height
  AnchorLayout:
    anchor_x: 'center'
    anchor_y: 'bottom'
    BoxLayout:
      orientation: 'vertical'
      GeneralOptions:
        id: _general_options
        drawing_space: _drawing_space
        comic_creator:root
        size_hint: 1,None
        height: 48
      StatusBar:
        id: _status_bar
        size_hint: 1,None
        height: 24

 ชื่อของ attibute และ ชื่อ id นั้นจะไม่แตกต่างกันจาก โค้ดที่เป็นตัวอย่างท้ายบทก่อนหน้านี้แต่ว่าจะมีการเติม _ จากชื่อของ attibute เพื่อให้รู้ว่าใช้งานใน Kivy แต่ที่ไม่มี _นำหน้าจะใช้งานเป็น attibute ใน python
 พอเราทำการแก้ไขโค้ดที่ใช้งานเสร็จแล้วต่อจากนี้ก็จะทำการเริ่มสร้าง events แบบพื้นฐานคือการสร้าง stickman ขึ้นมาโดยให้มันสามารถลากไปมาได้โดยจะมีวิธีคิดคือให้เรากดเมาส์แล้วจึงสามารถลากได้แล้วทำการปล่อยเมาส์เราจะไม่สามารถลากไปมาได้โดยจะมีตัวอย่างโค้ดมาให้ลองแก้จากไฟล์ comicwidgets.kv ของท้ายบทที่แล้วโดยการเพิ่มเข้าไปที่ส่วนหัวคือ

โค้ดในไฟล์ .kv

#:import comicwidgets comicwidgets
<DraggableWidget>:
  size_hint:None, None

<StickMan>:
  size: 48,48
  ... 

ตอนนี้เราจะมี widgets ตัวใหม่ขึ้นมาเรียกว่า Draggablewidgets โดยจะให้มันเอาค่า size_hintเป็น None เพื่อให้เราทำให้ค่าตัว stickman ของเราตายตัวแล้วเราจะทำการเพิ่มไฟล์ .py เพื่อให้มันเป็นส่วนคำนวณโดยมีโค้ดมาให้ลองคือ

โค้ดในไฟล์ .py

#filename comicwidgets.py
from kivy.uix.relativelayout import RelativeLayout
from kivy.graphics import Line

class DraggableWidget(RelativeLayout):
    def __init__(self, **kwargs):
        self.selected = None
        super(DraggableWidget, self).__init__(**kwargs)
    def on_touch_down(self, touch):
        if self.collide_point(touch.x, touch.y):
            self.select()
            return True
        return super(DraggableWidget, self).on_touch_down(touch)
    def select(self):
        if not self.selected:
            self.ix = self.center_x
            self.iy = self.center_y
            with self.canvas:
                self.selected = Line(rectangle =(0,0,self.
width,self.height) , dash_offset = 2)
class StickMan(DraggableWidget):
    pass

จากโค้ดทางด้านบนจะทำให้เราได้กรอบ 4 เหลี่ยมล้อมรอบตัว stickman ที่เรากดลงไปนั่นเองดังรูป