📝 ملخص الصفحة
📚 رسم مستطيل
المفاهيم الأساسية
دالة رسم المستطيل: `canvas.create_rectangle(x1, y1, x2, y2)`
- x1, y1: إحداثيات النقطة العلوية اليسرى.
- x2, y2: إحداثيات النقطة السفلية اليمنى.
- width: عرض حدود المستطيل.
- outline: لون حدود المستطيل.
- fill: اللون الداخلي للمستطيل.
خريطة المفاهيم
```markmap
بناء واجهات المستخدم الرسومية (GUI) بلغة بايثون
النموذج البرمجي تيكينتر (tkinter)
وظيفته
- يحتوي على نصوص برمجية جاهزة
- يستخدم لرسم أشكال ورسومات على نافذة
المكون الأساسي: لوحة الرسم (Canvas)
- منطقة مستطيلة للرسم
- يمكن وضع رسومات أو نصوص أو عناصر واجهة فيها
#### نظام إحداثيات لوحة الرسم
##### الفرق عن النظام الديكارتي
- الأصل (0،0) في الزاوية اليسرى العليا
- إحداثيات x: تزيد باتجاه اليمين (مثل النظام الديكارتي)
- إحداثيات y: تزيد باتجاه الأسفل (عكس النظام الديكارتي)
##### النموذج الأساسي
- البكسل
- الإحداثيات تُعبر عنها كأعداد صحيحة
خطوات إنشاء نافذة الرسم
1. استيراد النموذج
2. إنشاء النافذة الأساسية
3. ضبط لوحة الرسم (الحجم واللون)
4. وضع العناصر على النافذة
#### رسم الخطوط
##### الدالة
- canvas.create_line(x-start, y-start, x-end, y-end)
##### المعاملات
- إحداثيات x و y لبداية ونهاية الخط
- يمكن استخدام عوامل تعيئة وعرض "القلم"
##### أمثلة عملية
###### رسم خطين متقاطعين
- خط أحمر عريض من (10,10) إلى (100,100)
- خط ذهبي أقل عرضاً من (10,100) إلى (100,10)
###### رسم خطوط أفقية متعددة باستخدام حلقة
- إنشاء 10 خطوط برتقالية أفقية
- عرض الخط يزداد مع كل تكرار (width=i)
- المسافة بين الخطوط 15 بكسل (i*15)
###### رسم مثلث
- باستخدام `create_line` مع سلسلة من الإحداثيات
- مثال: `canvas.create_line(240,20, 160,100, 320,100, 240,20)`
- الإحداثيات: (240,20) قمة، (160,100) يسار، (320,100) يمين
#### رسم المستطيلات
##### الدالة
- canvas.create_rectangle(x1, y1, x2, y2)
##### المعاملات
- x1, y1: إحداثيات الزاوية العلوية اليسرى
- x2, y2: إحداثيات الزاوية السفلية اليمنى
- width: عرض حدود المستطيل
- outline: لون حدود المستطيل
- fill: اللون الداخلي للمستطيل
##### أمثلة عملية
###### مثال 1: مستطيل أبيض بحدود مرجانية
- `canvas.create_rectangle(100,150,400,250,width=3, outline="coral",fill="white")`
- خلفية اللوحة: لون البط البري (teal)
###### مثال 2: مستطيل أخضر
- `canvas.create_rectangle(30,10,120,80,width=5, fill="green")`
- خلفية اللوحة: لون البط البري (teal)
تحديد الألوان في تيكينتر
الطريقة الأولى: الأسماء المعيارية
- أبيض، أسود، أحمر، أزرق، أخضر، سماوي، أصفر، أرجواني
الطريقة الثانية: نموذج RGB
- تحديد اللون باستخدام 3 أرقام تمثل نسب الأحمر والأخضر والأزرق
#### خصائص نموذج RGB
- كل لون (أحمر، أخضر، أزرق) له قيمة بين 0 و 255
- مثال: الأحمر = (255,0,0)، الأخضر = (0,255,0)، الأزرق = (0,0,255)
التعامل مع أحداث الفأرة ولوحة المفاتيح
ربط الأحداث
- الصيغة: widget.bind(event, handler)
فئات الأحداث الرئيسية
#### أحداث الفأرة
- : زر الفأرة الأيسر
- : الضغط المزدوج على زر الفأرة الأيسر
- : إدخال مؤشر الفأرة إلى نافذة تيكينتر
- : إخراج مؤشر الفأرة من نافذة تيكينتر
#### أحداث لوحة المفاتيح
الحصول على إحداثيات الفأرة
#### آلية العمل
- ربط حدث الفأرة (مثل ``) بدالة معالجة (callback function)
- تمرير كائن الحدث (event) إلى الدالة
- استخراج إحداثيات النقطة من `event.x` و `event.y`
#### مثال: طباعة الإحداثيات عند النقر
- `canvas.bind("", callback)`
- `def callback(event): print("clicked at", event.x, event.y)`
#### مثال: طباعة الإحداثيات عند النقر المزدوج
- `canvas.bind("", callback)`
```
نقاط مهمة
- لرسم مستطيل، تحتاج إلى تحديد إحداثيات الزاويتين المتقابلتين (العلوية اليسرى والسفلية اليمنى).
- يمكن التحكم في مظهر المستطيل من خلال معاملات `width` (عرض الحدود)، و`outline` (لون الحدود)، و`fill` (اللون الداخلي).
- يظهر المثال الأول مستطيلاً أبيض بحدود مرجانية عريضة على خلفية بلون البط البري.
- يظهر المثال الثاني مستطيلاً أخضر اللون على نفس الخلفية، موضحاً كيف تؤثر الإحداثيات على موقع وحجم الشكل المرسوم.
📋 المحتوى المنظم
📖 محتوى تعليمي مفصّل
نوع: محتوى تعليمي
رسم مستطيل
نوع: محتوى تعليمي
لرسم مستطيل على لوحة الرسم القماشية، يمكنك استخدام دالة (
نوع: محتوى تعليمي
canvas.create_rectangle(x1,y1,x2,y2)
نوع: محتوى تعليمي
الأرقام الموجودة بين قوسين هي إحداثيات x و y للنقطتين المحيطيتين: أعلى اليسار ونقطة أسفل اليمين. يمكنك استخدام المخطط المخطط التفصيلي والعرض الخاص بالمستطيل. توفر معاملة المخطط التفصيلي لونًا داخليًا للمستطيل.
المثال الأول
نوع: محتوى تعليمي
يمكنك إلقاء نظرة على المثال الآتي:
نوع: محتوى تعليمي
from tkinter import *
window=Tk()
canvas=Canvas(bg="teal",width=600,height=400)
canvas.pack()
canvas.create_rectangle(100,150,400,250,width=3,
outline="coral",fill="white")
window.mainloop()
شكل المقطع البرمجي الآتي. ماذا تلاحظ؟
نوع: محتوى تعليمي
شكل المقطع البرمجي الآتي. ماذا تلاحظ؟
نوع: محتوى تعليمي
from tkinter import *
window=Tk()
canvas=Canvas(bg="teal",width=600,height=400)
canvas.pack()
canvas.create_rectangle(30,10,120,80,width=5,
fill="green")
window.mainloop()
نوع: محتوى تعليمي
جرب بنفسك
نوع: METADATA
Ministry of Education
2025 - 1447
🔍 عناصر مرئية
Canvas with Rectangle
A teal colored canvas area containing a white rectangle with a coral outline. The rectangle appears centered within the canvas.
Canvas with Rectangle
A teal colored canvas area containing a green rectangle with a thin border. The rectangle is positioned towards the top-left of the canvas.
📄 النص الكامل للصفحة
رسم مستطيل
لرسم مستطيل على لوحة الرسم القماشية، يمكنك استخدام دالة (
canvas.create_rectangle(x1,y1,x2,y2)
الأرقام الموجودة بين قوسين هي إحداثيات x و y للنقطتين المحيطيتين: أعلى اليسار ونقطة أسفل اليمين. يمكنك استخدام المخطط المخطط التفصيلي والعرض الخاص بالمستطيل. توفر معاملة المخطط التفصيلي لونًا داخليًا للمستطيل.
--- SECTION: المثال الأول ---
يمكنك إلقاء نظرة على المثال الآتي:
from tkinter import *
window=Tk()
canvas=Canvas(bg="teal",width=600,height=400)
canvas.pack()
canvas.create_rectangle(100,150,400,250,width=3,
outline="coral",fill="white")
window.mainloop()
--- SECTION: شكل المقطع البرمجي الآتي. ماذا تلاحظ؟ ---
شكل المقطع البرمجي الآتي. ماذا تلاحظ؟
from tkinter import *
window=Tk()
canvas=Canvas(bg="teal",width=600,height=400)
canvas.pack()
canvas.create_rectangle(30,10,120,80,width=5,
fill="green")
window.mainloop()
جرب بنفسك
Ministry of Education
2025 - 1447
--- VISUAL CONTEXT ---
**FIGURE**: Canvas with Rectangle
Description: A teal colored canvas area containing a white rectangle with a coral outline. The rectangle appears centered within the canvas.
X-axis: X-coordinate
Y-axis: Y-coordinate
Data: The visual represents a rectangle drawn on a canvas.
Key Values: Rectangle coordinates: (100, 150) to (400, 250), Outline color: coral, Fill color: white, Canvas background: teal, Canvas dimensions: 600x400
Context: Illustrates the use of create_rectangle function with specific coordinates and fill/outline colors.
**FIGURE**: Canvas with Rectangle
Description: A teal colored canvas area containing a green rectangle with a thin border. The rectangle is positioned towards the top-left of the canvas.
X-axis: X-coordinate
Y-axis: Y-coordinate
Data: The visual represents a smaller, differently colored rectangle drawn on the same canvas size.
Key Values: Rectangle coordinates: (30, 10) to (120, 80), Fill color: green, Border width: 5, Canvas background: teal, Canvas dimensions: 600x400
Context: Illustrates drawing another rectangle with different coordinates, fill color, and border width.
🎴 بطاقات تعليمية للمراجعة
عدد البطاقات: 5 بطاقة لهذه الصفحة
ما هي الدالة المستخدمة لرسم مستطيل في مكتبة tkinter؟
- أ) canvas.draw_rectangle(x1, y1, x2, y2)
- ب) canvas.rectangle(x1, y1, x2, y2)
- ج) canvas.create_rect(x1, y1, x2, y2)
- د) canvas.create_rectangle(x1, y1, x2, y2)
الإجابة الصحيحة: d
الإجابة: canvas.create_rectangle(x1, y1, x2, y2)
الشرح: الدالة create_rectangle هي الدالة المخصصة لرسم شكل المستطيل على لوحة الرسم (Canvas) في مكتبة tkinter. تأخذ إحداثيات النقطتين المحيطيتين للمستطيل كمعاملات أساسية.
تلميح: تأتي كلمة 'rectangle' في اسم الدالة.
التصنيف: تعريف | المستوى: سهل
في دالة create_rectangle(x1, y1, x2, y2)، ما الذي تمثله النقطة (x1, y1)؟
- أ) إحداثيات مركز المستطيل.
- ب) إحداثيات النقطة أسفل يمين المستطيل.
- ج) إحداثيات النقطة أعلى يسار المستطيل.
- د) إحداثيات النقطة أسفل يسار المستطيل.
الإجابة الصحيحة: c
الإجابة: إحداثيات النقطة أعلى يسار المستطيل.
الشرح: تحدد دالة create_rectangle شكل المستطيل باستخدام إحداثيات زاويتيه المتقابلتين. النقطة (x1, y1) تمثل الزاوية العلوية اليسرى للمستطيل المراد رسمه.
تلميح: هي إحدى النقطتين المحيطيتين للمستطيل.
التصنيف: مفهوم جوهري | المستوى: متوسط
ما الغرض من المعامل 'fill' في دالة create_rectangle؟
- أ) تحديد لون حدود المستطيل.
- ب) تحديد عرض حدود المستطيل.
- ج) تحديد اللون الداخلي للمستطيل.
- د) تحديد حجم الخط المستخدم في تسمية المستطيل.
الإجابة الصحيحة: c
الإجابة: تحديد اللون الداخلي للمستطيل.
الشرح: المعامل الاختياري 'fill' في دالة create_rectangle يستخدم لتحديد لون ملء المنطقة الداخلية للمستطيل. إذا لم يتم تحديده، قد يبقى المستطيل شفافاً أو يأخذ لوناً افتراضياً.
تلميح: كلمة 'fill' تعني 'ملء'.
التصنيف: مفهوم جوهري | المستوى: سهل
في المثال البرمجي: canvas.create_rectangle(30,10,120,80,width=5, fill='green')، ما لون حدود المستطيل؟
- أ) أخضر (green).
- ب) اللون الافتراضي (أسود عادةً).
- ج) أزرق (blue).
- د) لا يوجد حدود لأن width=5.
الإجابة الصحيحة: b
الإجابة: اللون الافتراضي (أسود عادةً).
الشرح: في الاستدعاء المذكور، تم تحديد معامل 'fill' باللون الأخضر ومعامل 'width' بقيمة 5 لعرض الحدود. لكن لم يتم تحديد معامل 'outline'، مما يعني أن لون الحدود سيكون اللون الافتراضي (غالباً الأسود).
تلميح: لم يتم تحديد معامل 'outline' في الاستدعاء.
التصنيف: سؤال اختبار | المستوى: متوسط
ما هي الخطوة الأولى لرسم مستطيل باستخدام tkinter قبل استدعاء create_rectangle؟
- أ) استدعاء الدالة mainloop().
- ب) تحديد لون الحدود (outline).
- ج) إنشاء كائن من فئة Canvas.
- د) تحديد إحداثيات المستطيل.
الإجابة الصحيحة: c
الإجابة: إنشاء كائن من فئة Canvas.
الشرح: لرسم أي شكل على واجهة tkinter، يجب أولاً إنشاء كائن لوحة الرسم (Canvas) وتحديد أبعاده وخصائصه الأساسية مثل الخلفية. بعد ذلك يمكن استدعاء دوال الرسم مثل create_rectangle على هذا الكائن.
تلميح: يجب أن يكون هناك سطح للرسم عليه.
التصنيف: صيغة/خطوات | المستوى: متوسط