مثال

📚 معلومات الصفحة

الكتاب: كتاب المهارات الرقمية - الصف 9 - الفصل 1 | المادة: المهارات الرقمية | المرحلة: الصف 9 | الفصل الدراسي: 1

الدولة: المملكة العربية السعودية | المنهج: المنهج السعودي - وزارة التعليم

نوع المحتوى: درس تعليمي

📝 ملخص الصفحة

📚 رسم شكل بيضاوي

المفاهيم الأساسية

دالة رسم بيضاوي: `canvas.create_oval(x1, y1, x2, y2)`

(x1, y1): إحداثيات الزاوية اليسرى العلوية للمستطيل المحيط.

(x2, y2): إحداثيات الزاوية اليمنى السفلية للمستطيل المحيط.

خريطة المفاهيم

```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)

#### رسم الأشكال البيضاوية

##### الدالة

canvas.create_oval(x1, y1, x2, y2)

##### المعاملات

x1, y1: إحداثيات الزاوية العلوية اليسرى للمستطيل المحيط
x2, y2: إحداثيات الزاوية السفلية اليمنى للمستطيل المحيط
width: عرض حدود الشكل

##### العلاقة بين المستطيل المحيط والشكل

يتم رسم البيضاوي داخل المستطيل المحدد بالإحداثيات (x1, y1) و (x2, y2)
إذا كان المستطيل المحيط مربعاً (عرضه = ارتفاعه)، يصبح الشكل المرسوم دائرة

##### مثال عملي

`canvas.create_oval(50,50,300,300,width=3)`
خلفية اللوحة: لون البط البري (teal)
النتيجة: دائرة لأن (300-50) = (300-50)

تحديد الألوان في تيكينتر

الطريقة الأولى: الأسماء المعيارية

أبيض، أسود، أحمر، أزرق، أخضر، سماوي، أصفر، أرجواني

الطريقة الثانية: نموذج RGB

تحديد اللون باستخدام 3 أرقام تمثل نسب الأحمر والأخضر والأزرق

#### خصائص نموذج RGB

كل لون (أحمر، أخضر، أزرق) له قيمة بين 0 و 255
مثال: الأحمر = (255,0,0)، الأخضر = (0,255,0)، الأزرق = (0,0,255)

التعامل مع أحداث الفأرة ولوحة المفاتيح

ربط الأحداث

الصيغة: widget.bind(event, handler)

فئات الأحداث الرئيسية

#### أحداث الفأرة

: زر الفأرة الأيسر
: الضغط المزدوج على زر الفأرة الأيسر
: إدخال مؤشر الفأرة إلى نافذة تيكينتر
: إخراج مؤشر الفأرة من نافذة تيكينتر

#### أحداث لوحة المفاتيح

: الضغط على مفتاح الإدخال (Enter)
: الضغط على أي مفتاح (مثال: للضغط على مفتاح "a")

الحصول على إحداثيات الفأرة

#### آلية العمل

ربط حدث الفأرة (مثل ``) بدالة معالجة (callback function)
تمرير كائن الحدث (event) إلى الدالة
استخراج إحداثيات النقطة من `event.x` و `event.y`

#### مثال: طباعة الإحداثيات عند النقر

`canvas.bind("", callback)`
`def callback(event): print("clicked at", event.x, event.y)`

#### مثال: طباعة الإحداثيات عند النقر المزدوج

`canvas.bind("", callback)`

```

نقاط مهمة

يتم رسم الشكل البيضاوي داخل مستطيل وهمي تحدده إحداثياته.
إذا كان المستطيل المحيط مربعاً، يصبح الشكل المرسوم دائرة.
مثال الكود يرسم دائرة لأن الفرق بين الإحداثيات الأفقي والرأسي متساوٍ (250 بكسل).

📋 المحتوى المنظم

📖 محتوى تعليمي مفصّل

نوع: محتوى تعليمي

لرسم شكل بيضاوي على لوحة الرسم القماشية، يمكنك استخدام الدالة الآتية:

نوع: محتوى تعليمي

canvas.create_oval(x1,y1,x2,y2)

نوع: محتوى تعليمي

يتسع الرسم البيضاوي المرسوم داخل مستطيل المحدد أبعاده من خلال إحداثيات الدالة:

نوع: محتوى تعليمي

(x1, y1) هي الزاوية اليسرى العلوية للمستطيل.
(x2, y2) هي الزاوية اليمنى السفلية للمستطيل.

نوع: محتوى تعليمي

إذا كانت أبعاد هذا المستطيل تشكل مربعاً، فالشكل الذي ستحصل عليه هو دائرة.

نوع: محتوى تعليمي

from tkinter import *
window = Tk()
canvas = Canvas(bg="teal", width=600, height=300)
canvas.pack()
canvas.create_oval(50,50,300,300,width=3)
window.mainloop()

🔍 عناصر مرئية

A diagram illustrating how an oval is defined by the coordinates of a rectangle. The top-left corner is labeled (x1, y1) and the bottom-right corner is labeled (x2, y2).

tk

A teal-colored window displaying a black oval drawn with a line width of 3.

📄 النص الكامل للصفحة

لرسم شكل بيضاوي على لوحة الرسم القماشية، يمكنك استخدام الدالة الآتية:

canvas.create_oval(x1,y1,x2,y2)

يتسع الرسم البيضاوي المرسوم داخل مستطيل المحدد أبعاده من خلال إحداثيات الدالة:

(x1, y1) هي الزاوية اليسرى العلوية للمستطيل.
(x2, y2) هي الزاوية اليمنى السفلية للمستطيل.

إذا كانت أبعاد هذا المستطيل تشكل مربعاً، فالشكل الذي ستحصل عليه هو دائرة.

--- SECTION: مثال ---
from tkinter import *
window = Tk()
canvas = Canvas(bg="teal", width=600, height=300)
canvas.pack()
canvas.create_oval(50,50,300,300,width=3)
window.mainloop()

--- VISUAL CONTEXT ---
**DIAGRAM**: Untitled
Description: A diagram illustrating how an oval is defined by the coordinates of a rectangle. The top-left corner is labeled (x1, y1) and the bottom-right corner is labeled (x2, y2).
Context: Explains the coordinate system used to define an oval in Tkinter.

**IMAGE**: tk
Description: A teal-colored window displaying a black oval drawn with a line width of 3.
X-axis: Pixel coordinates
Y-axis: Pixel coordinates
Data: The oval is centered within the canvas, with its top-left corner at (50,50) and its bottom-right corner at (300,300). Since the width and height of the bounding box are equal (300-50 = 250), it forms a circle.
Key Values: Oval bounding box: (50,50) to (300,300), Line width: 3
Context: Demonstrates the output of the provided Python code, showing a circle created by drawing an oval within a square bounding box.

🎴 بطاقات تعليمية للمراجعة

عدد البطاقات: 3 بطاقة لهذه الصفحة

في لغة Python مع مكتبة Tkinter، ما هي الدالة المستخدمة لرسم شكل بيضاوي على لوحة الرسم القماشية (Canvas)، وما هي معطياتها الأساسية؟

أ) الدالة هي canvas.draw_oval(x, y, radius)، حيث (x, y) هي مركز الدائرة و radius هو نصف القطر.
ب) الدالة هي canvas.create_oval(x1, y1, x2, y2)، حيث (x1, y1) هي الزاوية اليسرى العلوية للمستطيل المحيط، و(x2, y2) هي الزاوية اليمنى السفلية.
ج) الدالة هي canvas.oval_shape(start_x, start_y, end_x, end_y)، حيث start و end هما نقطتي البداية والنهاية للخط المنحني.
د) الدالة هي canvas.add_ellipse(center_x, center_y, width, height)، حيث center هي الإحداثيات المركزية و width و height هما الأبعاد.

الإجابة الصحيحة: b

الإجابة: الدالة هي canvas.create_oval(x1, y1, x2, y2)، حيث (x1, y1) هي الزاوية اليسرى العلوية للمستطيل المحيط، و(x2, y2) هي الزاوية اليمنى السفلية.

الشرح: 1. لرسم شكل بيضاوي (أو دائرة) في Tkinter، نستخدم الدالة create_oval. 2. تحتاج الدالة إلى أربعة معطيات رقمية تمثل إحداثيات المستطيل المحيط بالشكل. 3. الإحداثيان (x1, y1) يحددان الزاوية العلوية اليسرى للمستطيل. 4. الإحداثيان (x2, y2) يحددان الزاوية السفلية اليمنى للمستطيل. 5. الشكل البيضاوي يرسم داخل حدود هذا المستطيل.

تلميح: تأمل اسم الدالة التي تبدأ بـ 'create' وتنتهي بـ 'oval'.

التصنيف: تعريف | المستوى: سهل

في دالة canvas.create_oval(x1, y1, x2, y2) في Tkinter، ماذا تمثل الإحداثيات (x1, y1) و (x2, y2)؟

أ) (x1, y1) تمثل مركز الشكل البيضاوي، و (x2, y2) تمثل نصف قطره على المحورين X و Y.
ب) (x1, y1) تمثل نقطة البداية للرسم، و (x2, y2) تمثل نقطة النهاية للقوس الرئيسي.
ج) (x1, y1) تمثل الزاوية اليسرى العلوية للمستطيل المحيط بالشكل البيضاوي، و (x2, y2) تمثل الزاوية اليمنى السفلية لنفس المستطيل.
د) (x1, y1) تمثل إحداثيات أقرب نقطة على المحور X و Y، و (x2, y2) تمثل إحداثيات أبعد نقطة.

الإجابة الصحيحة: c

الإجابة: (x1, y1) تمثل الزاوية اليسرى العلوية للمستطيل المحيط بالشكل البيضاوي، و (x2, y2) تمثل الزاوية اليمنى السفلية لنفس المستطيل.

الشرح: 1. لا يتم رسم البيضاوي مباشرة بإحداثيات مركزه أو نصف قطره. 2. بدلاً من ذلك، يُعرَّف بواسطة مستطيل يحيط به. 3. النقطة (x1, y1) على نظام إحداثيات Canvas هي الركن العلوي الأيسر لهذا المستطيل المحيط. 4. النقطة (x2, y2) هي الركن السفلي الأيمن لنفس المستطيل. 5. الدالة ترسم البيضاوي ليملأ هذا المستطيل المحيط.

تلميح: فكر في الشكل الهندسي الذي يُحْدِدُ حدود الرسم البيضاوي.

التصنيف: مفهوم جوهري | المستوى: متوسط

ما الشرط الذي يجب أن يتحقق في أبعاد المستطيل المحيط (المحدد بـ x1, y1, x2, y2) في دالة create_oval للحصول على دائرة بدلاً من شكل بيضاوي عام؟

أ) يجب أن تكون الإحداثيات (x1, y1) مساوية للإحداثيات (x2, y2).
ب) يجب أن يكون عرض المستطيل المحيط مساوياً لارتفاعه، أي أن يكون المستطيل مربعاً (x2 - x1 == y2 - y1).
ج) يجب أن تكون قيمة x1 و y1 مساوية للصفر.
د) يجب أن يكون الفرق بين x2 و x1 أكبر بكثير من الفرق بين y2 و y1.

الإجابة الصحيحة: b

الإجابة: يجب أن يكون عرض المستطيل المحيط مساوياً لارتفاعه، أي أن يكون المستطيل مربعاً (x2 - x1 == y2 - y1).

الشرح: 1. الدائرة هي حالة خاصة من الشكل البيضاوي. 2. في الدائرة، يكون المحوران الرئيسيان (الطول والعرض) متساويين. 3. في سياق دالة create_oval، يرسم الشكل ليملأ المستطيل المحيط المحدد. 4. إذا كان هذا المستطيل مربعاً (عرضه = ارتفاعه)، فإن الشكل البيضاوي المرسوم سيكون دائرة. 5. الشرط الرياضي: (x2 - x1) يجب أن يساوي (y2 - y1).

تلميح: تذكر خاصية الدائرة: جميع نقاطها على بعد ثابت من المركز.

التصنيف: مفهوم جوهري | المستوى: متوسط