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.cs
 
using Gtk;
using Cairo;
using System;
 
class SharpApp : Window {
 

    public SharpApp() : base("Simple drawing")
    {
        SetDefaultSize(230, 150);
        SetPosition(WindowPosition.Center);
        DeleteEvent += delegate { Application.Quit(); };;
        
        DrawingArea darea = new DrawingArea();
        darea.ExposeEvent += OnExpose;

        Add(darea);

        ShowAll();
    }

    void OnExpose(object sender, ExposeEventArgs args)
    {
        DrawingArea area = (DrawingArea) sender;
        Cairo.Context cr =  Gdk.CairoHelper.Create(area.GdkWindow);
        
        cr.LineWidth = 9;
        cr.SetSourceRGB(0.7, 0.2, 0.0);
                
        int width, height;
        width = Allocation.Width;
        height = Allocation.Height;

        cr.Translate(width/2, height/2);
        cr.Arc(0, 0, (width < height ? width : height) / 2 - 10, 0, 2*Math.PI);
        cr.StrokePreserve();
        
        cr.SetSourceRGB(0.3, 0.4, 0.6);
        cr.Fill();
         
        ((IDisposable) cr.Target).Dispose();                                      
        ((IDisposable) cr).Dispose();
    }

    public static void Main()
    {
        Application.Init();
        new SharpApp();
        Application.Run();
    }
}

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

gmcs -pkg:gtk-sharp-2.0 -r:/usr/lib/mono/2.0/Mono.Cairo.dll  simple.cs

هذه كيفية ترجمة المثال

 DrawingArea darea = new DrawingArea();

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

 darea.ExposeEvent += OnExpose;

كل الرسم يتم فى معالج حدث ال ExposeEvent وهو الطريقة OnExpose

 DrawingArea area = (DrawingArea) sender;
 Cairo.Context cr =  Gdk.CairoHelper.Create(area.GdkWindow);

ننشئ كائن السياق من الصف Cairo.Context من ال GdkWindow لمنطقة الرسم

 cr.LineWidth = 9;

نحدد عرض الخط ل 9 بكسل

 cr.SetSourceRGB(0.7, 0.2, 0.0);

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

 int width, height;
 width = Allocation.Width;
 height = Allocation.Height;

 cr.Translate(width/2, height/2);

نحصل على عرض وارتفاع منقطة الرسم ونحرك نقطة الأصل لمركز النافذة

 cr.Arc(0, 0, (width < height ? width : height) / 2 - 10, 0, 2*Math.PI);
 cr.StrokePreserve();

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

 cr.SetSourceRGB(0.3, 0.4, 0.6);
 cr.Fill();

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

Simple drawing

Figure: Simple drawing

Basic shapes

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

basicshapes.cs
 
using Gtk;
using Cairo;
using System;
 
class SharpApp : Window {
 

    public SharpApp() : base("Basic shapes")
    {
        SetDefaultSize(390, 240);
        SetPosition(WindowPosition.Center);
        DeleteEvent += delegate { Application.Quit(); };
        
        DrawingArea darea = new DrawingArea();
        darea.ExposeEvent += OnExpose;

        Add(darea);
        ShowAll();
    }

    void OnExpose(object sender, ExposeEventArgs args)
    {
        DrawingArea area = (DrawingArea) sender;
        Cairo.Context cc =  Gdk.CairoHelper.Create(area.GdkWindow);
                
        cc.SetSourceRGB(0.2, 0.23, 0.9);
        cc.LineWidth = 1;

        cc.Rectangle(20, 20, 120, 80);
        cc.Rectangle(180, 20, 80, 80);
        cc.StrokePreserve();
        cc.SetSourceRGB(1, 1, 1);
        cc.Fill();

        cc.SetSourceRGB(0.2, 0.23, 0.9);
        cc.Arc(330, 60, 40, 0, 2*Math.PI);
        cc.StrokePreserve();
        cc.SetSourceRGB(1, 1, 1);
        cc.Fill();

        cc.SetSourceRGB(0.2, 0.23, 0.9);
        cc.Arc(90, 160, 40, Math.PI/4, Math.PI);
        cc.ClosePath();
        cc.StrokePreserve();
        cc.SetSourceRGB(1, 1, 1);
        cc.Fill();

        cc.SetSourceRGB(0.2, 0.23, 0.9);
        cc.Translate(220, 180);
        cc.Scale(1, 0.7);        
        cc.Arc(0, 0, 50, 0, 2*Math.PI);
        cc.StrokePreserve();
        cc.SetSourceRGB(1, 1, 1);
        cc.Fill();          

        ((IDisposable) cc.Target).Dispose ();                                      
        ((IDisposable) cc).Dispose ();
    }

    public static void Main()
    {
        Application.Init();
        new SharpApp();
        Application.Run();
    }
}

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

 cc.Rectangle(20, 20, 120, 80);
 cc.Rectangle(180, 20, 80, 80);
 cc.StrokePreserve();
 cc.SetSourceRGB(1, 1, 1);
 cc.Fill();

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

 cc.Arc(330, 60, 40, 0, 2*Math.PI);

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

 cc.Scale(1, 0.7);        
 cc.Arc(0, 0, 50, 0, 2*Math.PI);

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

Basic shapes

Figure: Basic shapes

Colors

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

colors.cs
 
using Gtk;
using Cairo;
using System;
 
class SharpApp : Window {
 

    public SharpApp() : base("Colors")
    {
        SetDefaultSize(360, 100);
        SetPosition(WindowPosition.Center);
        DeleteEvent += delegate { Application.Quit(); };
        
        DrawingArea darea = new DrawingArea();
        darea.ExposeEvent += OnExpose;

        Add(darea);

        ShowAll();
    }

    void OnExpose(object sender, ExposeEventArgs args)
    {
        DrawingArea area = (DrawingArea) sender;
        Cairo.Context cr =  Gdk.CairoHelper.Create(area.GdkWindow);
                
        cr.SetSourceRGB(0.2, 0.23, 0.9);
        cr.Rectangle(10, 15, 90, 60);
        cr.Fill();
         
        cr.SetSourceRGB(0.9, 0.1, 0.1);
        cr.Rectangle(130, 15, 90, 60);
        cr.Fill();

        cr.SetSourceRGB(0.4, 0.9, 0.4);
        cr.Rectangle(250, 15, 90, 60);
        cr.Fill();

        ((IDisposable) cr.Target).Dispose();                                      
        ((IDisposable) cr).Dispose();
    }

    public static void Main()
    {
        Application.Init();
        new SharpApp();
        Application.Run();
    }
}

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

 cr.SetSourceRGB(0.2, 0.23, 0.9);

نحدد اللون لكائن السياق الخاص بكايرو بإستخدام الطريقة SetSourceRGB والمعاملات ال 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.cs

using Gtk;
using Cairo;
using System;
 

class SharpApp : Window {
 

    public SharpApp() : base("Transparent rectangles")
    {
        SetDefaultSize(590, 90);
        SetPosition(WindowPosition.Center);
        DeleteEvent += delegate { Application.Quit(); } ;
        
        DrawingArea darea = new DrawingArea();
        darea.ExposeEvent += OnExpose;

        Add(darea);

        ShowAll();
    }

    void OnExpose(object sender, ExposeEventArgs args)
    {
        DrawingArea area = (DrawingArea) sender;
        Cairo.Context cr =  Gdk.CairoHelper.Create(area.GdkWindow);

        for ( int i = 1; i <= 10; i++) {
            cr.SetSourceRGBA(0, 0, 1, i*0.1);
            cr.Rectangle(50*i, 20, 40, 40);
            cr.Fill();  
        }

        ((IDisposable) cr.Target).Dispose();                                      
        ((IDisposable) cr).Dispose();
    }

    public static void Main()
    {
        Application.Init();
        new SharpApp();
        Application.Run();
    }
}

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

 cr.SetSourceRGBA(0, 0, 1, i*0.1);

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

Transparent rectangles

Figure: Transparent rectangles

Soulmate

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

soulmate.cs

using Gtk;
using Cairo;
using System;
 
class SharpApp : Window {
 

    public SharpApp() : base("Soulmate")
    {
        SetDefaultSize(420, 250);
        SetPosition(WindowPosition.Center);
        DeleteEvent += delegate { Application.Quit(); };
        
        DrawingArea darea = new DrawingArea();
        darea.ExposeEvent += OnExpose;

        Add(darea);

        ShowAll();
    }

    void OnExpose(object sender, ExposeEventArgs args)
    {
        DrawingArea area = (DrawingArea) sender;
        Cairo.Context cr =  Gdk.CairoHelper.Create(area.GdkWindow);
        
        cr.SetSourceRGB(0.1, 0.1, 0.1);
         
        cr.SelectFontFace("Purisa", FontSlant.Normal, FontWeight.Bold);
        cr.SetFontSize(13);
       
        cr.MoveTo(20, 30);
        cr.ShowText("Most relationships seem so transitory");
        cr.MoveTo(20, 60);
        cr.ShowText("They're all good but not the permanent one");
        cr.MoveTo(20, 120);
        cr.ShowText("Who doesn't long for someone to hold");
        cr.MoveTo(20, 150);
        cr.ShowText("Who knows how to love without being told");
        cr.MoveTo(20, 180);
        cr.ShowText("Somebody tell me why I'm on my own");
        cr.MoveTo(20, 210);
        cr.ShowText("If there's a soulmate for everyone");

        ((IDisposable) cr.Target).Dispose();                                      
        ((IDisposable) cr).Dispose();
    }

    public static void Main()
    {
        Application.Init();
        new SharpApp();
        Application.Run();
    }
}

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

 cr.SelectFontFace("Purisa", FontSlant.Normal, FontWeight.Bold);

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

 cr.SetFontSize(13);

حددنا حجم الخط

 cr.MoveTo(20, 30);

ننتقل للنقطة التى نريد الرسم عندها

 cr.ShowText("Most relationships seem so transitory");

الطريقة ShowText تستخدم لرسم نص ما على النافذة
Soulmate

Figure: Soulmate

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

Home Contents Top of Page