0 1 00:00:04,469 --> 00:00:05,810 In this lecture we are going to learn 1 2 00:00:05,810 --> 00:00:09,010 how we can create geometric shapes for our applications. 2 3 00:00:09,010 --> 00:00:11,060 To create geometric shapes, what we need to use, 3 4 00:00:11,060 --> 00:00:13,370 we need to use Canvas module, 4 5 00:00:13,370 --> 00:00:16,230 canvas widget to create our geometric shapes. 5 6 00:00:16,230 --> 00:00:19,210 And here I will say, firstly I will create a variable, 6 7 00:00:19,210 --> 00:00:20,300 and its name is canvas. 7 8 00:00:20,300 --> 00:00:21,790 After it here, what I need to do, 8 9 00:00:21,790 --> 00:00:24,200 I need to use Canvas constructor method 9 10 00:00:24,200 --> 00:00:26,040 to create my shapes, okay. 10 11 00:00:26,040 --> 00:00:28,330 And, as always, my first parameter will be root, 11 12 00:00:28,330 --> 00:00:30,820 and after that I want to define width 12 13 00:00:30,820 --> 00:00:34,690 and height properties for our canvas. 13 14 00:00:34,690 --> 00:00:37,573 For the width, I will say width is equal to 650, 14 15 00:00:39,097 --> 00:00:43,970 and for height I will say 550. 15 16 00:00:43,970 --> 00:00:46,310 Okay. And after that what I need to do, 16 17 00:00:46,310 --> 00:00:49,340 of course I need to use geometry manager for my canvas. 17 18 00:00:49,340 --> 00:00:53,143 To do that I will use canvas.pack geometry manager, okay. 18 19 00:00:54,070 --> 00:00:56,930 And now our canvas is visible, 19 20 00:00:56,930 --> 00:01:01,550 but now what I need to do, I want to create first line, okay. 20 21 00:01:01,550 --> 00:01:05,420 How you need learn how we can create lines for our canvas. 21 22 00:01:05,420 --> 00:01:07,920 And to do that what I need to do, I will create a variable here, 22 23 00:01:07,920 --> 00:01:09,360 its name is line. 23 24 00:01:09,360 --> 00:01:12,217 Okay, and if I want to create a line what I need to do, 24 25 00:01:12,217 --> 00:01:14,990 I need to use first my canvas. 25 26 00:01:14,990 --> 00:01:17,030 Okay, and after that I need to use here, 26 27 00:01:17,030 --> 00:01:19,093 create_line function, okay. 27 28 00:01:20,230 --> 00:01:23,383 And here what I' need to do, let me draw it, here. 28 29 00:01:26,040 --> 00:01:28,130 For example if you want to create line, 29 30 00:01:28,130 --> 00:01:29,860 something like that, what you need to do, 30 31 00:01:29,860 --> 00:01:31,635 for the first point, this one, 31 32 00:01:31,635 --> 00:01:34,187 we need to define x and y values. 32 33 00:01:34,187 --> 00:01:35,753 So, okay for this one. 33 34 00:01:35,753 --> 00:01:40,317 And for this point also we need to define x and y values. 34 35 00:01:40,317 --> 00:01:41,150 Okay. 35 36 00:01:41,150 --> 00:01:42,569 And here we will do that. 36 37 00:01:42,569 --> 00:01:45,292 Now what I need to do, I will come here 37 38 00:01:45,292 --> 00:01:50,292 and for x value I will say 100, for y value I will say 250. 38 39 00:01:51,120 --> 00:01:52,883 Okay, this is for first point, 39 40 00:01:52,883 --> 00:01:54,300 and for second point what I need to do, 40 41 00:01:54,300 --> 00:01:58,988 I need to say 360 for example and 25. 41 42 00:01:58,988 --> 00:02:01,373 Okay, if I run my application now. 42 43 00:02:02,750 --> 00:02:05,290 As you see now our line is here. 43 44 00:02:05,290 --> 00:02:08,780 But it's really thin, and also we can change its color. 44 45 00:02:08,780 --> 00:02:10,610 Okay so, how we can do that? 45 46 00:02:10,610 --> 00:02:15,420 To do that we can create our properties here. 46 47 00:02:15,420 --> 00:02:18,170 Here also, but I want to show you some, 47 48 00:02:18,170 --> 00:02:21,850 another function to configure our item, 48 49 00:02:21,850 --> 00:02:23,040 configure our line. 49 50 00:02:23,040 --> 00:02:26,007 To do that what we need to do, we will say here canvas dot, 50 51 00:02:27,459 --> 00:02:29,900 itemconfigure function, okay. 51 52 00:02:29,900 --> 00:02:32,363 And for the first one I will use, 52 53 00:02:33,400 --> 00:02:36,280 sorry, the first parameter will be my item, okay. 53 54 00:02:36,280 --> 00:02:40,350 I want to configure my line, so I need to pass in my, 54 55 00:02:40,350 --> 00:02:41,820 which widget I want to configure, 55 56 00:02:41,820 --> 00:02:44,210 which item I want to configure, it's line. 56 57 00:02:44,210 --> 00:02:46,980 And after that what I need to do, second parameter 57 58 00:02:46,980 --> 00:02:48,610 I will use fill parameter. 58 59 00:02:48,610 --> 00:02:52,350 Fill is equal to, let's say red, okay. 59 60 00:02:52,350 --> 00:02:56,400 And also I will use width property for my item. 60 61 00:02:56,400 --> 00:02:59,980 Width is equal to, let's say 10, okay. 61 62 00:02:59,980 --> 00:03:04,100 If I run it again, as you see now my item is here, 62 63 00:03:04,100 --> 00:03:06,320 and its color's also red. 63 64 00:03:06,320 --> 00:03:09,143 Now I want to, let me draw something else. 64 65 00:03:09,990 --> 00:03:13,770 I want to draw something like that, okay. 65 66 00:03:13,770 --> 00:03:16,600 And after this one I want to create a triangle, 66 67 00:03:16,600 --> 00:03:19,170 so how can I do that? I will show it now. 67 68 00:03:19,170 --> 00:03:24,170 To do that, let's comment out this guy first, okay. 68 69 00:03:24,750 --> 00:03:26,313 And let's create another line. 69 70 00:03:27,820 --> 00:03:28,973 Here I will say, 70 71 00:03:29,938 --> 00:03:30,771 line2, 71 72 00:03:36,540 --> 00:03:38,524 line2 is equal to, I will say, 72 73 00:03:38,524 --> 00:03:42,130 canvas.create_line function, okay. 73 74 00:03:42,130 --> 00:03:45,620 And for the first parameter I will say 25, 74 75 00:03:45,620 --> 00:03:49,950 and after that, this is x and y coordinates right, 50, 75 76 00:03:49,950 --> 00:03:54,950 and 150, and say 150 okay. 76 77 00:03:55,560 --> 00:03:58,540 This is, if I run it again, let's run. 77 78 00:03:58,540 --> 00:03:59,850 This is only one line right? 78 79 00:03:59,850 --> 00:04:02,680 Now we will create two lines here, something like that. 79 80 00:04:02,680 --> 00:04:05,020 Okay, and after that we'll create a triangle. 80 81 00:04:05,020 --> 00:04:08,320 And after this one I will say I need to create 81 82 00:04:08,320 --> 00:04:13,130 a new x and y coordinates for two lines, okay. 82 83 00:04:13,130 --> 00:04:17,970 And here I will say 250 and 140. 83 84 00:04:17,970 --> 00:04:20,510 If I run it again, but let's use also fill 84 85 00:04:20,510 --> 00:04:23,710 and also width property for our line. 85 86 00:04:23,710 --> 00:04:25,960 Here I will say fill is equal to, 86 87 00:04:25,960 --> 00:04:28,520 let's use, yellow this time. 87 88 00:04:28,520 --> 00:04:33,520 And for width I'll say width is equal to five, okay. 88 89 00:04:34,180 --> 00:04:36,840 If I run it again, 89 90 00:04:36,840 --> 00:04:39,940 as you see now, here our two lines is here. 90 91 00:04:39,940 --> 00:04:41,223 If I want to, 91 92 00:04:42,738 --> 00:04:45,300 if I want to a create triangle, what I need to do, 92 93 00:04:45,300 --> 00:04:47,800 something like that, now I need to use another 93 94 00:04:47,800 --> 00:04:49,870 x and y coordinates here. 94 95 00:04:49,870 --> 00:04:50,703 Okay. 95 96 00:04:50,703 --> 00:04:54,163 And here I will come, let's close this one first. 96 97 00:04:55,880 --> 00:04:59,253 After 140 here what I will say, 97 98 00:05:00,640 --> 00:05:03,760 20 and also let's say 50. 98 99 00:05:03,760 --> 00:05:05,393 Okay, if I run it again. 99 100 00:05:07,050 --> 00:05:09,290 As you see now we have a triangle. 100 101 00:05:09,290 --> 00:05:14,290 And we created triangle to use our lines, okay. 101 102 00:05:14,610 --> 00:05:17,420 And after that what I want to show you, 102 103 00:05:17,420 --> 00:05:20,170 I want to also show you how we can create text 103 104 00:05:21,220 --> 00:05:23,210 to use our canvas. 104 105 00:05:23,210 --> 00:05:25,468 And to create a text I will say here 105 106 00:05:25,468 --> 00:05:30,263 text is equal to canvas.create_text function. 106 107 00:05:31,610 --> 00:05:32,460 Okay. 107 108 00:05:32,460 --> 00:05:34,730 And here what I need to do, of course, 108 109 00:05:34,730 --> 00:05:37,940 I need to define again x and y coordinates. 109 110 00:05:37,940 --> 00:05:42,130 For x I will say 80, for y I will say 100. 110 111 00:05:42,130 --> 00:05:45,113 Okay, and after that I need to create a text property, 111 112 00:05:46,380 --> 00:05:51,353 and here I will say Hello Python, okay. 112 113 00:05:52,270 --> 00:05:55,153 And, of course, we can use again here, 113 114 00:05:56,820 --> 00:05:59,780 we can use font, I think, it will be better, 114 115 00:05:59,780 --> 00:06:04,780 because it, I want to create nice text. 115 116 00:06:05,620 --> 00:06:07,953 For the font, I will say font is equal to, 116 117 00:06:10,320 --> 00:06:12,070 I will say Times, 117 118 00:06:12,070 --> 00:06:16,250 and for font size 15, 118 119 00:06:16,250 --> 00:06:19,240 and also let's make it bold this time, okay. 119 120 00:06:19,240 --> 00:06:21,110 I will say bold. 120 121 00:06:21,110 --> 00:06:22,943 Now if I run my application, 121 122 00:06:23,800 --> 00:06:27,270 as you see now our Hello Python text is here. 122 123 00:06:27,270 --> 00:06:31,750 Now let's also comment out this guys, 123 124 00:06:31,750 --> 00:06:33,460 and after that what I want to show you, 124 125 00:06:33,460 --> 00:06:35,225 I want also to show you how we can create 125 126 00:06:35,225 --> 00:06:39,646 a rectangle to use our canvas widget. 126 127 00:06:39,646 --> 00:06:40,479 To do that, what I will do, 127 128 00:06:40,479 --> 00:06:45,297 I will create here another variable, rectangle I will say. 128 129 00:06:45,297 --> 00:06:48,713 Rectangle is equal to, here what I need to use, 129 130 00:06:48,713 --> 00:06:53,713 I need to say use canvas.create_rectangle function, it's here. 130 131 00:06:55,420 --> 00:06:58,910 And here what I need to use, of course I needto use another 131 132 00:06:58,910 --> 00:07:01,280 x y pairs here, okay. 132 133 00:07:01,280 --> 00:07:04,143 And let me draw it again. 133 134 00:07:05,350 --> 00:07:09,313 Now is our rectangle is something like that, right. 134 135 00:07:10,240 --> 00:07:12,100 This is our rectangle, okay. 135 136 00:07:12,100 --> 00:07:17,100 For x, we need to create for this corner x and y value, 136 137 00:07:18,650 --> 00:07:21,560 and also for this corner x and y value, okay, 137 138 00:07:21,560 --> 00:07:23,300 to create our rectangle. 138 139 00:07:23,300 --> 00:07:26,340 There are four corners here right, but we need to create 139 140 00:07:26,340 --> 00:07:31,340 only pairs, x and y coordinates, only for these two corners. 140 141 00:07:33,230 --> 00:07:34,143 And here, 141 142 00:07:36,880 --> 00:07:37,740 let me make it. 142 143 00:07:37,740 --> 00:07:42,740 And here I will say 150 for x, for y again 150, 143 144 00:07:44,610 --> 00:07:49,610 for other corner 250 for x value and 200 for y value. 144 145 00:07:50,640 --> 00:07:55,640 And also let's say fill is equal to green, 145 146 00:07:58,050 --> 00:08:00,293 okay, and width, 146 147 00:08:03,120 --> 00:08:05,860 is equal to, let's say, five. 147 148 00:08:05,860 --> 00:08:07,543 If I run my application again. 148 149 00:08:09,270 --> 00:08:12,690 As you see now our rectangle is here. 149 150 00:08:12,690 --> 00:08:17,080 And as I said, 150 for this corner, x value, 150 151 00:08:17,080 --> 00:08:20,290 150 again for this corner, y value, 151 152 00:08:20,290 --> 00:08:24,140 and 250 for this corner x value, 152 153 00:08:24,140 --> 00:08:28,850 and 200 means y value of this corner, okay. 153 154 00:08:28,850 --> 00:08:32,860 And after rectangle what we can do also, 154 155 00:08:32,860 --> 00:08:35,780 I can show you how we can create an oval. 155 156 00:08:35,780 --> 00:08:37,310 To create an oval I will say 156 157 00:08:37,310 --> 00:08:41,593 oval is equal to canvas.create_oval function, 157 158 00:08:42,890 --> 00:08:44,350 okay it's here. 158 159 00:08:44,350 --> 00:08:49,250 And here another x and y values I need to use here. 159 160 00:08:49,250 --> 00:08:50,973 And I will say 350, 350, 160 161 00:08:53,800 --> 00:08:57,800 and 250 and also 200, okay. 161 162 00:08:57,800 --> 00:08:59,923 And if I run my application now, 162 163 00:09:01,522 --> 00:09:04,250 as you see now my oval is here. 163 164 00:09:04,250 --> 00:09:06,130 And after oval what I want to show you, 164 165 00:09:06,130 --> 00:09:09,760 I want to create, I want to show you how we can create arc. 165 166 00:09:09,760 --> 00:09:12,217 To create the arc here, what I need to say, 166 167 00:09:12,217 --> 00:09:17,217 I need to say arc is equal to canvas.create_arc function. 167 168 00:09:19,760 --> 00:09:23,790 To create the arc again we need to use x and y coordinates, 168 169 00:09:23,790 --> 00:09:28,790 120, and 20, after 30, and let's say 80, okay. 169 170 00:09:29,950 --> 00:09:32,710 And now this time I want to use fill property, 170 171 00:09:32,710 --> 00:09:34,313 fill is equal to let's say, 171 172 00:09:37,300 --> 00:09:39,203 red, and for width, 172 173 00:09:43,850 --> 00:09:47,433 width is equal to three, okay. 173 174 00:09:47,433 --> 00:09:50,510 And now if I run my application, 174 175 00:09:50,510 --> 00:09:52,550 as you see now my arc is here, 175 176 00:09:52,550 --> 00:09:56,990 and it starts from zero degree to 90 degrees, right. 176 177 00:09:56,990 --> 00:09:58,624 Of course we can change it, for example 177 178 00:09:58,624 --> 00:10:03,220 we can make it 180 degrees, from zero to 180 degrees. 178 179 00:10:03,220 --> 00:10:04,053 How we can do that? 179 180 00:10:04,053 --> 00:10:08,120 To do that we need to come here and use another parameters. 180 181 00:10:08,120 --> 00:10:11,200 I will say start is equal to zero. 181 182 00:10:11,200 --> 00:10:14,317 Start from zero, and extent 180. 182 183 00:10:18,170 --> 00:10:19,463 If I run it again. 183 184 00:10:20,720 --> 00:10:24,790 As you see now our arc is 180 degree, 184 185 00:10:24,790 --> 00:10:27,630 it has 180 degrees, okay. 185 186 00:10:27,630 --> 00:10:30,280 And also what is next, I want to show you how we can 186 187 00:10:30,280 --> 00:10:34,530 create images for our, to use our canvas. 187 188 00:10:34,530 --> 00:10:38,650 To do that I will create here icon, my variable, 188 189 00:10:38,650 --> 00:10:42,480 and I need to use PhotoImage constructor method again. 189 190 00:10:42,480 --> 00:10:45,630 And here I need to define my file location. 190 191 00:10:45,630 --> 00:10:50,500 File is equal to, and here my file was already here. 191 192 00:10:50,500 --> 00:10:51,343 Icons. 192 193 00:10:52,220 --> 00:10:53,890 And I will use that one, 193 194 00:10:53,890 --> 00:10:55,713 not that one, this is really small, 194 195 00:10:56,930 --> 00:10:59,690 that one, okay, icon.png. 195 196 00:10:59,690 --> 00:11:03,097 So what I need to say, I need to say icons and icon.png, okay. 196 197 00:11:05,543 --> 00:11:08,120 It's my location, icons, my folder name, 197 198 00:11:08,120 --> 00:11:11,520 and icon.png, my filename. 198 199 00:11:11,520 --> 00:11:13,027 And after that what I need to do, 199 200 00:11:13,027 --> 00:11:18,027 I will say image is equal to canvas.create_image function, 200 201 00:11:21,780 --> 00:11:24,956 and here I need to pass in another parameters, 201 202 00:11:24,956 --> 00:11:26,656 x and y parameters, x 150 and 200. 202 203 00:11:30,290 --> 00:11:35,290 And after that I need to use image is equal to icon. 203 204 00:11:35,740 --> 00:11:39,000 Okay the icon I already created, it's here. 204 205 00:11:39,000 --> 00:11:40,663 If I run my application now, 205 206 00:11:42,830 --> 00:11:45,080 as you see now my icon is here. 206 207 00:11:45,080 --> 00:11:46,440 But something interesting here, 207 208 00:11:46,440 --> 00:11:50,300 now you see my icon covers my rectangle, right? 208 209 00:11:50,300 --> 00:11:54,180 And for example how can I make the reverse of it? 209 210 00:11:54,180 --> 00:11:59,180 I mean my rectangle can cover my icon? 210 211 00:12:01,230 --> 00:12:03,570 To do that I need to use lift function. 211 212 00:12:03,570 --> 00:12:07,343 And here I will say canvas.lift, 212 213 00:12:08,180 --> 00:12:13,180 which item I want to lift, rectangle, right. 213 214 00:12:13,610 --> 00:12:16,410 And if I run it again, 214 215 00:12:16,410 --> 00:12:20,890 as you see now my rectangle covers my icon, okay. 215 216 00:12:20,890 --> 00:12:21,723 And that's all. 216 217 00:12:21,723 --> 00:12:22,800 We learned how we can use 217 218 00:12:22,800 --> 00:12:25,940 canvas widgets for our applications. 218 219 00:12:25,940 --> 00:12:28,163 For now that's all, see you in the next.