1 00:00:00,150 --> 00:00:00,380 I. 2 00:00:01,140 --> 00:00:06,200 So in this video, I will show you how you can do anything on the canvass using the mouse. 3 00:00:06,720 --> 00:00:11,750 So we have, as you can see here, we have the same application that we had before. 4 00:00:12,190 --> 00:00:17,050 Now we need two other functions to function that will do this drawing. 5 00:00:17,340 --> 00:00:20,720 So the first function will save or we saw. 6 00:00:21,390 --> 00:00:25,230 So if I will click here, for example, if we want to draw something from here. 7 00:00:25,500 --> 00:00:29,790 So I will click here, then move the mouse, for example, to here. 8 00:00:29,820 --> 00:00:33,250 So in this case, you will draw a line, something like this here. 9 00:00:33,660 --> 00:00:41,040 So the first click will store the coordinates of this point and the second click for a second function. 10 00:00:41,090 --> 00:00:48,660 So the first function is the first function will store the first click here and the second function 11 00:00:48,840 --> 00:00:52,470 will draw the line from this store. 12 00:00:52,470 --> 00:00:55,150 It coordinates into the next one. 13 00:00:55,620 --> 00:00:59,270 So we do it here and you will see what I am talking about. 14 00:00:59,880 --> 00:01:03,590 Now, as I told you, we should to create two functions. 15 00:01:03,600 --> 00:01:10,280 The first function that would store the X and Y, and the second one will create the line map. 16 00:01:10,650 --> 00:01:12,470 I would call the first function. 17 00:01:12,480 --> 00:01:21,060 For example, you get X and Y, for example, like this means that it will give the X and Y or the previous 18 00:01:21,060 --> 00:01:25,680 X and Y, then the second function will go to it after. 19 00:01:26,010 --> 00:01:28,050 So here we have parameter events. 20 00:01:28,110 --> 00:01:33,900 This parameter events will have the rule of the event, which means the click of the button. 21 00:01:34,080 --> 00:01:37,530 So the click of the button will be this event. 22 00:01:38,430 --> 00:01:42,360 So here we have, for example, be here. 23 00:01:42,390 --> 00:01:53,580 If we have events that X and events that Y, so this event that X will return the X X coordinates of 24 00:01:53,580 --> 00:01:57,600 the button of the place when we would click the button. 25 00:01:57,630 --> 00:01:59,050 So if I will click here. 26 00:01:59,340 --> 00:02:05,230 So this event X will return the value of the X and this event. 27 00:02:05,250 --> 00:02:11,170 That's why we return the coordinates of the white button, all the white the white point. 28 00:02:11,820 --> 00:02:14,530 So this was how does it work? 29 00:02:14,880 --> 00:02:19,900 Now here we have we will go to the to the to the function. 30 00:02:20,340 --> 00:02:26,040 Now, as I told you, we will have two point starting points as we did before and the last hour, the 31 00:02:26,100 --> 00:02:26,840 ending point. 32 00:02:27,090 --> 00:02:31,750 So the starting points will call them, for example, the last point or the first point. 33 00:02:32,160 --> 00:02:40,380 So I will I will do, for example, here we have start X, which means the starting X and the second 34 00:02:40,380 --> 00:02:50,550 one is the start Y, then we need to put them as global wide because we will work with them in the in 35 00:02:50,590 --> 00:02:52,150 the in the next function. 36 00:02:52,380 --> 00:02:55,620 So we should have these two variables as global. 37 00:02:55,800 --> 00:02:57,200 So will we. 38 00:02:57,340 --> 00:03:02,480 They will be recognized in the other functions because if I will leave them here without this global 39 00:03:02,730 --> 00:03:05,600 so they will be a local will be local variables. 40 00:03:05,850 --> 00:03:09,540 So in this case, we cannot work with them out of this function. 41 00:03:09,900 --> 00:03:12,630 For that, we should put them as global variables. 42 00:03:13,050 --> 00:03:19,110 Now, what we have to do here, as we said we should, we should store the first click, which means 43 00:03:19,110 --> 00:03:20,010 the first point. 44 00:03:20,340 --> 00:03:32,880 So here we have start X and start Y equals two events that X, the events that Y. 45 00:03:33,210 --> 00:03:39,870 So if I will click the first click here, so I will have after the click I will have event X that I 46 00:03:39,870 --> 00:03:45,240 will have event Y, so I have to store them as these two variables. 47 00:03:45,540 --> 00:03:48,480 In this case, we will have the coordinates of the starting point. 48 00:03:48,840 --> 00:03:55,910 Then after the second click, we will have a new X, a new X or new event X and new events Y. 49 00:03:56,250 --> 00:04:01,590 So we will use this sequence to draw the line from the start into the newest one. 50 00:04:02,160 --> 00:04:07,040 Now for this function, that's what's that always we need only to store this X and Y. 51 00:04:07,320 --> 00:04:09,720 Now the second function we use it to draw. 52 00:04:09,750 --> 00:04:11,430 So I will call it, for example, growth. 53 00:04:11,820 --> 00:04:15,510 And we need the same thing here event now. 54 00:04:16,730 --> 00:04:23,830 But what I will do here, I will clearly I will call these two variables and I will only copy them, 55 00:04:24,670 --> 00:04:27,610 we should always use this globally or so. 56 00:04:27,610 --> 00:04:34,720 This means that if we do some change or some changes on this function, they will be updated in this 57 00:04:34,720 --> 00:04:42,070 one also, because they are a they are global variables, because if we not this one here, if I will 58 00:04:42,070 --> 00:04:44,670 change them here, they will not be changed here. 59 00:04:44,980 --> 00:04:47,440 So in this case, I can only use them here. 60 00:04:47,620 --> 00:04:54,760 But if I want them to be updated means if I will change them here, they will be changed here and otherwise 61 00:04:54,760 --> 00:04:55,400 the same thing. 62 00:04:55,540 --> 00:05:01,030 So here I in this case, I should put global in this function and global and this function. 63 00:05:01,030 --> 00:05:06,180 Also, if I will use another function, I have to use the the global word. 64 00:05:06,190 --> 00:05:11,320 OK, now, now what we have to do, create only line that we did before. 65 00:05:11,330 --> 00:05:18,250 So we have Kalyvas that create line like it is now. 66 00:05:18,250 --> 00:05:22,380 We should give it the coordinates, the starting coordinates and the coordinates. 67 00:05:22,630 --> 00:05:29,530 So certain coordinates as we said we have starts X, starts Y. 68 00:05:30,700 --> 00:05:41,530 So it was you and start Y like this, then the ending points or the new click. 69 00:05:41,530 --> 00:05:48,800 We knew that the new click is events does X and events that one. 70 00:05:48,940 --> 00:05:56,050 So if I will click here the first click before dropping like this, so if I click here the first click 71 00:05:56,050 --> 00:06:00,990 will be the starting X and starting Y if I will move the mouse like this. 72 00:06:01,000 --> 00:06:03,280 So if I will leave the mouse. 73 00:06:03,400 --> 00:06:08,060 So here we will have the second point, which is the X and Y. 74 00:06:08,350 --> 00:06:14,020 So in this case, we will draw this line from here to here, which means if we will do something like 75 00:06:14,020 --> 00:06:16,270 this, if we will move a little bit by little bit. 76 00:06:16,510 --> 00:06:19,960 So we have some more lines from this point to this point. 77 00:06:19,960 --> 00:06:20,470 To this point. 78 00:06:20,470 --> 00:06:20,930 To this point. 79 00:06:21,000 --> 00:06:24,120 So at the end, we would have large or a long line. 80 00:06:25,060 --> 00:06:32,340 Now, here I will change only the feeling or the color that would fill the application. 81 00:06:32,350 --> 00:06:33,940 So we will not have that problem. 82 00:06:33,940 --> 00:06:34,930 We black with black. 83 00:06:34,960 --> 00:06:39,740 So we put it red then that is I would leave it like this for now. 84 00:06:39,770 --> 00:06:45,430 What we have to do, we have to update the new X and Y, because if I will click here from this point 85 00:06:45,430 --> 00:06:52,990 to this point, without leaving or without realizing the mouse, it means that we will have a new X 86 00:06:52,990 --> 00:06:58,120 and Y or we will have a new starting point, because from here to here, this one is. 87 00:06:58,330 --> 00:07:01,020 But for those, I didn't release the mouse. 88 00:07:01,300 --> 00:07:07,290 So here we have the first and second X, the same thing for the Y. 89 00:07:07,630 --> 00:07:13,930 Now if I will move it again, and which means that I will have a new X and Y singing the same thing 90 00:07:13,930 --> 00:07:15,060 here and here and here. 91 00:07:15,370 --> 00:07:21,010 So when I would have a new X and Y, I need I need to update the latest on this. 92 00:07:21,070 --> 00:07:32,320 The previous X and Y, so the previous X and Y are these two are the starting X and Y, so I need to 93 00:07:32,320 --> 00:07:36,630 update them after each click or after each drop. 94 00:07:37,000 --> 00:07:38,890 So I will copy them here. 95 00:07:40,170 --> 00:07:48,390 And like this, so now we have drawn the line and we have updated the X and Y points, now what we have 96 00:07:48,390 --> 00:07:54,170 to do only to call these two functions, because here when we did this, we didn't call them. 97 00:07:54,180 --> 00:07:56,200 So we need to call them how to go down. 98 00:07:56,230 --> 00:07:57,130 It is very easy. 99 00:07:57,180 --> 00:08:00,870 We should do it here after the creation of the canvas. 100 00:08:01,410 --> 00:08:05,800 So so here we have there is a function called bind. 101 00:08:06,060 --> 00:08:12,980 So this function will help us to call these two functions after each click, we call the functions we 102 00:08:12,990 --> 00:08:14,330 using this function. 103 00:08:14,550 --> 00:08:18,410 So using this function, will we call this one and this one? 104 00:08:18,750 --> 00:08:25,620 But as we said, we have to call this one first to solve the first X and Y, then we call this one to 105 00:08:25,620 --> 00:08:29,550 draw the line using this coordinate with the new one. 106 00:08:30,390 --> 00:08:34,140 Now, here, what we have to do, there is some parameters which are the points. 107 00:08:34,140 --> 00:08:37,390 So I will not point which is which is the button. 108 00:08:37,680 --> 00:08:44,710 So here I would for if I would use the first version of the mouse so I could write all the main button. 109 00:08:44,820 --> 00:08:46,200 So here we have a button. 110 00:08:46,680 --> 00:08:51,090 Then I should push the one, which means the first button. 111 00:08:51,540 --> 00:08:57,520 Then here I will call the function, which is gets X and Y, this one. 112 00:08:57,780 --> 00:09:02,770 So after doing this will call this function to restore the X and Y. 113 00:09:02,820 --> 00:09:11,910 Now we need to call the other function to draw the X and Y, so you have to reverse that buying the 114 00:09:11,910 --> 00:09:12,540 same thing. 115 00:09:12,810 --> 00:09:22,080 And here we have to put this one, which means the first button then motion. 116 00:09:22,650 --> 00:09:31,600 That means that this this one we only store the X and Y, but the second call we draw the line. 117 00:09:31,980 --> 00:09:39,570 So here I will close this one here and I we should call this the function that we draw. 118 00:09:39,630 --> 00:09:47,670 OK, so this key word means that only we will only call the function, but this key word means that 119 00:09:47,670 --> 00:09:51,160 we will draw something, we will do something on the canvas. 120 00:09:51,510 --> 00:09:54,330 So now we will try it out and we will see if it will work. 121 00:09:54,810 --> 00:09:56,170 So here is the application. 122 00:09:56,190 --> 00:10:02,850 Now, if I will do anything here, you can see that if I would, is it we do anything we want using 123 00:10:02,850 --> 00:10:03,390 the mouse. 124 00:10:03,870 --> 00:10:08,860 You can change the color or you can change the with here what is here. 125 00:10:08,880 --> 00:10:15,850 We can change the width, for example, or I we put a tree a little bit bigger. 126 00:10:16,590 --> 00:10:21,090 So here is the application and you can see that I am using only the mouse. 127 00:10:21,090 --> 00:10:22,290 I can do anything. 128 00:10:22,290 --> 00:10:29,390 You can do anything with this the the color you can change the way you can do anything with this stuff. 129 00:10:29,940 --> 00:10:34,800 So that was for this application, how you can do anything using the mouse. 130 00:10:34,920 --> 00:10:39,390 In the next video, I will show you how you can do the same thing, but on an image and you will see 131 00:10:39,390 --> 00:10:42,360 that it is very easy to do it so well, I.