Home  Contents

Pango

نستكمل استكشافنا ل Pango

Animated text

نعرض نص animated على نافذة

animation.py
 
#!/usr/bin/python

# ZetCode PyGTK tutorial 
#
# This example shows animated text
#
# author: jan bodnar
# website: zetcode.com 
# last edited: February 2009

import gtk
import glib
import pango
import math


class PyApp(gtk.Window): 
    def __init__(self):
        super(PyApp, self).__init__()
        
        self.connect("destroy", gtk.main_quit)
        glib.timeout_add(160, self.on_timer)
        
        self.count = 1
        
        self.set_border_width(10)
        self.set_title("ZetCode")
        
        self.label = gtk.Label("ZetCode")
      
        fontdesc = pango.FontDescription("Serif Bold 30")
        self.label.modify_font(fontdesc)

        vbox = gtk.VBox(False, 0)
        vbox.add(self.label)
        
        self.add(vbox)
        self.set_size_request(300, 250)
        self.set_position(gtk.WIN_POS_CENTER)
        self.show_all()
        
    def on_timer(self):
        attr = pango.AttrList()
        self.count = self.count + 1
                 
        for i in range(7):
            r = pango.AttrRise(int(math.sin(self.count+i)*20)*pango.SCALE, i, i+1)
            attr.insert(r)
                        
        self.label.set_attributes(attr)
        return True
        
         
PyApp()
gtk.main()

فى الكود بالأعلى، لدينا نص على label. وبالتغيير المستمر لسمات pango فيتم عمل animation

 self.label = gtk.Label("ZetCode")
      
 fontdesc = pango.FontDescription("Serif Bold 30")
 self.label.modify_font(fontdesc)

ننشئ ال label ونعدل الخط، نختار خط اكبر لوضوح افضل

 vbox = gtk.VBox(False, 0)
 vbox.add(self.label)

نضع ال label فى صندوق رأسى، مما يضعه فى منتصف النافذة. ويتم عمل ال animation داخل الطريقة on_timer

 for i in range(7):
     r = pango.AttrRise(int(math.sin(self.count+i)*20)*pango.SCALE, i, i+1)
     attr.insert(r)

لدينا 7 حروف، نقوم بتغيير السمة AttrRise دوريا لكل حرف. الrise مبنية على دالة الSin

لاحظ ايضا الثابت pango.SCALE، مكتبة Pango لديها وحداتها الخاصة، تختلف فيما تستخدم فيه كرسم نصوص او جرافيكس. لذا يجب ضرب ارقامنا فيه

Figure: Animated text

Using markup language

نستطيع تغيير السمات بإستخدام لغة ال markup المدمجة

markup.py
 
#!/usr/bin/python

# ZetCode PyGTK tutorial 
#
# This example uses markup language
# to change attributes of the text
#
# author: jan bodnar
# website: zetcode.com 
# last edited: February 2009

import gtk
import pango

quote = "<span foreground='blue' size='19000'>The only victory over love is flight</span>"


class PyApp(gtk.Window): 
    def __init__(self):
        super(PyApp, self).__init__()
        
        self.set_title("Markup")
        self.set_border_width(5)
        self.connect("destroy", gtk.main_quit)
        
        label = gtk.Label()
        label.set_markup(quote)

        vbox = gtk.VBox(False, 0)
        vbox.add(label)
   
        self.add(vbox)
        self.set_position(gtk.WIN_POS_CENTER)
        self.show_all()

PyApp()
gtk.main()

فى المثال، لدينا label.. نقوم بتغير سمات النص الظاهر عليه بإستخدام لغة ال markup

 quote = "<span foreground='blue' size='19000'>The only victory over love is flight</span>"

نص مع لغة ال markup

 label = gtk.Label()
 label.set_markup(quote)

ننشئ ال label ونخزن نص ال markup بإستخدام الطريقة set_markup

Figure: Using markup

Pango layout

مخطط Pango هى كائن يمثل فقرة من نص بسمات

Pango layout is an object representing a paragraph of text with attributes.

layout.py
 
#!/usr/bin/python

# ZetCode PyGTK tutorial 
#
# This example shows pango Layout
# in action
#
# author: jan bodnar
# website: zetcode.com 
# last edited: February 2009


import gtk
import pango


lyrics = """Meet you downstairs in the bar and heard
your rolled up sleeves and your skull t-shirt
You say why did you do it with him today?
and sniff me out like I was Tanqueray

cause you're my fella, my guy
hand me your stella and fly
by the time I'm out the door
you tear men down like Roger Moore

I cheated myself
like I knew I would
I told ya, I was trouble
you know that I'm no good"""

class Area(gtk.DrawingArea):
    def __init__(self):
        super(Area, self).__init__()
        self.modify_bg(gtk.STATE_NORMAL, gtk.gdk.Color(16400, 16400, 16440))
        self.connect("expose_event", self.expose)

    def expose(self, widget, event):
        
        gc = self.get_style().fg_gc[gtk.STATE_NORMAL]
        font_desc = pango.FontDescription('Sans 10')
        
        layout = self.create_pango_layout(lyrics)
        width, height = self.get_size_request()
        
        attr = pango.AttrList()
        
        fg_color = pango.AttrForeground(60535, 60535, 60535, 0, -1)
        attr.insert(fg_color)
        
        layout.set_width(pango.SCALE * self.allocation.width)
        layout.set_spacing(pango.SCALE * 3)
        layout.set_alignment(pango.ALIGN_CENTER)
        layout.set_font_description(font_desc)
        layout.set_attributes(attr)
        
        self.window.draw_layout(gc, 0, 5, layout)
        
        

class PyApp(gtk.Window): 
    def __init__(self):
        super(PyApp, self).__init__()
        
        self.connect("destroy", gtk.main_quit)
        self.set_title("You know I'm no Good")
        
        self.add(Area())
        self.set_size_request(300, 300)
        self.set_position(gtk.WIN_POS_CENTER)
        self.show_all()


PyApp()
gtk.main()

فى المثال السابق، كنا نغير النص فى الويدجات الموجودة، الآن سنرسم نص بإستخدام مخطط Pango على مساحة رسم DrawingArea. سنرسم بإستخدام GDK

 gc = self.get_style().fg_gc[gtk.STATE_NORMAL]

نحصل على سياق الجرافيك لمساحة الرسم

 layout = self.create_pango_layout(lyrics)

ننشئ مخطط Pango

 layout.set_width(pango.SCALE * self.allocation.width)
 layout.set_spacing(pango.SCALE * 3)
 layout.set_alignment(pango.ALIGN_CENTER)
 layout.set_font_description(font_desc)
 layout.set_attributes(attr)

نعدل عرض وازاحة وخط المخطط ونحدد سمات الخط

 self.window.draw_layout(gc, 0, 5, layout)

رسم المخطط على النافذة

Figure: Layout

فى هذا الفصل قمنا بالمزيد من العمل مع Pango

Home ‡ Contents ‡ Top of Page