🎓 الدرس 27 من Tkinter: عنصر Canvas (الرسم داخل النافذة)

Tamer Ahmed يونيو 27, 2025

🎯 الهدف: تعلم استخدام عنصر Canvas لرسم الأشكال (مستطيلات، دوائر، خطوط...) داخل واجهة Tkinter.

🎓 الدرس 27 من Tkinter: عنصر Canvas (الرسم داخل النافذة)

🧱 ما هو Canvas؟

هو عنصر خاص يُستخدم لعرض رسومات ثابتة أو تفاعلية مثل:

  • رسم دوائر أو مربعات
  • عرض صور
  • إنشاء رسوم بيانية بسيطة
  • بناء ألعاب مرئية بسيطة

🧩 إنشاء Canvas:

canvas = tk.Canvas(window, width=300, height=200, bg="white")
canvas.pack()

🖌️ أهم أدوات الرسم داخل Canvas:

الوظيفة الدالة
رسم خط canvas.create_line(x1, y1, x2, y2)
رسم مستطيل canvas.create_rectangle(x1, y1, x2, y2)
رسم دائرة (بيضاوية) canvas.create_oval(x1, y1, x2, y2)
رسم نص canvas.create_text(x, y, text="...")
رسم صورة canvas.create_image(x, y, image=...)

✅ مثال عملي:

import tkinter as tk

# النافذة
window = tk.Tk()
window.title("مثال على Canvas")
window.geometry("400x300")

# إنشاء عنصر Canvas
canvas = tk.Canvas(window, width=350, height=250, bg="lightgray")
canvas.pack(pady=10)

# رسم خط
canvas.create_line(20, 20, 200, 20, fill="blue", width=2)

# رسم مستطيل
canvas.create_rectangle(50, 50, 150, 100, fill="green")

# رسم دائرة
canvas.create_oval(200, 50, 280, 130, fill="red")

# رسم نص
canvas.create_text(180, 180, text="رسم داخل Canvas", font=("Arial", 12), fill="black")

window.mainloop()

💡 شرح سريع:

الوظيفة الشرح
create_line() يرسم خطًا من نقطة إلى أخرى
create_rectangle() يرسم مستطيلًا باستخدام زاويتين
create_oval() يرسم دائرة أو بيضاويًا داخل مستطيل وهمي
create_text() يكتب نصًا داخل الـ Canvas في مكان محدد

✅ التمرين: "لوحة رسومية لعلم مصر"

🎯 المطلوب:

أنشئ نافذة تحتوي على عنصر Canvas، وداخلها:

  • ثلاث مستطيلات تمثل ألوان العلم (أسود - أبيض - أحمر).
  • نص في وسط العلم يقول "مصر" بلون ذهبي.

🧾 الحل الكامل:

import tkinter as tk

# إنشاء النافذة
window = tk.Tk()
window.title("علم مصر - باستخدام Canvas")
window.geometry("400x250")

# إنشاء Canvas
canvas = tk.Canvas(window, width=360, height=180, bg="white", highlightthickness=0)
canvas.pack(pady=20)

# المستطيل العلوي (أحمر)
canvas.create_rectangle(10, 10, 350, 70, fill="red", width=0)

# المستطيل الأوسط (أبيض)
canvas.create_rectangle(10, 70, 350, 130, fill="white", width=0)

# المستطيل السفلي (أسود)
canvas.create_rectangle(10, 130, 350, 190, fill="black", width=0)

# النص في منتصف العلم
canvas.create_text(180, 100, text="مصر", font=("Arial", 20, "bold"), fill="gold")

window.mainloop()

💡 شرح التمرين:

الجزء الوظيفة
create_rectangle() يرسم المستطيلات الثلاثة لألوان العلم
fill="color" يحدد لون كل مستطيل
create_text() يضيف كلمة "مصر" في منتصف العلم
highlightthickness=0 لإزالة حدود Canvas

✅ الناتج المتوقع:

لوحة بسيطة تمثل علم مصر بثلاثة ألوان أفقية متساوية، وكلمة "مصر" في الوسط.

إرسال تعليق

0 تعليقات