صفحة 174 - كتاب المهارات الرقمية - الصف 9 - الفصل 1 - المملكة العربية السعودية

📚 رسم الخطوط باستخدام Tkinter Canvas

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

دالة رسم الخط: `canvas.create_line(x-start, y-start, x-end, y-end, width=..., 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)

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

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

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

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

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

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

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

```

نقاط مهمة

• يمكن استخدام الحلقات (مثل `for`) لرسم عدة خطوط بخصائص مختلفة بكود مختصر.
• معامل `width` في `create_line()` يتحكم في عرض الخط (سمكه).
• معامل `fill` في `create_line()` يتحكم في لون الخط.
• يمكن تغيير لون خلفية الـ Canvas باستخدام معامل `bg` عند إنشائه.

from tkinter import * window=Tk() canvas=Canvas(bg="teal",width=600, height=200) canvas.pack() canvas.create_line(10,10,100,100,width=5,fill="red") canvas.create_line(10,100,100,10,width=3,fill="gold") window.mainloop()

اكتب مقطفا برمجيا لإنشاء لوحة رسومية ملونة، تحتوي عددا من الخطوط الأفقية بأحجام مختلفة.

from tkinter import * window=Tk() window.title("Lines") canvas=Canvas(bg="darkgreen", width=600, height=200) canvas.pack() for i in range(0,10): canvas.create_line(40, i*15, 500, i*15, width=i, fill="orange") window.mainloop()

from tkinter import * window=Tk() canvas=Canvas(bg="teal",width=600, height=200) canvas.pack() canvas.create_line(10,10,100,100,width=5,fill="red") canvas.create_line(10,100,100,10,width=3,fill="gold") window.mainloop() اكتب مقطفا برمجيا لإنشاء لوحة رسومية ملونة، تحتوي عددا من الخطوط الأفقية بأحجام مختلفة. from tkinter import * window=Tk() window.title("Lines") canvas=Canvas(bg="darkgreen", width=600, height=200) canvas.pack() for i in range(0,10): canvas.create_line(40, i*15, 500, i*15, width=i, fill="orange") window.mainloop() --- VISUAL CONTEXT --- **DIAGRAM**: Untitled Description: A teal-colored canvas displaying two lines. One line is red, starting from near the top-left and ending near the bottom-right. The other line is gold, starting from near the bottom-left and ending near the top-right. Two labels below the lines indicate coordinates: (10,100) and (100,100). Context: Demonstrates drawing lines with Tkinter's create_line method, showing start/end points and line properties like width and fill color. **DIAGRAM**: Lines Description: A dark green canvas displaying multiple horizontal lines of varying widths and orange color. The lines are stacked vertically, with the top line being the thinnest and the bottom line being the widest. Context: Demonstrates drawing multiple lines using a loop in Tkinter, where line properties like width and position are dynamically controlled.