>> الصفحة الرئيسية >> مقالات ZetCode >> [9] الرسم في Qt4

الأقسام الرئيسية
 التنصيب والاعداد التنصيب والاعداد
 دروس متقدمة دروس متقدمة
 سلسلة دروس للمبتدئين سلسلة دروس للمبتدئين
 اساسيات لغة سي++ اساسيات لغة سي++
 مقالات ZetCode مقالات ZetCode
 

جديد الدروس
 الوحدة QtUiTools (واجهة المستخدم ديناميكية التوليد) التاريخ 04/07/2009 الوحدة QtUiTools (واجهة المستخدم ديناميكية التوليد)
 Qt and Phonon التاريخ 04/07/2009 Qt and Phonon
 تتمة الرسائل ومربعات الحوار في qt التاريخ 04/07/2009 تتمة الرسائل ومربعات الحوار في qt
 مدخل الى xml في Qt التاريخ 04/07/2009 مدخل الى xml في Qt
 الإدخال والإخراج لبيانات الفئات التاريخ 04/07/2009 الإدخال والإخراج لبيانات الفئات
 

[9] الرسم في Qt4

في هذا الجزء من سلسلة دروس Qt4 سوف نقوم بعمل بعض الرسومات .

متى نحتاج للرسم؟هناك حالات متى أردت انشاء widget من البداية أو رسم مخططات أو حتى صناعة تأثيرات لل widgets ففي جميع هذه الحالات أنت بحاجة الى أن ترسم بإستخدام Qt4 .
إن الفئة Qpainter تعتبر صاحبة الدور الريادي الأكبر للرسم في مكتبة Qt4 , والرسم يكون بواسطة الفئة Qpainter داخل الدالة paintEvent() (في حالى الرسم على widget) .

رسم الخطوط المستقيمة :-
في المثال الأول سوف نرسم بعض الخطوط المستقيمة في مساحة النافذة :-
lines.h

  1. #ifndef LINES_H
  2. #define LINES_H
  3.  
  4. #include <QWidget>
  5.  
  6. class Lines : public QWidget
  7. {
  8.   Q_OBJECT  
  9.  
  10.   public:
  11.     Lines(QWidget *parent = 0);
  12.  
  13.   protected:
  14.     void paintEvent(QPaintEvent *event);
  15.  
  16. };
  17.  
  18. #endif
  19. The header file.
  20.  
  21. lines.cpp
  22.  
  23. #include "lines.h"
  24. #include <QApplication>
  25. #include <QPainter>
  26.  
  27.  
  28. Lines::Lines(QWidget *parent)
  29.     : QWidget(parent)
  30. {
  31.  
  32. }
  33.  
  34. void Lines::paintEvent(QPaintEvent *event)
  35. {
  36.  
  37.   QPen pen(Qt::black, 2, Qt::SolidLine);
  38.  
  39.   QPainter painter(this);
  40.  
  41.   painter.setPen(pen);
  42.   painter.drawLine(20, 40, 250, 40);
  43.  
  44.   pen.setStyle(Qt::DashLine);
  45.   painter.setPen(pen);
  46.   painter.drawLine(20, 80, 250, 80);
  47.  
  48.   pen.setStyle(Qt::DashDotLine);
  49.   painter.setPen(pen);
  50.   painter.drawLine(20, 120, 250, 120);
  51.  
  52.   pen.setStyle(Qt::DotLine);
  53.   painter.setPen(pen);
  54.   painter.drawLine(20, 160, 250, 160);
  55.  
  56.   pen.setStyle(Qt::DashDotDotLine);
  57.   painter.setPen(pen);
  58.   painter.drawLine(20, 200, 250, 200);
  59.  
  60.  
  61.   QVector<qreal> dashes;
  62.   qreal space = 4;
  63.  
  64.   dashes << 1 << space << 5 << space;
  65.  
  66.   pen.setStyle(Qt::CustomDashLine);
  67.   pen.setDashPattern(dashes);
  68.   painter.setPen(pen);
  69.   painter.drawLine(20, 240, 250, 240);
  70. }


لقد قمنا برسم 6 خطوط مستقيمة مختلفة على النافذة .
QPen pen(Qt::black, 2, Qt::SolidLine);
لقد قمنا بإنشاء الكائن QPen حيث أن القلم يكون متصل "solideLine" وسمكه 2 بكسل ولونه أسود . ويستخدم القلم في رسم الخطوط والحدود الخارجية للأشكال .
QPainter painter(this);
قمنا بغنشاء كائن الرسم الرئيسي QPainter .
painter.drawLine(20, 40, 250, 40);
هنا قمنا برسم أول خط مستقيم حيث أن الوسطاء الأربعة للدالة drawLine يحددون إحداثيات النقطتين على النافذة "النقطة المطرفة في أعلى يسار النافذة هي (0,0)" .
pen.setStyle(Qt::DashLine);
تقوم هذه الشيفرة بوضع شكل(style) مختلف للقلم .

main.cpp

  1. #include "lines.h"
  2. #include <QDesktopWidget>
  3. #include <QApplication>
  4.  
  5. void center(QWidget &widget)
  6. {
  7.   int x, y;
  8.   int screenWidth;
  9.   int screenHeight;
  10.  
  11.   int WIDTH = 280;
  12.   int HEIGHT = 270;
  13.  
  14.  
  15.   QDesktopWidget *desktop = QApplication::desktop();
  16.  
  17.   screenWidth = desktop->width();
  18.   screenHeight = desktop->height();
  19.  
  20.   x = (screenWidth - WIDTH) / 2;
  21.   y = (screenHeight - HEIGHT) / 2;
  22.  
  23.   widget.setGeometry(x, y, WIDTH, HEIGHT);
  24. }
  25.  
  26. int main(int argc, char *argv[])
  27. {
  28.   QApplication app(argc, argv);  
  29.   Lines window;
  30.   window.setWindowTitle("Lines");
  31.   window.show();
  32.   center(window);
  33.   return app.exec();
  34. }

Main file.



الألوان :
اللون هو كائن يمثله كل من الأحمر والأخضر والأزرق أو مايسمى نظام الألوان RGB ويمثل كل من الألوان الثلاثة أرقام بحيث تكون من 0 الى 255 في هذا المثال سوف نقوم برسم 9 مربعات ب9 الوان مختلفة :-
colors.h

  1. #ifndef COLORS_H
  2. #define COLORS_H
  3.  
  4. #include <QWidget>
  5.  
  6. class Colors : public QWidget
  7. {
  8.   public:
  9.     Colors(QWidget *parent = 0);
  10.  
  11.   protected:
  12.     void paintEvent(QPaintEvent *event);
  13.  
  14. };
  15.  
  16. #endif
  17. Header file. 
  18. colors.cpp
  19.  
  20. #include "colors.h"
  21. #include <QApplication>
  22. #include <QPainter>
  23.  
  24.  
  25. Colors::Colors(QWidget *parent)
  26.     : QWidget(parent)
  27. {
  28.  
  29. }
  30.  
  31. void Colors::paintEvent(QPaintEvent *event)
  32. {
  33.   QPainter painter(this);
  34.   painter.setPen(QColor("#d4d4d4"));
  35.  
  36.   painter.setBrush(QBrush("#c56c00"));
  37.   painter.drawRect(10, 15, 90, 60);
  38.  
  39.   painter.setBrush(QBrush("#1ac500"));
  40.   painter.drawRect(130, 15, 90, 60);
  41.  
  42.   painter.setBrush(QBrush("#539e47"));
  43.   painter.drawRect(250, 15, 90, 60);
  44.  
  45.   painter.setBrush(QBrush("#004fc5"));
  46.   painter.drawRect(10, 105, 90, 60);
  47.  
  48.   painter.setBrush(QBrush("#c50024"));
  49.   painter.drawRect(130, 105, 90, 60);
  50.  
  51.   painter.setBrush(QBrush("#9e4757"));
  52.   painter.drawRect(250, 105, 90, 60);
  53.  
  54.   painter.setBrush(QBrush("#5f3b00"));
  55.   painter.drawRect(10, 195, 90, 60);
  56.  
  57.   painter.setBrush(QBrush("#4c4c4c"));
  58.   painter.drawRect(130, 195, 90, 60);
  59.  
  60.   painter.setBrush(QBrush("#785f36"));
  61.   painter.drawRect(250, 195, 90, 60);
  62.  
  63. }


لقد رسمنا تسعة مستطيلات بألوان مختلفة وألوان حدودها هو الرمادي.
  1. painter.setBrush(QBrush("#c56c00"));
  2.  painter.drawRect(10, 15, 90, 60);

الفئة QBrush تستخدم لتلوين الأشكال المرسوم بواسطة QPainter و الدالة drawRect تستخدم لرسم المستطسلات حيث أول وسيطين عبارة عن احداثيات النقطة في الركن الأيسر الأعلى من المستطيل ويعبر كل من الوسيط الثالث والرابع عن عرض وارتفاع المستطيل وفي دالة البناء للفئة QBrush عبرنا عن النظام RGB بأرقام بظام الستةعشر.

main.cpp

  1. #include "colors.h"
  2. #include <QDesktopWidget>
  3. #include <QApplication>
  4.  
  5. void center(QWidget &widget)
  6. {
  7.   int x, y;
  8.   int screenWidth;
  9.   int screenHeight;
  10.  
  11.   int WIDTH = 350;
  12.   int HEIGHT = 280;
  13.  
  14.   QDesktopWidget *desktop = QApplication::desktop();
  15.  
  16.   screenWidth = desktop->width();
  17.   screenHeight = desktop->height();
  18.  
  19.   x = (screenWidth - WIDTH) / 2;
  20.   y = (screenHeight - HEIGHT) / 2;
  21.  
  22.   widget.setGeometry(x, y, WIDTH, HEIGHT);
  23.   widget.setFixedSize(WIDTH, HEIGHT);
  24. }
  25.  
  26.  
  27. int main(int argc, char *argv[])
  28. {
  29.   QApplication app(argc, argv);
  30.  
  31.   Colors window;
  32.  
  33.   window.setWindowTitle("Colors");
  34.   window.show();
  35.   center(window);
  36.  
  37.   return app.exec();
  38. }


Main file.




أنماط الصبغ:-
إن الشيفرة المصدرية لهذا المثال سوف تكون مشابهة للمثال السابق ولكن هذه المرة سوف نقوم بصبغ المستطيلات بأنماط صبغ جاهزة توفرها لنا Qt4 :-
brushes.h

  1. #ifndef BRUSHES_H
  2. #define BRUSHES_H
  3.  
  4. #include <QWidget>
  5.  
  6. class Brushes : public QWidget
  7. {
  8.   Q_OBJECT  
  9.  
  10.   public:
  11.     Brushes(QWidget *parent = 0);
  12.  
  13.   protected:
  14.     void paintEvent(QPaintEvent *event);
  15.  
  16. };
  17.  
  18. #endif

Header file.
brushes.cpp

  1. #include "brushes.h"
  2. #include <QApplication>
  3. #include <QPainter>
  4.  
  5.  
  6. Brushes::Brushes(QWidget *parent)
  7.     : QWidget(parent)
  8. {
  9.  
  10. }
  11.  
  12. void Brushes::paintEvent(QPaintEvent *event)
  13. {
  14.   QPainter painter(this);
  15.   painter.setPen(Qt::NoPen);
  16.  
  17.   painter.setBrush(Qt::HorPattern);
  18.   painter.drawRect(10, 15, 90, 60);
  19.  
  20.   painter.setBrush(Qt::VerPattern);
  21.   painter.drawRect(130, 15, 90, 60);
  22.  
  23.   painter.setBrush(Qt::CrossPattern);
  24.   painter.drawRect(250, 15, 90, 60);
  25.  
  26.   painter.setBrush(Qt::Dense7Pattern);
  27.   painter.drawRect(10, 105, 90, 60);
  28.  
  29.   painter.setBrush(Qt::Dense6Pattern);
  30.   painter.drawRect(130, 105, 90, 60);
  31.  
  32.   painter.setBrush(Qt::Dense5Pattern);
  33.   painter.drawRect(250, 105, 90, 60);
  34.  
  35.   painter.setBrush(Qt::BDiagPattern);
  36.   painter.drawRect(10, 195, 90, 60);
  37.  
  38.   painter.setBrush(Qt::FDiagPattern);
  39.   painter.drawRect(130, 195, 90, 60);
  40.  
  41.   painter.setBrush(Qt::DiagCrossPattern);
  42.   painter.drawRect(250, 195, 90, 60);
  43.  
  44. }


لقد قمنا برسم تسعة مستطيلات بفرش أنماط صبغ مختلفة 
  1.  painter.setBrush(Qt::HorPattern);
  2.   painter.drawRect(10, 15, 90, 60);

لقد قمنا برسم مستطيل وصبغه بنمط خاص حيث أن Qt::HorPattern ثابت يقوم بتحديد نمط الصبغ بالخطوط الأفقية .
main.cpp

  1. #include "brushes.h"
  2. #include <QDesktopWidget>
  3. #include <QApplication>
  4.  
  5. void center(QWidget &widget)
  6. {
  7.   int x, y;
  8.   int screenWidth;
  9.   int screenHeight;
  10.  
  11.   int WIDTH = 350;
  12.   int HEIGHT = 280;
  13.  
  14.  
  15.   QDesktopWidget *desktop = QApplication::desktop();
  16.  
  17.   screenWidth = desktop->width();
  18.   screenHeight = desktop->height();
  19.  
  20.   x = (screenWidth - WIDTH) / 2;
  21.   y = (screenHeight - HEIGHT) / 2;
  22.  
  23.   widget.setGeometry(x, y, WIDTH, HEIGHT);
  24.   widget.setFixedSize(WIDTH, HEIGHT);
  25. }
  26.  
  27.  
  28. int main(int argc, char *argv[])
  29. {
  30.   QApplication app(argc, argv); 
  31.  
  32.   Brushes window;
  33.  
  34.   window.setWindowTitle("Brushes");
  35.   window.show();
  36.   center(window);
  37.  
  38.   return app.exec();
  39. }
Main file.

Figure: أنماط الصبغ
الدونة :
في هذا المثال سوف نقوم برسم الدونة معتمدين على الدوال التي توفرها لنا مكتبة Qt4 :
donut.h

  1. #ifndef DONUT_H
  2. #define DONUT_H
  3.  
  4. #include <QWidget>
  5.  
  6. class Donut : public QWidget
  7. {
  8.   Q_OBJECT  
  9.  
  10.   public:
  11.     Donut(QWidget *parent = 0);
  12.  
  13.   protected:
  14.     void paintEvent(QPaintEvent *event);
  15.  
  16. };
  17.  
  18. #endif

Header file.
donut.cpp

  1. #include "donut.h"
  2. #include <QApplication>
  3. #include <QPainter>
  4.  
  5.  
  6. Donut::Donut(QWidget *parent)
  7.     : QWidget(parent)
  8. {
  9.  
  10. }
  11.  
  12. void Donut::paintEvent(QPaintEvent *event)
  13. {
  14.   QPainter painter(this);
  15.  
  16.   painter.setPen(QPen(QBrush("#535353"), 0.5));
  17.  
  18.   painter.setRenderHint(QPainter::Antialiasing);
  19.  
  20.   int h = height();
  21.   int w = width();
  22.  
  23.   painter.translate(QPoint(w/2, h/2));
  24.  
  25.   for (qreal rot=0; rot < 360.0; rot+=5.0 ) {
  26.       painter.drawEllipse(-125, -40, 250, 80);
  27.       painter.rotate(5.0);
  28.   }
  29. }

الدونة هو عبارة عن شكل هندسي متقدم وهو يذكرك بخبز الدونة (الخبز المحلى ) ولقد قمنا بإنشائة برسم 72 من القطع الناقص كل منها ملتف بزاوية مختلفة وجميعها لها نفس المركز .
painter.setRenderHint(QPainter::Antialiasing);
سوف نرسم بإستخدام نمط Antialiasing حيث تكون الرسومات أكثر جودة .
  1. int h = height();
  2.  int w = width();


  1.  painter.translate(QPoint(w/2, h/2));
قمنا بتحريك مركز تقاطع محوري س و ص الى منتصف لنافذة حيث يصبح منتصف النافذة هي النقطة (0,0) بدلا من الركن الأعلى الأيسر وذلك عن طريق تحريك نظام الإحداثيات بإستخدام الدالة translate .
  1. for (qreal rot=0; rot < 360.0; rot+=5.0 ) {
  2.      painter.drawEllipse(-125, -40, 250, 80);
  3.      painter.rotate(5.0);
  4.  }

في عملية التكرار هذه قمنا برسم 72 قطع ناقص مع تغيير زاوية الميل في كل مرة .
main.cpp

  1. #include "donut.h"
  2. #include <QDesktopWidget>
  3. #include <QApplication>
  4.  
  5. void center(QWidget &widget)
  6. {
  7.   int x, y;
  8.   int screenWidth;
  9.   int screenHeight;
  10.  
  11.   int WIDTH = 350;
  12.   int HEIGHT = 280;
  13.  
  14.   QDesktopWidget *desktop = QApplication::desktop();
  15.  
  16.   screenWidth = desktop->width();
  17.   screenHeight = desktop->height();
  18.  
  19.   x = (screenWidth - WIDTH) / 2;
  20.   y = (screenHeight - HEIGHT) / 2;
  21.  
  22.   widget.setGeometry(x, y, WIDTH, HEIGHT);
  23. }
  24.  
  25. int main(int argc, char *argv[])
  26. {
  27.   QApplication app(argc, argv);  
  28.  
  29.   Donut window;
  30.  
  31.   window.setWindowTitle("Donut");
  32.   window.show();
  33.   center(window);
  34.  
  35.   return app.exec();
  36. }

Main file.

Figure: دونة
رسم الأشكال :-
وفرت لك مكتبة Qt4 العديد من الدوال والفئات لرسم أشكال مختلفة وفي هذا المثال سوف نتعرف على البعض منها
shapes.h

  1. #ifndef SHAPES_H
  2. #define SHAPES_H
  3.  
  4. #include <QWidget>
  5.  
  6. class Shapes : public QWidget
  7. {
  8.   Q_OBJECT  
  9.  
  10.   public:
  11.     Shapes(QWidget *parent = 0);
  12.  
  13.   protected:
  14.     void paintEvent(QPaintEvent *event);
  15.  
  16. };
  17.  
  18. #endif

Header file.
shapes.cpp

  1. #include "shapes.h"
  2. #include <QApplication>
  3. #include <QPainter>
  4. #include <QPainterPath>
  5.  
  6.  
  7. Shapes::Shapes(QWidget *parent)
  8.     : QWidget(parent)
  9. {
  10.  
  11. }
  12.  
  13. void Shapes::paintEvent(QPaintEvent *event)
  14. {
  15.   QPainter painter(this);
  16.  
  17.   painter.setRenderHint(QPainter::Antialiasing);
  18.   painter.setPen(QPen(QBrush("#575555"), 1));
  19.  
  20.   QPainterPath path1;
  21.  
  22.   path1.moveTo(5, 5);
  23.   path1.cubicTo(40, 5,  50, 50,  99, 99);
  24.   path1.cubicTo(5, 99,  50, 50,  5, 5);
  25.   painter.drawPath(path1);  
  26.  
  27.   painter.drawPie(130, 20, 90, 60, 30*16, 120*16);
  28.   painter.drawChord(240, 30, 90, 60, 0, 16*180);
  29.   painter.drawRoundRect(20, 120, 80, 50);
  30.  
  31.   QPolygon polygon;
  32.   polygon << QPoint(130, 140) << QPoint(180, 170)
  33.           << QPoint(180, 140) << QPoint(220, 110)
  34.           << QPoint(140, 100);
  35.   painter.drawPolygon(polygon);
  36.  
  37.   painter.drawRect(250, 110, 60, 60);
  38.  
  39.   QPointF baseline(20, 250);
  40.   QFont font("Georgia", 55);
  41.   QPainterPath path2;
  42.   path2.addText(baseline, font, "Q");
  43.   painter.drawPath(path2);
  44.  
  45.   painter.drawEllipse(140, 200, 60, 60);
  46.   painter.drawEllipse(240, 200, 90, 60);
  47. }

لقد قمنا برسم 9 أشكال مختلفة 
  2.  path1.moveTo(5, 5);
  3.  path1.cubicTo(40, 5,  50, 50,  99, 99);
  4.  path1.cubicTo(5, 99,  50, 50,  5, 5);
  5.  painter.drawPath(path1);

الفئة QPaintPath تستخد لرسم الأشكال المعقدة واستخدمناها هنا لرسم منحنيات بزير .
  1. painter.drawPie(130, 20, 90, 60, 30*16, 120*16);
  2.  painter.drawChord(240, 30, 90, 60, 0, 16*180);
  3.  painter.drawRoundRect(20, 120, 80, 50);
لقد قمنا برسم شكل فطيرة و وتر و مستطيل ذو أطراف مقوسة .
  1. QPolygon polygon;
  2.  polygon << QPoint(130, 140) << QPoint(180, 170)
  3.          << QPoint(180, 140) << QPoint(220, 110)
  4.          << QPoint(140, 100);
  5.  painter.drawPolygon(polygon);

هنا قمنا برسم شكل مضلع من خمسة نقاط .
  1. QPointF baseline(20, 250);
  2.  QFont font("Georgia", 55);
  3.  QPainterPath path2;
  4.  path2.addText(baseline, font, "Q");
  5.  painter.drawPath(path2);

توفر لك مكتبة Qt4 القدرة على رسم مسارات بإستخدام خطوط المحارف .
  1. painter.drawEllipse(140, 200, 60, 60);
  2.  painter.drawEllipse(240, 200, 90, 60);

توفر لك الدالة drawEllipse القدرة على رسم أشكال القطع الناقص والدائرة (حيث أن الدائرة هي حل من القطع الناقص) .
main.cpp

  1. #include "shapes.h"
  2. #include <QDesktopWidget>
  3. #include <QApplication>
  4.  
  5. void center(QWidget &widget)
  6. {
  7.   int x, y;
  8.   int screenWidth;
  9.   int screenHeight;
  10.  
  11.   int WIDTH = 350;
  12.   int HEIGHT = 280;
  13.  
  14.   QDesktopWidget *desktop = QApplication::desktop();
  15.  
  16.   screenWidth = desktop->width();
  17.   screenHeight = desktop->height();
  18.  
  19.   x = (screenWidth - WIDTH) / 2;
  20.   y = (screenHeight - HEIGHT) / 2;
  21.  
  22.   widget.setGeometry(x, y, WIDTH, HEIGHT);
  23. }
  24.  
  25.  
  26. int main(int argc, char *argv[])
  27. {
  28.   QApplication app(argc, argv);  
  29.  
  30.   Shapes window;
  31.  
  32.   window.setWindowTitle("Shapes");
  33.   window.show();
  34.   center(window);
  35.  
  36.   return app.exec();
  37. }

Main file.


Figure: أشكال
تدرج الألوان :-
وهو إندماج متدرج للضلال من الضوء للضلام أو من لون الى لون آخر .
ولها استخدامات عدة مثل صبغ خلفية نافذة البرنامج وتطبيق بعض التأثيرات ومحاكات الضلال والضوء و.. .
في هذا المثال سوف نرى أنه كيف بوسعنا ان نبرمج الألوان المتدرجة بإستخدام مكتبة Qt4 .
gradients.h

  1. #ifndef GRADIENT_H
  2. #define GRADIENT_H
  3.  
  4. #include <QWidget>
  5.  
  6. class Gradient : public QWidget
  7. {
  8.  
  9.   public:
  10.     Gradient(QWidget *parent = 0);
  11.  
  12.   protected:
  13.     void paintEvent(QPaintEvent *event);
  14.  
  15. };
  16.  
  17. #endif
Header file.
gradients.cpp

  1. #include "gradients.h"
  2. #include <QApplication>
  3. #include <QPainter>
  4.  
  5.  
  6. Gradient::Gradient(QWidget *parent)
  7.     : QWidget(parent)
  8. {
  9.  
  10. }
  11.  
  12. void Gradient::paintEvent(QPaintEvent *event)
  13. {
  14.   QPainter painter(this);
  15.  
  16.  
  17.   QLinearGradient grad1(0, 20, 0, 110);
  18.  
  19.   grad1.setColorAt(0.1, Qt::black);
  20.   grad1.setColorAt(0.5, Qt::yellow);
  21.   grad1.setColorAt(0.9, Qt::black);
  22.  
  23.   painter.fillRect(20, 20, 300, 90, grad1);
  24.  
  25.   QLinearGradient grad2(0, 55, 250, 0);
  26.  
  27.   grad2.setColorAt(0.2, Qt::black);
  28.   grad2.setColorAt(0.5, Qt::red);
  29.   grad2.setColorAt(0.8, Qt::black);
  30.  
  31.   painter.fillRect(20, 140, 300, 100, grad2);
  32.  
  33. }

في هذا البرنامج قمنا برسم مستطيلين ومن ثم قمنا بتلوينهم بألوان متدرجة .
  1. QLinearGradient grad1(0, 20, 0, 110);
  2.  
  3.  grad1.setColorAt(0.1, Qt::black);
  4.  grad1.setColorAt(0.5, Qt::yellow);
  5.  grad1.setColorAt(0.9, Qt::black);


الألوان في هذا التدرج معرفة بإستخدام نقاط التوقف حيث أن الدالة setColorAt تستخدم لإنشاء نقاط التوقف من خلال مواقعها (من 0 الى 1 حيث 0 بداية التدرج و1 هو نهايته) ولون كل نقطة توقف. 
  1. painter.fillRect(20, 20, 300, 90, grad1);

قمنا بتعبئة مساحة المستطيل بإستخدام الألوان المتدرجة .
main.cpp

  1. #include "gradients.h"
  2. #include <QDesktopWidget>
  3. #include <QApplication>
  4.  
  5. void center(QWidget &widget)
  6. {
  7.   int x, y;
  8.   int screenWidth;
  9.   int screenHeight;
  10.  
  11.   int WIDTH = 350;
  12.   int HEIGHT = 260;
  13.  
  14.   QDesktopWidget *desktop = QApplication::desktop();
  15.  
  16.   screenWidth = desktop->width();
  17.   screenHeight = desktop->height();
  18.  
  19.   x = (screenWidth - WIDTH) / 2;
  20.   y = (screenHeight - HEIGHT) / 2;
  21.  
  22.   widget.setGeometry(x, y, WIDTH, HEIGHT);
  23. }
  24.  
  25.  
  26. int main(int argc, char *argv[])
  27. {
  28.   QApplication app(argc, argv);
  29.  
  30.   Gradient window;
  31.  
  32.   window.setWindowTitle("Gradients");
  33.   window.show();
  34.   center(window);
  35.  
  36.   return app.exec();
  37. }

Main file.

: الألوان المتدرجة
الإنتفاش(الإنتفاخ مع التلاشي)
هذا هو مثالنا الأخير في هذا الدرس الرسم بإستخدام Qt4 . سوف نقوم بإنشاء تأثير يدعى الإنتفاش حيث في هذا المثال نقوم بعرض نص ينموا من وسط النافذة ويتلاشى تدريجيا من بعض النقاط (تأثير مزدج) .
puff.h

  1. #ifndef PUFF_H
  2. #define PUFF_H
  3.  
  4. #include <QWidget>
  5.  
  6. class Puff : public QWidget
  7. {
  8.   Q_OBJECT  
  9.  
  10.   public:
  11.     Puff(QWidget *parent = 0);
  12.  
  13.   protected:
  14.     void paintEvent(QPaintEvent *event);
  15.     void timerEvent(QTimerEvent *event);
  16.  
  17.   private:
  18.     int x;
  19.     qreal opacity;
  20.     int timerId;
  21.  
  22. };
  23.  
  24. #endif
  25. في ملف الرأس قمنا بإنشاء مقبضين للأحداث الأول أحداث الرسم والآخر أحداث المؤقت .
  26. puff.cpp
  27.  
  28. #include "puff.h"
  29. #include <QApplication>
  30. #include <QPainter>
  31. #include <QPainterPath>
  32. #include <QTimer>
  33. #include <iostream>
  34.  
  35.  
  36. Puff::Puff(QWidget *parent)
  37.     : QWidget(parent)
  38. {
  39.   x = 1;
  40.   opacity = 1.0;
  41.   timerId = startTimer(15);
  42. }
  43.  
  44. void Puff::paintEvent(QPaintEvent *event)
  45. {
  46.   QPainter painter(this);
  47.  
  48.   QString text = "ZetCode";
  49.  
  50.   painter.setPen(QPen(QBrush("#575555"), 1));
  51.  
  52.   QFont font("Courier", x, QFont::DemiBold);
  53.   QFontMetrics fm(font);
  54.   int textWidth = fm.width(text);
  55.  
  56.   painter.setFont(font);
  57.  
  58.  
  59.   if (x > 10) {
  60.     opacity -= 0.01;
  61.     painter.setOpacity(opacity);
  62.   }
  63.  
  64.   if (opacity <= 0) {
  65.     killTimer(timerId);
  66.     std::cout << "timer stopped" << std::endl;
  67.   }
  68.  
  69.   int h = height();
  70.   int w = width();
  71.  
  72.   painter.translate(QPoint(w/2, h/2));
  73.   painter.drawText(-textWidth/2, 0, text);
  74.  
  75. }
  76.  
  77. void Puff::timerEvent(QTimerEvent *event)
  78. {
  79.   x += 1;
  80.   repaint();
  81. }
  82. Puff::Puff(QWidget *parent)
  83.     : QWidget(parent)
  84. {
  85.   x = 1;
  86.   opacity = 1.0;
  87.   timerId = startTimer(15);
  88. }


في دالة البناء قمنا بتهيئة المؤقت بحيث يرسل الحدث كل 15 ملي ثانية .
  1. void Puff::timerEvent(QTimerEvent *event)
  2. {
  3.   x += 1;
  4.   repaint();
  5. }

وفي دالة التقاط أحداث المؤقت قمنا بزيادة حجم الخط بمقدار 1 و إعادة رسم النافذة 
  1. if (x > 10) {
  2.    opacity -= 0.01;
  3.    painter.setOpacity(opacity);
  4.  }

في حال كان حجم الخط أكبر من 10 نقوم بزيادة الشفافية (إنقاص العتمة) بشكل تدريجي , زيادة بهوت النص .
  1. if (opacity <= 0) {
  2.    killTimer(timerId);
  3.    std::cout << "timer stopped" << std::endl;
  4.  }

في حال أصبح النص شفافابالكامل نقوم بإيقاف المؤقت ونرسل رسالة تعلم بتوقف المؤقت .
main.cpp

  1. #include "puff.h"
  2. #include <QDesktopWidget>
  3. #include <QApplication>
  4.  
  5. void center(QWidget &widget)
  6. {
  7.   int x, y;
  8.   int screenWidth;
  9.   int screenHeight;
  10.  
  11.   int WIDTH = 350;
  12.   int HEIGHT = 280;
  13.  
  14.   QDesktopWidget *desktop = QApplication::desktop();
  15.  
  16.   screenWidth = desktop->width();
  17.   screenHeight = desktop->height();
  18.  
  19.   x = (screenWidth - WIDTH) / 2;
  20.   y = (screenHeight - HEIGHT) / 2;
  21.  
  22.   widget.setGeometry(x, y, WIDTH, HEIGHT);
  23. }
  24.  
  25.  
  26. int main(int argc, char *argv[])
  27. {
  28.   QApplication app(argc, argv); 
  29.  
  30.   Puff window;
  31.  
  32.   window.setWindowTitle("Puff");
  33.   window.show();
  34.   center(window);
  35.  
  36.   return app.exec();
  37. }

Main file.

إسم الكاتب تاريخ الإضافة التقييم / المقيمين زيارات الدرس
مصفوفة 21/01/2009 0 / 0 888

الأكثر زيارة
 دليل تنصيب اطار عمل Qt ، حزمة MinGW ، بيئة التطوير QDevelop الزيارات 2849 دليل تنصيب اطار عمل Qt ، حزمة MinGW ، بيئة التطوير QDevelop
 اعداد وتنصيب Qt الزيارات 2627 اعداد وتنصيب Qt
 دليل تنصيب اطار عمل Qt ، حزمة MinGW ، بيئة التطوير Eclipse الزيارات 2576 دليل تنصيب اطار عمل Qt ، حزمة MinGW ، بيئة التطوير Eclipse
 التطوير السريع للتطبيقات Rapid Application Development الزيارات 2420 التطوير السريع للتطبيقات Rapid Application Development
 C++ In a Nutshell الزيارات 2293 C++ In a Nutshell
 

الأكثر تصويتـا
 اعداد وتنصيب Qt نتيجة التصويت 40 من 5 شخص اعداد وتنصيب Qt
 تخطيط البرامج Program Layout نتيجة التصويت 40 من 6 شخص تخطيط البرامج Program Layout
 الدرس الاول : كتابة اول برنامج نتيجة التصويت 29 من 3 شخص الدرس الاول : كتابة اول برنامج
 التطوير السريع للتطبيقات Rapid Application Development نتيجة التصويت 29 من 4 شخص التطوير السريع للتطبيقات Rapid Application Development
 الدرس الثالث:تعريف slot جديدة نتيجة التصويت 27 من 3 شخص الدرس الثالث:تعريف slot جديدة
 
 

سكربت story-script v1 برمجة bwady.com تطوير SudaNix