{"id":105,"date":"2018-12-11T16:08:22","date_gmt":"2018-12-11T16:08:22","guid":{"rendered":"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/?post_type=chapter&#038;p=105"},"modified":"2019-04-08T16:04:45","modified_gmt":"2019-04-08T16:04:45","slug":"graafikaraamistik-tkinter-tahvel","status":"publish","type":"chapter","link":"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/chapter\/graafikaraamistik-tkinter-tahvel\/","title":{"raw":"Graafikaraamistik Tkinter. Tahvel","rendered":"Graafikaraamistik Tkinter. Tahvel"},"content":{"raw":"Selles peat\u00fckis tutvume Pythoni graafikaraamistikuga Tkinter. Uurime Tkinteri programmide \u00fcldist \u00fclesehitust ja v\u00f5imalust teha pilte tahvlil (<em>canvas<\/em>). Kasutajaliidese v\u00f5imalusi vaatleme j\u00e4rgmises peat\u00fckis.\r\n<h2>Tk ja Tkinter<\/h2>\r\nVarem oleme lihtsat graafikat loonud kilpkonnaga (moodul <em>turtle<\/em>), kuid sisukama graafika jaoks on olemas teised moodulid. Selles peat\u00fckis kasutame moodulit\u00a0<em>tkinter<\/em> (ja selle alammoodulit\u00a0<em>tkinter.ttk<\/em>), et luua graafilise kasutajaliidesega programme.\r\n\r\nMoodul <em>tkinter<\/em> kuulub Pythoni standardsete moodulite hulka ning t\u00f6\u00f6tab erinevatel operatsioonis\u00fcsteemidel. Pythoni moodul p\u00f5hineb teegil Tk, mida kasutatakse ka teistes programmeerimiskeeltes.\r\n\r\nK\u00e4esolev materjal p\u00f5hineb Tkinteri versioonil 8.5, mis on Python 3 (ja Thonnyga) kaasas. Selles versioonis tehtud kasutajaliidesed on kasutatavale operatsioonis\u00fcsteemile (Windows, Mac OS, Linux) omase v\u00e4limusega.\r\n\r\nTkinteri paljudest v\u00f5imalustest vaatleme selles \u00f5pikus vaid v\u00e4ikest osa. P\u00f5hjalikumat teavet v\u00f5ib leida teistest materjalidest.\r\n<ul>\r\n \t<li><a class=\"urllink\" href=\"http:\/\/www.tkdocs.com\/\" target=\"_blank\" rel=\"noopener\">http:\/\/www.tkdocs.com\/<\/a> \u2013 hea materjal Tk ja Tkinteri p\u00f5him\u00f5tete \u00f5ppimiseks.<\/li>\r\n<\/ul>\r\n<h2>Graafikaakna osad<\/h2>\r\nHarilik graafikaaken koosneb j\u00e4rgmistest osadest:\r\n<ul>\r\n \t<li><strong>raam,<\/strong><\/li>\r\n \t<li><strong>tahvlid,<\/strong><\/li>\r\n \t<li><strong>atomaarsed komponendid.<\/strong><\/li>\r\n<\/ul>\r\n<strong>Raam<\/strong> kujutab endast tavaliselt akna p\u00f5himikku, mille \u00fclemises \u00e4\u00e4res on tiitliriba. Erirolli m\u00e4ngib <strong>juurraam<\/strong>, mis algatab Tkinteri eluts\u00fckli. Nii raam kui ka tahvel on <strong>konteinerid<\/strong>, mille sisse on v\u00f5imalik paigutada teisi graafikaelemente. N\u00e4iteks v\u00f5ime lisada raamile m\u00f5ne omaloodud tahvli ning sellele omakorda atomaarseid elemente. <strong>Atomaarsed elemendid<\/strong> on joonise n\u00e4htavad komponendid, milleks on erinevad nupud, sildid ning muud taolised elemendid. Lisaks on v\u00f5imalik tahvlile mitmesuguseid graafilisi kujutisi joonistada otse.\r\n<h2>Esimene graafikaprogramm<\/h2>\r\n<p class=\"vspace\">Koostame programmi, mis loob ja kuvab juurakna.<\/p>\r\n<p class=\"vspace\">Alustame sellest, et impordime k\u00f5ik mooduli <em>tkinter<\/em> klassid ja funktsioonid (arvesta, et mooduli nimes on <em>tkinter<\/em> v\u00e4ikese algust\u00e4hega):<\/p>\r\n\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-linenumbers=\"false\">from tkinter import *<\/pre>\r\n<p class=\"vspace\">Seej\u00e4rel loome juurakna. Raami tiitliks paneme \"Tere, maailm!\":<\/p>\r\n\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-linenumbers=\"false\">raam = Tk()\r\nraam.title(\"Tere, maailm!\")<\/pre>\r\nP\u00e4rast graafiliste elementide loomist tuleb siseneda Tkinteri p\u00f5hits\u00fcklisse \u2014 vastasel juhul ei toimu ekraanil midagi:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-linenumbers=\"false\">raam.mainloop()<\/pre>\r\nOlles selle ts\u00fckli sees, paigutab programm raamis olevad elemendid ning j\u00e4lgib kasutaja sisendit. Programm t\u00f6\u00f6tab ts\u00fcklis kuni p\u00f5hiraami sulgemiseni.\r\n<h3>Tahvel (<em>canvas<\/em>)<\/h3>\r\nTahvel kujutab endast ristk\u00fclikukujulist ala, mille peale saab joonistada graafilisi kujutisi. (S\u00f5na <em>canvas<\/em> on t\u00f5lkes pigem <em>l\u00f5uend<\/em>, mis oleks m\u00f5neti t\u00e4psem - l\u00f5uendile ju joonistataksegi. Mitmetes materjalides on siiski juurdunud vasteks <em>tahvel<\/em>.) Paneme t\u00e4hele, et koordinaadistiku alguspunkt asub tahvli \u00fclemises vasakus nurgas ning x-koordinaat suureneb vasakult paremale ja y-koordinaat \u00fclevalt alla. M\u00f5\u00f5t\u00fchikuteks on pikslid (ehk ekraanit\u00e4pid) ja seega on koordinaatide v\u00e4\u00e4rtusteks t\u00e4isarvud.\r\n\r\n&nbsp;\r\n\r\n[caption id=\"attachment_106\" align=\"aligncenter\" width=\"248\"]<img class=\"wp-image-106 size-full\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2018\/12\/xytelg.png\" alt=\"\" width=\"248\" height=\"204\" \/> Joonis 1. Tahvli koordinaadid[\/caption]\r\n<p class=\"vspace\">Lisame n\u00fc\u00fcd raamile t\u00fchja tahvli:<\/p>\r\n<strong>N\u00e4iteprogramm. T\u00fchi tahvel<\/strong>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-linenumbers=\"false\">from tkinter import *\r\nraam = Tk()\r\nraam.title(\"T\u00fchi tahvel\")\r\n# loome tahvli laiusega 600px\r\ntahvel = Canvas(raam, width=600)\r\n# paigutame tahvli raami ja teeme n\u00e4htavaks\r\ntahvel.pack()\r\n# siseneme p\u00f5hits\u00fcklisse\r\nraam.mainloop()<\/pre>\r\n<p class=\"vspace\">Peale laiuse v\u00f5ib tahvlile ette anda mitmeid teisi argumente. Nende loetelu kuvatakse, kui k\u00fcsida dokumentatsiooni tahvli kohta (ehk kirjutada k\u00e4sureale):<\/p>\r\n\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-linenumbers=\"false\">&gt;&gt;&gt; print(Canvas.__init__.__doc__)<\/pre>\r\nT\u00e4ienda tahvli loomise k\u00e4sku, muutes tahvli taustav\u00e4rvi (nt <code><code><code class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">background=\"red\"<\/code><\/code><\/code>) ning tahvli k\u00f5rgust (<em>height<\/em>).\r\n<h3>Graafikaelementide lisamine<\/h3>\r\nTahvlile saab lisada mitmesuguseid graafikaelemente: jooni, kaari, pilte, ringe, hulknurkasid, ristk\u00fclikuid ja teksti. Iga sellise objekti loomiseks on olemas vastav k\u00e4sk (mis algab <em>create_<\/em>), millele antakse ette kujundi positsioon ja stiil. Vaatleme m\u00f5nda neist l\u00e4hemalt.\r\n<h4>Murdjoon<\/h4>\r\nMurdjoon, mille tippudeks on (x0, y0), (x1, y1), ..., (xn, yn), joonistatakse <code><code class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">create_line(x0, y0, x1, y1, ..., xn, yn, option, ...)<\/code><\/code> abil. M\u00f5ned n\u00e4ited:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-linenumbers=\"false\"># \u00fcks horisontaalne sirgl\u00f5ik\r\ntahvel.create_line(50,50,100,50)\r\n \r\n# horisontaalne sirgl\u00f5ik ja vertikaalne sirgl\u00f5ik\r\ntahvel.create_line(50,150,100,150,100,200)\r\n \r\n# sirgl\u00f5ik paksusega 4px\r\ntahvel.create_line(50,100,100,250, width=4)\r\n \r\n# rohelist v\u00e4rvi nool paksusega 4px\r\ntahvel.create_line(350,50,350,100, width=4, fill=\"green\", arrow=LAST)<\/pre>\r\n<p class=\"vspace\">Argumendi v\u00e4\u00e4rtus <em><code><code class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">arrow=LAST<\/code><\/code><\/em><em><code><\/code><\/em> kujundab joone l\u00f5ppu nooleotsa.<\/p>\r\n\r\n<h4>Ristk\u00fclik<\/h4>\r\nRistk\u00fcliku, mille \u00fclemise vasakpoolse tipu koordinaadid on (x0, y0) ja alumise parempoolse tipu koordinaadid on (x1, y1), saame <code><code class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">create_rectangle (x0, y0, x1, y1, option, ... )<\/code><\/code> <code><\/code>abil. M\u00f5ned n\u00e4ited:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-linenumbers=\"false\"># seest t\u00fchi ristk\u00fclik (ruut) mustade servadega\r\ntahvel.create_rectangle(150,50,200,100)\r\n \r\n# seest t\u00fchi ristk\u00fclik kollaste servadega, mille paksus on 2px\r\ntahvel.create_rectangle(150,150,200,200, width=2, outline=\"yellow\")\r\n \r\n# mustade servadega roheline ristk\u00fclik\r\ntahvel.create_rectangle(150,250,200,300, fill=\"green\")<\/pre>\r\n<h4>Hulknurk<\/h4>\r\nHulknurga tippudega (x0, y0), (x1, y1), ... saame <code><\/code><code class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">create_polygon(x0, y0, x1, y1, ..., option, ...)<\/code> abil. N\u00e4ide:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-linenumbers=\"false\"># mustade servadega punane kolmnurk\r\ntahvel.create_polygon(150,350,150,400,200,375, fill=\"red\",\r\noutline=\"black\")<\/pre>\r\n<h4>Ovaal<\/h4>\r\n<p class=\"vspace\">Ovaali joonistab <code><\/code><code class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">create_oval(x0, y0, x1, y1, option, ... )<\/code>. Ovaal on m\u00f5tteliselt piiratud ristk\u00fclikuga, mille \u00fclemise vasakpoolse tipu koordinaadid on (x0, y0) ja alumise parempoolse tipu koordinaadid on (x1, y1). Ovaali joonistamisel peate seega arvestama ristk\u00fclikuga, mis seda \u00fcmbritseb. N\u00e4ide:<\/p>\r\n\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-linenumbers=\"false\"># roheliste servadega punane ovaal(ring)\r\ntahvel.create_oval(10,10,100,100, fill=\"red\", outline=\"green\")<\/pre>\r\n<h4>Tekst<\/h4>\r\n<p class=\"vspace\">Teksti saame tahvlile <code><code class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">create_text(x0, y0, option, ... )<\/code><\/code> <code><\/code>abil. Tekst tuleb ette anda argumendiga <code class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">text<\/code>. Teksti koht s\u00f5ltub koordinaatidest (x0, y0) ning argumendist <code class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">anchor<\/code>. Vaikimisi on punkt (x0, y0) teksti keskel. N\u00e4ide:<\/p>\r\n\r\n<div>\r\n<div class=\"syntaxhighlighter nogutter python\">\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-linenumbers=\"false\"># musta v\u00e4rvi tekst \"Tere!\"\r\ntahvel.create_text(50,50, text=\"Tere!\")\r\n\r\n# sinist v\u00e4rvi teksti \"Tere!\" alumine vasak punkt on (50, 50)\r\ntahvel.create_text(50,50, text=\"Tere!\", anchor=SW, fill=\"blue\")<\/pre>\r\n<\/div>\r\n<\/div>\r\n<p class=\"vspace\">Argumendi\u00a0<code class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">anchor<\/code> teised v\u00f5imalikud v\u00e4\u00e4rtused on CENTER ja ilmakaartele vastavad N, NE, E, SE, S, W ja NW.<\/p>\r\n\r\n<h3>Ts\u00fcklid<\/h3>\r\nKui joonistusel on korduvaid elemente, siis v\u00f5ib olla abi ts\u00fcklitest. Teeme n\u00e4iteks Haapsalu ja Sillam\u00e4e lipud.\r\n\r\n<strong>N\u00e4iteprogramm. Haapsalu lipp<\/strong>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">from tkinter import *\r\n \r\nraam = Tk()\r\nraam.title(\"Haapsalu lipp\")\r\n# loome tahvli laiusega 600px ja k\u00f5rgusega 300 px\r\ntahvel = Canvas(raam, width=600, height = 300)\r\n# \u00fche joone k\u00f5rgus\r\nk\u00f5rgus = 100\r\n# ts\u00fcklimuutuja\r\ni = 0\r\nwhile i &lt; 3:\r\n    # esimene ja kolmas joon\r\n    if i == 0 or i == 2:\r\n    #if i % 2 == 0:\r\n        # sinine v\u00e4ike ristk\u00fclik\r\n        tahvel.create_rectangle(0, i * k\u00f5rgus, 200, (i + 1) * k\u00f5rgus, fill=\"blue\", outline=\"blue\")\r\n        # valge suur ristk\u00fclik\r\n        tahvel.create_rectangle(200, i * k\u00f5rgus, 600, (i + 1) * k\u00f5rgus, fill=\"white\", outline=\"white\")\r\n    # teine joon\r\n    else:\r\n        # valge v\u00e4ike ristk\u00fclik\r\n        tahvel.create_rectangle(0, i * k\u00f5rgus, 200, (i + 1) * k\u00f5rgus, fill=\"white\", outline=\"white\")\r\n        # sinine suur ristk\u00fclik\r\n        tahvel.create_rectangle(200, i * k\u00f5rgus, 600, (i + 1) * k\u00f5rgus, fill=\"blue\", outline=\"blue\")\r\n    # ts\u00fcklimuutuja suurendamine\r\n    i += 1\r\n# paigutame tahvli raami ja teeme n\u00e4htavaks\r\ntahvel.pack()\r\n# siseneme p\u00f5hits\u00fcklisse\r\nraam.mainloop()<\/pre>\r\n<strong>N\u00e4iteprogramm. Sillam\u00e4e lipp<\/strong>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">from tkinter import *\r\n \r\nraam = Tk()\r\nraam.title(\"Sillam\u00e4e lipp\")\r\n# loome tahvli laiusega 880px ja k\u00f5rgusega 560px\r\ntahvel = Canvas(raam, width=880, height = 560)\r\n \r\n#sinine taust\r\ntahvel.create_rectangle(0, 0, 880, 560, fill=\"blue\", outline=\"blue\")\r\n \r\n# ts\u00fcklimuutuja\r\ni = 0\r\nwhile i &lt; 5:\r\n    # kollane ristk\u00fclik vasakul\r\n    tahvel.create_rectangle(0+i*80, 560-3*70-i*70, 2*80+i*80, 560-i*70, fill=\"yellow\", outline=\"yellow\")\r\n    # kollane ristk\u00fclik paremal\r\n    tahvel.create_rectangle(880-2*80-i*80, 560-3*70-i*70, 880-i*80, 560-i*70, fill=\"yellow\", outline=\"yellow\")\r\n    i += 1\r\n \r\n#tipp\r\ntahvel.create_rectangle(880-6*80, 0, 880-5*80, 70, fill=\"yellow\", outline=\"yellow\")\r\n \r\n# paigutame tahvli raami ja teeme n\u00e4htavaks\r\ntahvel.pack()\r\n# siseneme p\u00f5hits\u00fcklisse\r\nraam.mainloop()<\/pre>\r\nVaata ka <a href=\"https:\/\/www.uttv.ee\/naita?id=23946\">n\u00e4idisprogrammi videot<\/a>.\r\n\r\nKui soovid lugeda liikuvate kujutiste ning funktsioonigraafikute joonistamise kohta, siis leiad need <a href=\"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/chapter\/lisalugemine-funktsiooni-graafik-liikuvad-pildid\/\">lisamaterjalide peat\u00fckist<\/a>.\r\n\r\nPalun kommenteeri seda materjali <a href=\"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLScibCy0Qxy4WIxCNhxXX8YIWLLQVj3g7aFpp4iLDInoGrl9jg\/viewform\" target=\"_blank\" rel=\"noopener\">Google'i k\u00fcsimustikus<\/a>.","rendered":"<p>Selles peat\u00fckis tutvume Pythoni graafikaraamistikuga Tkinter. Uurime Tkinteri programmide \u00fcldist \u00fclesehitust ja v\u00f5imalust teha pilte tahvlil (<em>canvas<\/em>). Kasutajaliidese v\u00f5imalusi vaatleme j\u00e4rgmises peat\u00fckis.<\/p>\n<h2>Tk ja Tkinter<\/h2>\n<p>Varem oleme lihtsat graafikat loonud kilpkonnaga (moodul <em>turtle<\/em>), kuid sisukama graafika jaoks on olemas teised moodulid. Selles peat\u00fckis kasutame moodulit\u00a0<em>tkinter<\/em> (ja selle alammoodulit\u00a0<em>tkinter.ttk<\/em>), et luua graafilise kasutajaliidesega programme.<\/p>\n<p>Moodul <em>tkinter<\/em> kuulub Pythoni standardsete moodulite hulka ning t\u00f6\u00f6tab erinevatel operatsioonis\u00fcsteemidel. Pythoni moodul p\u00f5hineb teegil Tk, mida kasutatakse ka teistes programmeerimiskeeltes.<\/p>\n<p>K\u00e4esolev materjal p\u00f5hineb Tkinteri versioonil 8.5, mis on Python 3 (ja Thonnyga) kaasas. Selles versioonis tehtud kasutajaliidesed on kasutatavale operatsioonis\u00fcsteemile (Windows, Mac OS, Linux) omase v\u00e4limusega.<\/p>\n<p>Tkinteri paljudest v\u00f5imalustest vaatleme selles \u00f5pikus vaid v\u00e4ikest osa. P\u00f5hjalikumat teavet v\u00f5ib leida teistest materjalidest.<\/p>\n<ul>\n<li><a class=\"urllink\" href=\"http:\/\/www.tkdocs.com\/\" target=\"_blank\" rel=\"noopener\">http:\/\/www.tkdocs.com\/<\/a> \u2013 hea materjal Tk ja Tkinteri p\u00f5him\u00f5tete \u00f5ppimiseks.<\/li>\n<\/ul>\n<h2>Graafikaakna osad<\/h2>\n<p>Harilik graafikaaken koosneb j\u00e4rgmistest osadest:<\/p>\n<ul>\n<li><strong>raam,<\/strong><\/li>\n<li><strong>tahvlid,<\/strong><\/li>\n<li><strong>atomaarsed komponendid.<\/strong><\/li>\n<\/ul>\n<p><strong>Raam<\/strong> kujutab endast tavaliselt akna p\u00f5himikku, mille \u00fclemises \u00e4\u00e4res on tiitliriba. Erirolli m\u00e4ngib <strong>juurraam<\/strong>, mis algatab Tkinteri eluts\u00fckli. Nii raam kui ka tahvel on <strong>konteinerid<\/strong>, mille sisse on v\u00f5imalik paigutada teisi graafikaelemente. N\u00e4iteks v\u00f5ime lisada raamile m\u00f5ne omaloodud tahvli ning sellele omakorda atomaarseid elemente. <strong>Atomaarsed elemendid<\/strong> on joonise n\u00e4htavad komponendid, milleks on erinevad nupud, sildid ning muud taolised elemendid. Lisaks on v\u00f5imalik tahvlile mitmesuguseid graafilisi kujutisi joonistada otse.<\/p>\n<h2>Esimene graafikaprogramm<\/h2>\n<p class=\"vspace\">Koostame programmi, mis loob ja kuvab juurakna.<\/p>\n<p class=\"vspace\">Alustame sellest, et impordime k\u00f5ik mooduli <em>tkinter<\/em> klassid ja funktsioonid (arvesta, et mooduli nimes on <em>tkinter<\/em> v\u00e4ikese algust\u00e4hega):<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-linenumbers=\"false\">from tkinter import *<\/pre>\n<p class=\"vspace\">Seej\u00e4rel loome juurakna. Raami tiitliks paneme &#8220;Tere, maailm!&#8221;:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-linenumbers=\"false\">raam = Tk()\r\nraam.title(\"Tere, maailm!\")<\/pre>\n<p>P\u00e4rast graafiliste elementide loomist tuleb siseneda Tkinteri p\u00f5hits\u00fcklisse \u2014 vastasel juhul ei toimu ekraanil midagi:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-linenumbers=\"false\">raam.mainloop()<\/pre>\n<p>Olles selle ts\u00fckli sees, paigutab programm raamis olevad elemendid ning j\u00e4lgib kasutaja sisendit. Programm t\u00f6\u00f6tab ts\u00fcklis kuni p\u00f5hiraami sulgemiseni.<\/p>\n<h3>Tahvel (<em>canvas<\/em>)<\/h3>\n<p>Tahvel kujutab endast ristk\u00fclikukujulist ala, mille peale saab joonistada graafilisi kujutisi. (S\u00f5na <em>canvas<\/em> on t\u00f5lkes pigem <em>l\u00f5uend<\/em>, mis oleks m\u00f5neti t\u00e4psem &#8211; l\u00f5uendile ju joonistataksegi. Mitmetes materjalides on siiski juurdunud vasteks <em>tahvel<\/em>.) Paneme t\u00e4hele, et koordinaadistiku alguspunkt asub tahvli \u00fclemises vasakus nurgas ning x-koordinaat suureneb vasakult paremale ja y-koordinaat \u00fclevalt alla. M\u00f5\u00f5t\u00fchikuteks on pikslid (ehk ekraanit\u00e4pid) ja seega on koordinaatide v\u00e4\u00e4rtusteks t\u00e4isarvud.<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_106\" aria-describedby=\"caption-attachment-106\" style=\"width: 248px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-106 size-full\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2018\/12\/xytelg.png\" alt=\"\" width=\"248\" height=\"204\" srcset=\"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2018\/12\/xytelg.png 248w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2018\/12\/xytelg-65x53.png 65w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2018\/12\/xytelg-225x185.png 225w\" sizes=\"auto, (max-width: 248px) 100vw, 248px\" \/><figcaption id=\"caption-attachment-106\" class=\"wp-caption-text\">Joonis 1. Tahvli koordinaadid<\/figcaption><\/figure>\n<p class=\"vspace\">Lisame n\u00fc\u00fcd raamile t\u00fchja tahvli:<\/p>\n<p><strong>N\u00e4iteprogramm. T\u00fchi tahvel<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-linenumbers=\"false\">from tkinter import *\r\nraam = Tk()\r\nraam.title(\"T\u00fchi tahvel\")\r\n# loome tahvli laiusega 600px\r\ntahvel = Canvas(raam, width=600)\r\n# paigutame tahvli raami ja teeme n\u00e4htavaks\r\ntahvel.pack()\r\n# siseneme p\u00f5hits\u00fcklisse\r\nraam.mainloop()<\/pre>\n<p class=\"vspace\">Peale laiuse v\u00f5ib tahvlile ette anda mitmeid teisi argumente. Nende loetelu kuvatakse, kui k\u00fcsida dokumentatsiooni tahvli kohta (ehk kirjutada k\u00e4sureale):<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-linenumbers=\"false\">&gt;&gt;&gt; print(Canvas.__init__.__doc__)<\/pre>\n<p>T\u00e4ienda tahvli loomise k\u00e4sku, muutes tahvli taustav\u00e4rvi (nt <code><code><code class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">background=\"red\"<\/code><\/code><\/code>) ning tahvli k\u00f5rgust (<em>height<\/em>).<\/p>\n<h3>Graafikaelementide lisamine<\/h3>\n<p>Tahvlile saab lisada mitmesuguseid graafikaelemente: jooni, kaari, pilte, ringe, hulknurkasid, ristk\u00fclikuid ja teksti. Iga sellise objekti loomiseks on olemas vastav k\u00e4sk (mis algab <em>create_<\/em>), millele antakse ette kujundi positsioon ja stiil. Vaatleme m\u00f5nda neist l\u00e4hemalt.<\/p>\n<h4>Murdjoon<\/h4>\n<p>Murdjoon, mille tippudeks on (x0, y0), (x1, y1), &#8230;, (xn, yn), joonistatakse <code><code class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">create_line(x0, y0, x1, y1, ..., xn, yn, option, ...)<\/code><\/code> abil. M\u00f5ned n\u00e4ited:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-linenumbers=\"false\"># \u00fcks horisontaalne sirgl\u00f5ik\r\ntahvel.create_line(50,50,100,50)\r\n \r\n# horisontaalne sirgl\u00f5ik ja vertikaalne sirgl\u00f5ik\r\ntahvel.create_line(50,150,100,150,100,200)\r\n \r\n# sirgl\u00f5ik paksusega 4px\r\ntahvel.create_line(50,100,100,250, width=4)\r\n \r\n# rohelist v\u00e4rvi nool paksusega 4px\r\ntahvel.create_line(350,50,350,100, width=4, fill=\"green\", arrow=LAST)<\/pre>\n<p class=\"vspace\">Argumendi v\u00e4\u00e4rtus <em><code><code class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">arrow=LAST<\/code><\/code><\/em><em><code><\/code><\/em> kujundab joone l\u00f5ppu nooleotsa.<\/p>\n<h4>Ristk\u00fclik<\/h4>\n<p>Ristk\u00fcliku, mille \u00fclemise vasakpoolse tipu koordinaadid on (x0, y0) ja alumise parempoolse tipu koordinaadid on (x1, y1), saame <code><code class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">create_rectangle (x0, y0, x1, y1, option, ... )<\/code><\/code> <code><\/code>abil. M\u00f5ned n\u00e4ited:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-linenumbers=\"false\"># seest t\u00fchi ristk\u00fclik (ruut) mustade servadega\r\ntahvel.create_rectangle(150,50,200,100)\r\n \r\n# seest t\u00fchi ristk\u00fclik kollaste servadega, mille paksus on 2px\r\ntahvel.create_rectangle(150,150,200,200, width=2, outline=\"yellow\")\r\n \r\n# mustade servadega roheline ristk\u00fclik\r\ntahvel.create_rectangle(150,250,200,300, fill=\"green\")<\/pre>\n<h4>Hulknurk<\/h4>\n<p>Hulknurga tippudega (x0, y0), (x1, y1), &#8230; saame <code><\/code><code class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">create_polygon(x0, y0, x1, y1, ..., option, ...)<\/code> abil. N\u00e4ide:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-linenumbers=\"false\"># mustade servadega punane kolmnurk\r\ntahvel.create_polygon(150,350,150,400,200,375, fill=\"red\",\r\noutline=\"black\")<\/pre>\n<h4>Ovaal<\/h4>\n<p class=\"vspace\">Ovaali joonistab <code><\/code><code class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">create_oval(x0, y0, x1, y1, option, ... )<\/code>. Ovaal on m\u00f5tteliselt piiratud ristk\u00fclikuga, mille \u00fclemise vasakpoolse tipu koordinaadid on (x0, y0) ja alumise parempoolse tipu koordinaadid on (x1, y1). Ovaali joonistamisel peate seega arvestama ristk\u00fclikuga, mis seda \u00fcmbritseb. N\u00e4ide:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-linenumbers=\"false\"># roheliste servadega punane ovaal(ring)\r\ntahvel.create_oval(10,10,100,100, fill=\"red\", outline=\"green\")<\/pre>\n<h4>Tekst<\/h4>\n<p class=\"vspace\">Teksti saame tahvlile <code><code class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">create_text(x0, y0, option, ... )<\/code><\/code> <code><\/code>abil. Tekst tuleb ette anda argumendiga <code class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">text<\/code>. Teksti koht s\u00f5ltub koordinaatidest (x0, y0) ning argumendist <code class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">anchor<\/code>. Vaikimisi on punkt (x0, y0) teksti keskel. N\u00e4ide:<\/p>\n<div>\n<div class=\"syntaxhighlighter nogutter python\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-linenumbers=\"false\"># musta v\u00e4rvi tekst \"Tere!\"\r\ntahvel.create_text(50,50, text=\"Tere!\")\r\n\r\n# sinist v\u00e4rvi teksti \"Tere!\" alumine vasak punkt on (50, 50)\r\ntahvel.create_text(50,50, text=\"Tere!\", anchor=SW, fill=\"blue\")<\/pre>\n<\/div>\n<\/div>\n<p class=\"vspace\">Argumendi\u00a0<code class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">anchor<\/code> teised v\u00f5imalikud v\u00e4\u00e4rtused on CENTER ja ilmakaartele vastavad N, NE, E, SE, S, W ja NW.<\/p>\n<h3>Ts\u00fcklid<\/h3>\n<p>Kui joonistusel on korduvaid elemente, siis v\u00f5ib olla abi ts\u00fcklitest. Teeme n\u00e4iteks Haapsalu ja Sillam\u00e4e lipud.<\/p>\n<p><strong>N\u00e4iteprogramm. Haapsalu lipp<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">from tkinter import *\r\n \r\nraam = Tk()\r\nraam.title(\"Haapsalu lipp\")\r\n# loome tahvli laiusega 600px ja k\u00f5rgusega 300 px\r\ntahvel = Canvas(raam, width=600, height = 300)\r\n# \u00fche joone k\u00f5rgus\r\nk\u00f5rgus = 100\r\n# ts\u00fcklimuutuja\r\ni = 0\r\nwhile i &lt; 3:\r\n    # esimene ja kolmas joon\r\n    if i == 0 or i == 2:\r\n    #if i % 2 == 0:\r\n        # sinine v\u00e4ike ristk\u00fclik\r\n        tahvel.create_rectangle(0, i * k\u00f5rgus, 200, (i + 1) * k\u00f5rgus, fill=\"blue\", outline=\"blue\")\r\n        # valge suur ristk\u00fclik\r\n        tahvel.create_rectangle(200, i * k\u00f5rgus, 600, (i + 1) * k\u00f5rgus, fill=\"white\", outline=\"white\")\r\n    # teine joon\r\n    else:\r\n        # valge v\u00e4ike ristk\u00fclik\r\n        tahvel.create_rectangle(0, i * k\u00f5rgus, 200, (i + 1) * k\u00f5rgus, fill=\"white\", outline=\"white\")\r\n        # sinine suur ristk\u00fclik\r\n        tahvel.create_rectangle(200, i * k\u00f5rgus, 600, (i + 1) * k\u00f5rgus, fill=\"blue\", outline=\"blue\")\r\n    # ts\u00fcklimuutuja suurendamine\r\n    i += 1\r\n# paigutame tahvli raami ja teeme n\u00e4htavaks\r\ntahvel.pack()\r\n# siseneme p\u00f5hits\u00fcklisse\r\nraam.mainloop()<\/pre>\n<p><strong>N\u00e4iteprogramm. Sillam\u00e4e lipp<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">from tkinter import *\r\n \r\nraam = Tk()\r\nraam.title(\"Sillam\u00e4e lipp\")\r\n# loome tahvli laiusega 880px ja k\u00f5rgusega 560px\r\ntahvel = Canvas(raam, width=880, height = 560)\r\n \r\n#sinine taust\r\ntahvel.create_rectangle(0, 0, 880, 560, fill=\"blue\", outline=\"blue\")\r\n \r\n# ts\u00fcklimuutuja\r\ni = 0\r\nwhile i &lt; 5:\r\n    # kollane ristk\u00fclik vasakul\r\n    tahvel.create_rectangle(0+i*80, 560-3*70-i*70, 2*80+i*80, 560-i*70, fill=\"yellow\", outline=\"yellow\")\r\n    # kollane ristk\u00fclik paremal\r\n    tahvel.create_rectangle(880-2*80-i*80, 560-3*70-i*70, 880-i*80, 560-i*70, fill=\"yellow\", outline=\"yellow\")\r\n    i += 1\r\n \r\n#tipp\r\ntahvel.create_rectangle(880-6*80, 0, 880-5*80, 70, fill=\"yellow\", outline=\"yellow\")\r\n \r\n# paigutame tahvli raami ja teeme n\u00e4htavaks\r\ntahvel.pack()\r\n# siseneme p\u00f5hits\u00fcklisse\r\nraam.mainloop()<\/pre>\n<p>Vaata ka <a href=\"https:\/\/www.uttv.ee\/naita?id=23946\">n\u00e4idisprogrammi videot<\/a>.<\/p>\n<p>Kui soovid lugeda liikuvate kujutiste ning funktsioonigraafikute joonistamise kohta, siis leiad need <a href=\"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/chapter\/lisalugemine-funktsiooni-graafik-liikuvad-pildid\/\">lisamaterjalide peat\u00fckist<\/a>.<\/p>\n<p>Palun kommenteeri seda materjali <a href=\"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLScibCy0Qxy4WIxCNhxXX8YIWLLQVj3g7aFpp4iLDInoGrl9jg\/viewform\" target=\"_blank\" rel=\"noopener\">Google&#8217;i k\u00fcsimustikus<\/a>.<\/p>\n","protected":false},"author":12,"menu_order":2,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-105","chapter","type-chapter","status-publish","hentry"],"part":97,"_links":{"self":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-json\/pressbooks\/v2\/chapters\/105","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-json\/wp\/v2\/users\/12"}],"version-history":[{"count":9,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-json\/pressbooks\/v2\/chapters\/105\/revisions"}],"predecessor-version":[{"id":418,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-json\/pressbooks\/v2\/chapters\/105\/revisions\/418"}],"part":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-json\/pressbooks\/v2\/parts\/97"}],"metadata":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-json\/pressbooks\/v2\/chapters\/105\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-json\/wp\/v2\/media?parent=105"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-json\/pressbooks\/v2\/chapter-type?post=105"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-json\/wp\/v2\/contributor?post=105"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-json\/wp\/v2\/license?post=105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}