تابلو نقاشی یا canvas

ویجتی که هر رابط کاربری باید در اختیار داشته باشد تابلو نقاشی یا همان canvas هست که tkinter نیز این ویجت را دارد. در canvas می توان اشکال گرافیکی دلخواه را رسم کرد، مانند خط ، منحنی، مستطیل، دایره و …
بگذارید برای شروع یک تابلوی خالی با رنگ پس زمینه سفید ایجاد کنیم:

import tkinter as tk
from  tkinter import *
root=tk.Tk()
root.geometry("300x220")
root.resizable(False,False)
cv = Canvas(root, bg = "white",bd=2,relief="groove")
cv.place(height=200,width=280,x=10,y=10)
root.mainloop()

طبق معمول یک پنجره ایجاد می کنیم و در خط 6 یک تابلو به نام cv درست می کنیم و رنگ پس زمینه آن را سفید و کلفتی کادر دورش را 2 پیکسل و نوع کادر را groove تعیین می نماییم. در خط 7 اندازه و مکان آن را مشخص می کنیم و در پایان حلقه اصلی برنامه قرار دارد.

در زیر می بینید برنامه بعد از اجرا به چه شکل خواهد بود:

در ادامه برنامه ای می نویسیم که چند شکل مختلف را روی تابلو ترسیم کند و بعد  دستور مورد نیاز برای ترسیم هر یک را توضیح می دهیم:

import tkinter as tk
from  tkinter import *
root=tk.Tk()
root.geometry("800x600")
root.resizable(False,False)
cv = Canvas(root, bg = "white",bd=2,relief="groove")
cv.place(height=580,width=780,x=10,y=10)
line1 = cv.create_line(10, 10, 100, 200, fill="green", width=4)
line2 = cv.create_line(200, 100, 300, 250, 450, 120, fill="#FF00FF")
box1=cv.create_rectangle(500, 200, 700, 300, outline="#888888")
ovl=cv.create_oval(500, 200, 700, 300, fill="#FFFF00", width=3)
txt=cv.create_text(650,500,fill="blue",font="arial 30 italic bold",text="karakit.ir")
poly=cv.create_polygon(400,400,500,400,500,500,400,500,300,450,fill="red")
coord = 10, 300, 210, 500
arc = cv.create_arc(coord, start=0, extent=150, fill="cyan")
box2=cv.create_rectangle(coord)
root.mainloop()

ابتدا ببینیم که نتیجه اجرای برنامه به چه صورت است:

خطوط 1 تا 7 مشابه قبل هست و تا اینجا یک پنجره و یک تابلو روی اون ایجاد کردیم.

خط  یا line

در خط 8 با استفاده از دستور create_line یک خط ایجاد کردیم که مختصات یک سر آن 10 و 10 و مختصات سر  دیگر آن 100 و 200 است. کلفتی این خط را 4 پیکسل در نظر گرفتیم و رنگ داخل آن را سبز کردیم.

اما با همین دستور می توان چند خط پشت سر هم کشید. مثلا در خط 9 یک خط شکسته ایجاد کرده ایم. در واقع مختصات سه نقطه را داده ایم و آنها را به ترتیب به هم وصل کرده ایم. همان طور که مشخص هست لازم نیست که حتما اسم رنگ را بنویسیم. بلکه می توانیم با استفاده از کد RGB به پایتون بگوییم که می خواهیم از چه رنگی استفاده نماییم.

در اینجا رنگ را با #FF00FF مشخص کرده ایم که نتیجه آن یک خط شکسته بنفش است. در واقع دو کاراکتر سمت چپ مقدار رنگ قرمز، دو کاراکتر وسط مقدار رنگ سبز و دو کاراکتر سمت راست مقدار رنگ آبی را مشخص می کنند. در واقع رنگهای قرمز و سبز و آبی در این سیستم می توانند عددی از 0 تا 255 داشته باشند که در این نوع کدگذاری در مبنای 16 نوشته می شوند.

مستطیل یا rectangle

همان طور که در خط 10 می بینیم با استفاده از دستور create_rectangle  یک مستطیل رسم کرده ایم. برای این کار مختصات دو گوشه رو به روی هم را مشخص کرده ایم و با استفاده از outline تعیین نموده ایم که رنگ خط بیرونی آن خاکستری باشد.

بیضی یا oval

در خط 11 با دستور create_oval  یک بیضی رسم کرده ایم. در این دستور باید مختصات دو نقطه ای را مشخص کنیم که دو گوشه یک مستطیل را مشخص می کند که این بیضی در آن محاط شده است. برای روشنتر شدن موضوع مختصات این دو گوشه را مشابه نستطیلی که در خط قبل رسم کردیم در نظر گرفته ایم. همان طور که می بینید بیضی داخل مستطیل محاط شده است.

متن یا text

موقع قرار دادن متن در یک canvas می توانیم غیر از رنگ و مکان جاگذاری و نوشته داخل آن، مشخصات فونت را نیز کشخص نماییم. مثلا در خط 12 با استفاده از دستور create_text  یک متن ایجاد کرده ایم که فونت آن Arial و اندازه فونت 30 هست و به صورت italic و bold نوشته می شود.

چندضلعی یا polygon

در خط 13 می بینیم که چطور می توان یک چند ضلعی را با دستور create_polygon رسم کرد. برای این کار باید مختصات نقاطی را که باید پشت سر هم به هم وصل شوند وارد کنیم. این دستور خود به خود آخرین نقطه را به اولین نقطه وصل می کند.

منحنی یا arc

قبل از اینکه بخواهیم یک منحنی رسم کنیم بگذارید یک ترفند ساده را برای وارد کردن مختصات نقاط آموزش دهیم. برای اینکه مختصات را وارد کنیم می توانیم آنها را در یک لیست ذخیره کنیم و بعد لیست را به دستوری که شکل را ترسیم می کند بدهیم. در برنامه ما در خط 14 ابتدا مختصات 2 نقطه را در coord ذخیره کرده ایم. سپس در خط 15 با استفاده از دستور create_arc  یک منحنی ایجاد می کنیم و این بار مختصات را از طریق coord وارد می کنیم. منحنی به نحوی رسم خواهد شد که اگر 360 درجه باشد درون مستطیلی محاط خواهد شد که دو گوشه مقابل آن همان مختصاتی است که مشخص کرده ایم.

بعد از تعیین مختصات زاویه شروع رسم منحنی و زاویه پایان رسم منحنی را مشخص کرده ایم که در شکل قابل رویت است.

برای روشنتر شدن موضوع با استفاده از coord یک مستطیل هم در خط بعدی رسم کرده ایم که مشخص شود حدود رسم منحنی کجاست.

می توان با استفاده از style نحوه نمایش منحنی را تغییر داد. مقدار پیش فرض این پارامتر “pieslice” است. اگر مقدار آن را “chord” بگذاریم منحنی به همراه وتر ترسیم می شود و اگر مقدار آن را برابر “arc” قرار دهیم منحنی به تنهایی و بدون وتر یا زاویه روبه رو رسم می شود.

حالتهای مختلف رسم منحنی یا arc در tkinter

حذف یک شکل با استفاده از delete

گاهی اوقات می خواهیم بعد از اینکه کارمان با یک شکل تمام شد آن را حذف کنیم. برای اینکه ببینیم چطور می شود این کار را کرد خط زیر را قبل از خط آخر برنامه مان اضافه می کنیم:

cv.delete(box2)

می بینیم که با اجرای برنامه دیگر مستطیلی که دور منحنی کشیده شده بود مشاهده نمی شود.

برای اینکه همه اشکال ترسیم شده روی تابلو پاک شود می توانیم از این کد استفاده کنیم:

cv.delete("all")

نمایش تصویر در canvas

قبل از هر چیز باید خاطرنشان کرد که بدون فراخوانی کتابخانه های دیگر فقط می توان تصاویر با فرمت gif و png را در canvas نمایش داد. برنامه زیر را ببینید:

import tkinter as tk
from  tkinter import *
root=tk.Tk()
root.geometry("800x600")
root.resizable(False,False)
cv = Canvas(root, bg = "white",bd=2,relief="groove")
cv.place(height=580,width=780,x=10,y=10)
img=tk.PhotoImage(file='D:/Python tutorial/tkinter/karakit.png')
canvas_img=cv.create_image(10,10,image=img, anchor=NW)
root.mainloop()

نتیجه اجرای برنامه در تصویر زیر قابل مشاهده هست:

خطوط 1 تا 7 مانند قبل است. در خط 8 ابتدا یک فایل تصویری را با نام karakit.png را با استفاده از دستور PhotoImage در img ذخیره کردیم. باید توجه شود که موقع ارایه آدرس فایل به این دستور از علامت اسلش / استفاده کنیم.

در خط بعدی با استفاده از دستور create_image تصویری را که در خط قبلی داخل img بارگذاری کردیم در canvas_img قرار می دهیم و این شی را ایجاد می کنیم و در مختصات 10 و 10 تابلو (canvas) نمایش می دهیم. با استفاده از anchor=NW مشخص می کنیم که گوشه بالا سمت چپ تصویر در مختصات 10 و 10 قرار بگیرد.