วันพุธที่ 23 กันยายน พ.ศ. 2558

Comic Creator Chapter 2

Comic creator – PushMatrix and PopMatrix

หลังจากที่เราได้สร้าง GUI ไปใน chapter 1 ก็ได้เวลาสร้างตัวละครกันแล้ว
ในส่วนนี้เรายังใช้ RelativeLayout โดยจะเพิ่มไฟล์ใหม่ชื่อว่า comicwidgets.kv ในส่วนของ commiccreator.py ก็ทำการสร้าง Builder ใหม่ตามนี้
     
           Builder.load_file('comicwidgets.kv')

ในส่วนของ commicwidgets.kv

# File name: comicwidgets.kv
#:kivy 1.7.0
<StickMan@RelativeLayout>:
    size_hint: None, None
    size: 48,48
    canvas:
        PushMatrix
        Line:
            circle: 24,38,5
        Line:
            points: 24,33,24,15
        Line:
            points: 14,5,24,15
        Line:
            points: 34,5,24,15
        Translate:
            y: 48-8
        Rotate:
            angle: 180
            axis: 1,0,0
        Line:
            points: 14,5,24,15
        Line:
            points: 34,5,24,15
        PopMatrix

โค้ดนี้จะพูดถึงการสร้าง stickman โดยถ้าต้องการคืนค่าการวาด stickman ของเรา สามารถทำได้โดยใช้ Kivy Instruction 2 ตัวนี้  PushMatrix และ PopMatrix ในตอนแรก เรา PushMatrix มันจะเก็บค่า state ปัจจุบันเอาไว้ จนกว่าเราจะปิดโปรแกรมหรือทำอย่างอื่น หากเราต้องการคืนค่าไป state ก่อนหน้านี้ ให้คลิกที่เดิมอีกที จะเป็นการคืนค่า state เราเรียกว่า PopMatrix

ต่อมาเราทำการเพิ่มรูปร่างให้กับ ToolButton (วงกลม กับ เส้นตรง) ใน ToolBox ททางด้านซ้ายบน ทำการแก้โค้ด toolbox.kv ดังนี้

# File name: toolbox.kv
<ToolButton@ToggleButton>:
    size_hint: None,None
    size: 48,48
    group: 'tool'
    canvas:
        PushMatrix:
        Translate:
            xy: self.x,self.y
    canvas.after:
        PopMatrix:

<ToolBox@GridLayout>:
    cols: 2
    padding: 2
    ToolButton:
        canvas:
            Line:
                circle: 24,24,14
    ToolButton:
        canvas:
            Line:
                points: 10,10,38,38
    ToolButton:
        StickMan:
            pos_hint: {'center_x':.5,'center_y':.5}

ทำการเพิ่มโค้ดในส่วนของ drawingspace.kv

# File name: drawingspace.kv
<DrawingSpace@RelativeLayout>:
    StickMan:
        pos_hint: {'center_x':.5,'center_y':.5}
        canvas.before:
            Translate:
                xy: -self.width/2, -self.height/2
            Scale:
                xyz: 2,2,0
    StickMan:

ผลลัพท์ที่ได้จากการรัน file comiccreator.py


อ้างอิงข้อมูลและรูปภาพจากหนังสือ Kivy : Interactive Applications in Python


ไม่มีความคิดเห็น:

แสดงความคิดเห็น