Drawing with Cairo

فى هذه الجزئية سنقوم بعمل بعض الرسم مع المكتبة Cairo كايرو

Cairo is a library for creating 2D vector graphics. We can use it to draw our own widgets, charts or various effects or animations.

Simple drawing

التطبيق يشمل عمليه تحديد الشكل الخارجى وملئه من الداخل

simpledrawing.py
 
#!/usr/bin/python

# ZetCode PyGTK tutorial 
#
# This code example draws a circle
# using the cairo library
#
# author: jan bodnar
# website: zetcode.com 
# last edited: February 2009


import gtk
import math

class PyApp(gtk.Window):

    def __init__(self):
        super(PyApp, self).__init__()

        self.set_title("Simple drawing")
        self.resize(230, 150)
        self.set_position(gtk.WIN_POS_CENTER)

        self.connect("destroy", gtk.main_quit)

        darea = gtk.DrawingArea()
        darea.connect("expose-event", self.expose)
        self.add(darea)

        self.show_all()
    
    def expose(self, widget, event):

        cr = widget.window.cairo_create()

        cr.set_line_width(9)
        cr.set_source_rgb(0.7, 0.2, 0.0)
                
        w = self.allocation.width
        h = self.allocation.height

        cr.translate(w/2, h/2)
        cr.arc(0, 0, 50, 0, 2*math.pi)
        cr.stroke_preserve()
        
        cr.set_source_rgb(0.3, 0.4, 0.6)
        cr.fill()
    

PyApp()
gtk.main()

فى المثال التالى سنرسم دائرة ونملئها بلون

 darea = gtk.DrawingArea()

نقوم بعمليات الرسم داخل مساحة رسم DrawingArea

 darea.connect("expose-event", self.expose)

كل الرسم يتم فى معالج expose-event

 cr = widget.window.cairo_create()

ننشئ كائن السياق من الصف Cairo.Context

 cr.set_line_width(9)

نحدد عرض الخط

 cr.set_source_rgb(0.7, 0.2, 0.0)

نحدد اللون للأحمر الغامق

 w = self.allocation.width
 h = self.allocation.height

 cr.translate(w/2, h/2)

نحصل على عرض وارتفاع مساحة الرسم، وننقل نقطة الأصل لمنتصفها

 cr.arc(0, 0, 50, 0, 2*math.pi)
 cr.stroke_preserve()

نرسم الحدود الخارجية للدائرة عن.. الطريقة stroke_preserve ترسم المسار بناءا على العرض وجامع السطر واعدادات الdash بعكس الطريقة Stroke اللتى تحفظ المسار فى داخل سياق كايرو

 cr.set_source_rgb(0.3, 0.4, 0.6)
 cr.fill()

نملء الدائرة باللون الأزرق

Simple drawing

Figure: Simple drawing

Basic shapes

فى المثال التالى سنقوم برسم بعض الأشكال الأساسية

basicshapes.py
 
#!/usr/bin/python

# ZetCode PyGTK tutorial 
#
# This code example draws basic shapes
# with the cairo library
#
# author: jan bodnar
# website: zetcode.com 
# last edited: February 2009

import gtk
import math

class PyApp(gtk.Window):

    def __init__(self):
        super(PyApp, self).__init__()
        
        self.set_title("Basic shapes")
        self.set_size_request(390, 240)
        self.set_position(gtk.WIN_POS_CENTER)

        self.connect("destroy", gtk.main_quit)

        darea = gtk.DrawingArea()
        darea.connect("expose-event", self.expose)
        self.add(darea)
        
        self.show_all()
    
    def expose(self, widget, event):

        cr = widget.window.cairo_create()
        cr.set_source_rgb(0.6, 0.6, 0.6)

        cr.rectangle(20, 20, 120, 80)
        cr.rectangle(180, 20, 80, 80)
        cr.fill()

        cr.arc(330, 60, 40, 0, 2*math.pi)
        cr.fill()
        
        cr.arc(90, 160, 40, math.pi/4, math.pi)
        cr.fill()

        cr.translate(220, 180)
        cr.scale(1, 0.7)
        cr.arc(0, 0, 50, 0, 2*math.pi)
        cr.fill()
    

PyApp()
gtk.main()

فى هذا المثال، سننشئ مستطيل ومربع ودائرة وقوس وقطع ناقص سنرسم الحدود بالأزرق والداخل بالأبيض

 cr.rectangle(20, 20, 120, 80)
 cr.rectangle(180, 20, 80, 80)
 cr.fill()

هذه الأسطر ترسم المستطيل والمربع.

 cr.arc(330, 60, 40, 0, 2*math.pi)
 cr.fill()

الطريقة arc ترسم الدائرة

 cr.scale(1, 0.7)
 cr.arc(0, 0, 50, 0, 2*math.pi)
 cr.fill()

اذا اردنا رسم شكل بيضاوى.. يجب علينا القيام بعمل Scaling اولا ، حيث تقوم الطريقة scale هنا بتقليص محور ص

Basic shapes

Figure: Basic shapes

Colors

اللون هو كائن يمثل تجميعة من الأحمر والأخضر والأزرق RGB القيم المسموحة بين الفترة 0 و 1

colors.py
 
#!/usr/bin/python

# ZetCode PyGTK tutorial 
#
# This program shows how to work
# with colors in cairo
#
# author: jan bodnar
# website: zetcode.com 
# last edited: February 2009


import gtk

class PyApp(gtk.Window):

    def __init__(self):
        super(PyApp, self).__init__()
        
        self.set_title("Colors")
        self.resize(360, 100)
        self.set_position(gtk.WIN_POS_CENTER)

        self.connect("destroy", gtk.main_quit)

        darea = gtk.DrawingArea()
        darea.connect("expose-event", self.expose)
        self.add(darea)
        
        self.show_all()
    
    def expose(self, widget, event):

        cr = widget.window.cairo_create()

        cr.set_source_rgb(0.2, 0.23, 0.9)
        cr.rectangle(10, 15, 90, 60)
        cr.fill()
         
        cr.set_source_rgb(0.9, 0.1, 0.1)
        cr.rectangle(130, 15, 90, 60)
        cr.fill()

        cr.set_source_rgb(0.4, 0.9, 0.4)
        cr.rectangle(250, 15, 90, 60)
        cr.fill()

PyApp()
gtk.main()

نرسم 3 مستطيلات ب 3 الوان مختلفة

 cr.set_source_rgb(0.2, 0.23, 0.9)

نحدد اللون لكائن السياق الخاص بكايرو بإستخدام الطريقة set_source_rgb والمعاملات ال 3 هى قيم الاحمر والأخضر والأزرق

 cr.rectangle(10, 15, 90, 60)
 cr.fill()

ننشئ شكل مستطيل ونملئه باللون السابق

Colors

Figure: Colors

Transparent rectangles

Transparency is the quality of being able to see through a material. The easiest way to understand transparency is to imagine a piece of glass or water. Technically, the rays of light can go through the glass and this way we can see objects behind the glass.

In computer graphics, we can achieve transparency effects using alpha compositing. Alpha compositing is the process of combining an image with a background to create the appearance of partial transparency. The composition process uses an alpha channel. (wikipedia.org, answers.com)

transparentrectangles.py

#!/usr/bin/python

# ZetCode PyGTK tutorial 
#
# This program shows transparent
# rectangles using cairo
#
# author: jan bodnar
# website: zetcode.com 
# last edited: February 2009


import gtk

class PyApp(gtk.Window):

    def __init__(self):
        super(PyApp, self).__init__()
        
        self.set_title("Transparent rectangles")
        self.resize(590, 90)
        self.set_position(gtk.WIN_POS_CENTER)

        self.connect("destroy", gtk.main_quit)

        darea = gtk.DrawingArea()
        darea.connect("expose-event", self.expose)
        self.add(darea)
        
        self.show_all()
    
    def expose(self, widget, event):

        cr = widget.window.cairo_create()

        for i in range(1, 11):
            cr.set_source_rgba(0, 0, 1, i*0.1)
            cr.rectangle(50*i, 20, 40, 40)
            cr.fill()


PyApp()
gtk.main()

In the example we will draw ten rectangles with different levels of transparency.

 cr.set_source_rgba(0, 0, 1, i*0.1)

The last parameter of the set_source_rgba() method is the alpha transparency.

Transparent rectangles

Figure: Transparent rectangles

Soulmate

فى التالى سنرسم بعض النص على النافذة

soulmate.py

#!/usr/bin/python

# ZetCode PyGTK tutorial 
#
# This program shows transparent
# rectangles using cairo
#
# author: jan bodnar
# website: zetcode.com 
# last edited: February 2009


import gtk
import cairo

class PyApp(gtk.Window):

    def __init__(self):
        super(PyApp, self).__init__()
        
        self.set_title("Soulmate")
        self.set_size_request(370, 240)
        self.set_position(gtk.WIN_POS_CENTER)

        self.connect("destroy", gtk.main_quit)

        darea = gtk.DrawingArea()
        darea.connect("expose-event", self.expose)
        self.add(darea)
        
        self.show_all()
    
    def expose(self, widget, event):

        cr = widget.window.cairo_create()

        cr.set_source_rgb(0.1, 0.1, 0.1)
         
        cr.select_font_face("Purisa", cairo.FONT_SLANT_NORMAL, 
            cairo.FONT_WEIGHT_NORMAL)
        cr.set_font_size(13)
       
        cr.move_to(20, 30)
        cr.show_text("Most relationships seem so transitory")
        cr.move_to(20, 60)
        cr.show_text("They're all good but not the permanent one")
        cr.move_to(20, 120)
        cr.show_text("Who doesn't long for someone to hold")
        cr.move_to(20, 150)
        cr.show_text("Who knows how to love without being told")
        cr.move_to(20, 180)
        cr.show_text("Somebody tell me why I'm on my own")
        cr.move_to(20, 210)
        cr.show_text("If there's a soulmate for everyone")
        

PyApp()
gtk.main()

هنا عرضنا جزء كلمات اغنية soulmate ل Natasha Bedingfields

  cr.select_font_face("Purisa", cairo.FONT_SLANT_NORMAL, 
      cairo.FONT_WEIGHT_NORMAL)

هنا حددنا الخط واستخدمنا Pursia bold

 cr.set_font_size(13)

نحدد حجم الخط

 cr.move_to(20, 30)

ننتقل الى النقطة حيث نرسم النص

 cr.show_text("Most relationships seem so transitory")

الطريقة show_text ترسم النص

Soulmate

Figure: Soulmate

فى هذا الفصل قمنا بعمل بعض الرسوميات بإستخدام كايرو

Home Contents Top of Page