🎓 الدرس 55: التعامل مع الرسومات التفاعلية داخل Canvas

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

---

✅ الفكرة:

• نستخدم عنصر Canvas.
• نربط حدث الضغط والسحب بالماوس للرسم.
• كلما حرك المستخدم الماوس مع الضغط، نرسم خطًا قصيرًا بين النقطة السابقة والجديدة.

---

🧪 الكود التطبيقي:

import tkinter as tk

# إنشاء نافذة
root = tk.Tk()
root.title("لوحة الرسم")
root.geometry("500x400")

# عنصر Canvas
canvas = tk.Canvas(root, bg="white", width=500, height=400)
canvas.pack()

# متغير لتخزين الإحداثيات السابقة
last_x, last_y = None, None

# عند الضغط على الزر الأيسر للفأرة
def start_draw(event):
    global last_x, last_y
    last_x, last_y = event.x, event.y

# عند سحب الفأرة أثناء الضغط
def draw(event):
    global last_x, last_y
    canvas.create_line(last_x, last_y, event.x, event.y, fill="black", width=2)
    last_x, last_y = event.x, event.y

# ربط الأحداث
canvas.bind("<Button-1>", start_draw)       # ضغطة أولى بالماوس
canvas.bind("<B1-Motion>", draw)            # سحب أثناء الضغط

root.mainloop()

---

🧠 ما تعلمته:

• استخدام bind() لربط الأحداث بـ Canvas.
• الاستفادة من إحداثيات event.x و event.y.
• إنشاء خطوط ديناميكية لرسم بسيط يدويًا.

---

✅ التمرين:

أنشئ لوحة رسم تفاعلية يمكن من خلالها:

• الرسم بالماوس.
• تغيير لون القلم.
• استخدام ممحاة.
• مسح كل ما في اللوحة بزر "Clear".

---

🧪 الحل الكامل:

import tkinter as tk

# إنشاء النافذة
root = tk.Tk()
root.title("لوحة رسم بالألوان")
root.geometry("600x500")

# الإعدادات الافتراضية
current_color = "black"
last_x, last_y = None, None

# Canvas للرسم
canvas = tk.Canvas(root, bg="white", width=580, height=400)
canvas.pack(pady=10)

# بدء الرسم (تحديد أول نقطة)
def start_draw(event):
    global last_x, last_y
    last_x, last_y = event.x, event.y

# تنفيذ الرسم عند السحب
def draw(event):
    global last_x, last_y
    canvas.create_line(last_x, last_y, event.x, event.y, fill=current_color, width=3)
    last_x, last_y = event.x, event.y

# تغيير اللون
def set_color(color):
    global current_color
    current_color = color

# مسح كل اللوحة
def clear_canvas():
    canvas.delete("all")

# ربط الأحداث
canvas.bind("<Button-1>", start_draw)
canvas.bind("<B1-Motion>", draw)

# إطار الأزرار
button_frame = tk.Frame(root)
button_frame.pack(pady=5)

# أزرار اختيار اللون
colors = ["black", "red", "blue", "green", "purple"]
for c in colors:
    tk.Button(button_frame, text=c, bg=c, fg="white" if c != "yellow" else "black", width=7, command=lambda col=c: set_color(col)).pack(side=tk.LEFT, padx=2)

# زر الممحاة (لون أبيض مثل خلفية اللوحة)
tk.Button(button_frame, text="ممحاة", width=8, command=lambda: set_color("white")).pack(side=tk.LEFT, padx=10)

# زر مسح الكل
tk.Button(root, text="🗑️ مسح الكل", fg="white", bg="gray", width=15, command=clear_canvas).pack()

# تشغيل التطبيق
root.mainloop()

---

📌 ميزات التطبيق:

• 🖌️ رسم حر بالماوس.
• 🎨 اختيار لون القلم.
• 🧽 ممحاة (تستخدم اللون الأبيض).
• 🗑️ زر لمسح كل الرسومات.