[درس] الرسم ثنائى الأبعاد فى Qt

السلام عليكم و رحمة الله و بركاته ,,

نكمل اليوم على بركة الله فى أول درس لنا للرسم ثنائى الأبعاد فى Qt بإستخدام QPainter و الرسم يتم على QPixmap .

تعريفات هامة:

ما هى QPixmap :

Qt توفر لنا اربعة اصناف للتعامل مع الصور و و هم : QImage, QPixmap, QBitmap ,QPicture , كل واحدة منهم توفر لنا عدة مميزات , ما يهمنا هو الصنف QPixmap , لأنها مصممة و محسنة للعرض الصور على الشاشة .

ما هو QPainter :

الصنف QPainter يوفر لنا أداة للرسم على كل الـ Paint Devices الذين ذكرناهم من قبل . فهذا الصنف يوفر لنا كل الدوال المحسنة تقريباً

لإستخدامها فى الرسم , من خطوط بسيطة لأشكال معقدة و أيضا يمكننا من رسم النصوص . فى المعتاد , نظام الإحداثيات المستخدم هو أن الركن الأعلى الأيسر فى النافذة هو نقطة البداية (0,0) لكن من الممكن عمل تحويلات لنقطة البداية على الشاشة كلها أو على نافذة الرسم فقط .

ملحوظة : هذه التعريفات هى تعتبر ترجمة لوصف الصنف فى الـ Assistant .

السلام عليكم و رحمة الله و بركاته ,,

البرنامج الأول :

هدف البرنامج : أظهار صورة ملونة على الشاشة .

#include <QApplication>
#include <QtGui>

int main(int argc, char* argv[])
{
	QApplication app(argc, argv);			//Creating New Application
	QPixmap pix(300,300);					// Creating  Pixmap width = 300 , height = 300
	pix.fill(Qt::red);					  // Filling the pixmap with red color 
	QLabel label;						   // Creating new label 
	label.setPixmap(pix);				   //Setting pixmap on the label
	label.show();						   //showing the label
	return app.exec();					  //Ending the Application 
}

شرح الكود :

1-2 : جمل التضمين

6: أنشاء تطبيق جديد

7: أنشاء صورة من نوع Pixmap , العرض = 300 , الأرتفاع = 300

8: ملئ الصورة باللون الأحمر

9: أنشاء عنوان جديد

10: وضع الصورة المنشأة من قبل على العنوان

11: أظهار العنوان

12: أنهاء التطبيق

واجهة البرنامج الأول :

كما نرى فى هذا البرنامج , نحن فعلنا شئ واحد , أظهار صورة من نوع QPixmap على الشاشة و هى ملونة .

البرنامج الثانى :

هدف البرنامج : أظهار صورة ملونة عليها شكل بيضاوى , مرسوم بلون معين و ملون بلون أخر .

فى البرنامج الأول , أنشأنا QPixmap ثم لوننا خلفيتها دون الستعانة بأى صنف أخر ,, لكن الان نريد رسم شكل بيضاوى ,, لذلك يجب استخدام الصنف QPainter الذى هو عبارة عن رسام

نشتريه و نعطيه الأدوات التى يحتاجها ,, فهو يحتاج قلم ليرسم الشكل به QPen , و يحتاج فرشاة لتلوين الشكل الذى رسم QBrush .

#include <QApplication>
#include <QtGui>
int main(int argc, char* argv[])
{
			  QApplication app(argc, argv);	   //Creating New Application
		QPixmap pm(200,200);				//Creating New Pixmap w=200, h=200
		pm.fill(Qt::cyan);				   //Fillinh pixmap with red color
		QPainter p(&pm);					//Creating New Painter 
		QPen pen(Qt::blue, 2);			  //Creating New Pen , color=blue, width=2
		p.setPen(pen);					  //Setting our pen to the created painter
		QBrush brush(Qt::green);		   //Creating New Brush with yellow color
		p.setBrush(brush);				  //Setting the brush to the painter
		p.drawEllipse(20,20,160,120);	   //Drawing Ellipse, x=20,y=20,w=160,h=120
		QLabel l;						   //Creating Label
		l.setPixmap(pm);					//Setting pixmap to the label
		l.show();						   //Show the label
		return app.exec();				  //Ending Application
}

1-2 : جمل التضمين

5 : إنشاء تطبيق جديد

6 : أنشاء Pixmap جديدة , العرض=200 , الإرتفاع=200

7 : ملئ الصورة باللون الأحمر

8 : إنشاء رسام جديد QPainter , مررنا له المكان الذى سيرسم عليه , pm

9 : أنشاء قلم جديد , لونه أزرق و عرضه 2

10 : تعيين قلم الرسام الى pen

11 : إنشاء فرشاة جديدة , لونها اصفر

12 : تعيين فرشاة الرسام الى brush

13: رسم شكل بيضاوى , البارمترات بالترتيب : x , y , width , height

14 : أنشاء عنوان جديد

15 : وضع الصورة على العنوان

16 : أنهاء التطبيق

جرب اضافة هذا السطر بعد سطر أنشاء القلم

pen.setStyle(Qt::DashLine);  //Setting Style of Pen to DashLine

واجهة البرنامج الثانى :

ما رأيك ؟؟ هذا السطر يغير شكل الخط الى خط متقطع DashLine

أنتهى هذا الجزء من الدرس بعون الله ,,,

الدرس القادم : تطبيق على ما درسناه فى هذا الدرس ,,

قائمة الروابط :

• QPainter Class
  
• QPen Class
  
• QBrush Class
  
• QLabel Class
  

Codes.rar

السلام عليكم و رحمة الله و بركاته ،،

نكمل اليوم سلسلة تعلم الرسم ثنائى الأبعاد فى Qt .

البرنامج الثالث :

هدف البرنامج كيفية رسم PolyLine ، رسم متعدد الخطوط ، كيف ننفذه باستخدام الصنف QPolygonF الذى يوفر لنا وعاء من النوع Vector ، لذلك سيحتوى على النقاط المطلوب رسمها ثم يرسمها ، يضع النقاط فوق الصورة ثم يرسم خط بين كل نقطتين متتابعتين .

سنفعل شئ جديد اليوم ،، بما ان البرنامج كبير ، تم كتابته باستخدام نمط البرمجة الكائنية لذلك الكود كبير ، لذلك سوف اضع كود دالة الرسم المقصودة فقط ، و الواجب يكون كتابة بقية البرنامج :D

void PolyDraw::TryPolyDraw()
 {
	 QPen Pen(QColor(Qt::blue));  //Creating Pen, Color = blue
	 Pen.setWidth(3);			 //Setting width of pen = 3
	 Pen.setJoinStyle(Qt::RoundJoin);	 //Joining Style = Round
	 Painter->setPen(Pen);				//Setting pen to our painter

	 QPolygonF Poly;
	 Poly << QPointF(15,68);
	 Poly << QPointF(43,90);
	 Poly << QPointF(89,13);
	 Poly << QPointF(148,78);
	 Poly << QPointF(200,112);
	 Poly << QPointF(167,359);		//points of the polyline
	 Poly << QPointF(265,76);
	 Poly << QPointF(312,285);
	 Poly << QPointF(365,320);

	 Painter->drawPolyline(Poly);	//drawing polyline
 }

شرح الكود :

1: بداية الدالة

3-4: انشاء القلم الذى سيرسم الخطوط

5: تغيير شكل نقاط الاتصال بين الخطوط لتصبح مستديرة

8: انشاء صنف QPolygonF الذى هو عبارة عن Vector تحتوى على النقاط

9-17: وضع اى نقاط للرسم

19: رسم الخطوط باستخدام دالة drawPolyline()

انتهى الكود ،،

واجهة البرنامج الثالث :

رأيت النتيجة ؟ اعتقد رائعة :happy: ;)

انتهت الان الدروس الأساسية التى تعطيك القاعدة للانطلاق فى عالم الرسم الأكثر من رائع مع مكتبة Qt الرائعة الجميلة ،،

الواجب : اكمال البرنامج و اضافة الكود الكامل (الصنف كاملاً) ;) لكن انا سأضيفه الليلة او غداً بعون الله (لا تعتمدوا على ذلك :)PP ،،

3.rar

السلام عليكــم ورحمـة الله وبركاتــه

الحمدالله على كل الأحوال

أولا يسرني أن أقدم شكري الجزيل لك

كفيت ووفيت البرفسور أبو عبدالله (عمر العادل)

وبالنسبة للواجب في المرفقات

homeWork.zip

مين أبو عبد الله ؟ :D

نجح الأخ مصفوفة بنسبة 120% ، الكود 100% لكن به عيب واحد فقط ،، تم ترجمته على الوضع debug

لكن غير ذلك نجاح و بتصفيق :clapping:

هذا نموذج الحل لمن يريده :D

PolyDraw.rar

شكرا لك أبو عبدالله