1
00:00:00,410 --> 00:00:01,080
Hi again.

2
00:00:01,370 --> 00:00:07,520
And this video, I will show you how you can put an image in a canvas so you will tell me why.

3
00:00:07,920 --> 00:00:10,930
Why do we need this kind of stuff?

4
00:00:11,240 --> 00:00:18,470
Even if because we can put an image in the application, we are using labels or frames the way why we

5
00:00:18,470 --> 00:00:21,280
are using this canvas for the image, for example.

6
00:00:21,650 --> 00:00:22,850
So I will tell you why.

7
00:00:23,060 --> 00:00:28,490
So, for example, if you are working on a project or something that you should use to counter to throw

8
00:00:28,490 --> 00:00:35,180
something on an image or to extract a an object from the image or something like this.

9
00:00:35,360 --> 00:00:39,410
So you're doing this kind of cooperation on the image.

10
00:00:40,040 --> 00:00:42,500
You cannot do this using labels or frames.

11
00:00:42,960 --> 00:00:46,890
OK, so to do this kind of stuff, you have to create a canvas.

12
00:00:47,060 --> 00:00:52,380
So this kind of helps you to draw something or to extract something from the image, et cetera.

13
00:00:52,790 --> 00:00:56,860
So I will show you in this video how you can put only the image on the canvas.

14
00:00:57,050 --> 00:01:02,340
And in the next video, we will see how we can do something on the canvas and on the image.

15
00:01:02,750 --> 00:01:06,340
So here we have we have we created application as we did before.

16
00:01:06,390 --> 00:01:19,270
So from going to import everything, then you create a quality game like this, then we would use as

17
00:01:19,280 --> 00:01:22,100
the main loop like that.

18
00:01:22,700 --> 00:01:23,210
We see.

19
00:01:23,210 --> 00:01:24,380
How does it look?

20
00:01:24,560 --> 00:01:27,400
That's an applications that I will do some recycling.

21
00:01:27,760 --> 00:01:38,000
I would put it a little bit bigger, so much more than 200 or 300 like this.

22
00:01:38,390 --> 00:01:39,900
So here is our application.

23
00:01:40,190 --> 00:01:45,200
Now, what we have to do, we have to create a normal canvas that we as we did in the previous video.

24
00:01:45,200 --> 00:01:50,950
So it would be my canvas after that we create or we will put the image on it.

25
00:01:51,260 --> 00:01:52,910
So to create a canvas.

26
00:01:53,060 --> 00:02:01,520
It is not easy like this canvas then within the application that I will change the background color.

27
00:02:01,520 --> 00:02:04,460
I will put it blog so it will be visible.

28
00:02:04,880 --> 00:02:13,310
Now, I don't want you to put the sizes, the width and the height of this canvas, so I will directly

29
00:02:13,310 --> 00:02:14,960
feel it and expand it.

30
00:02:15,260 --> 00:02:22,840
So you have canvas that back then you will fill it.

31
00:02:22,910 --> 00:02:23,270
Will.

32
00:02:23,920 --> 00:02:24,380
Will.

33
00:02:26,260 --> 00:02:35,050
Then he'll expand because what we have to talk about this bill and expand what does do always will only

34
00:02:35,050 --> 00:02:43,240
feed and expand the canvas for the whole size of all or for the whole body of the application like this.

35
00:02:43,260 --> 00:02:49,420
So even if we withdrew sizes, it will be decided we cannot fix only one one size.

36
00:02:49,580 --> 00:02:53,680
OK, so now we have we have to create the image.

37
00:02:53,710 --> 00:03:02,170
So to use images in the we will use the public in the library that we used before, which is below.

38
00:03:02,380 --> 00:03:04,820
So I would include below.

39
00:03:04,860 --> 00:03:05,980
So from.

40
00:03:08,410 --> 00:03:19,930
Al Gore's image and image like this, so these two functions or these two classes where we need them

41
00:03:20,290 --> 00:03:25,180
now, what we have to do, I will only to open the image that we will do the other operations.

42
00:03:25,480 --> 00:03:27,580
So we're always calling for global image.

43
00:03:27,970 --> 00:03:31,870
Here is my image at the same folder of my project.

44
00:03:32,170 --> 00:03:34,540
So I would only write the name.

45
00:03:34,550 --> 00:03:40,220
But if your image in another folder, so we have to put the box as we did before.

46
00:03:40,690 --> 00:03:50,860
So here we are, image the doors open and here you need to to put the parts of the image.

47
00:03:50,870 --> 00:03:55,050
So I will for my case, the image is the same folder.

48
00:03:55,390 --> 00:04:00,760
So I will be I think like this.

49
00:04:01,870 --> 00:04:03,410
No, here I will.

50
00:04:03,640 --> 00:04:10,850
A government here to the part of your image like this.

51
00:04:11,500 --> 00:04:14,170
Now what you have to do, I only done this one.

52
00:04:14,510 --> 00:04:19,570
You have all that you have always draw on your program to see if you have any error or something like

53
00:04:19,570 --> 00:04:19,740
that.

54
00:04:19,750 --> 00:04:26,710
So it will be easy to correct your errors if you have if you will run it after two or three lines better

55
00:04:26,710 --> 00:04:28,140
than you will it at the end.

56
00:04:28,150 --> 00:04:30,140
So at the end it will be sometime.

57
00:04:30,180 --> 00:04:32,200
It will be very hard to know what is the problem.

58
00:04:32,810 --> 00:04:39,700
OK, now here we have the image now as we have to do, I will create it because if you want to put this

59
00:04:39,700 --> 00:04:45,090
image on the kinds of applications that we have to we we have to use this image to convert it.

60
00:04:45,430 --> 00:04:49,330
But before that, I will do it and we do the other stuff.

61
00:04:49,660 --> 00:04:55,550
So here we have I will present the same as the same variable.

62
00:04:55,570 --> 00:04:59,480
So here we have this one image.

63
00:04:59,810 --> 00:05:05,950
OK, the photo image, then you will put the image.

64
00:05:05,980 --> 00:05:07,780
Now, the image is really like this.

65
00:05:07,780 --> 00:05:13,410
We we did this before when we wanted to put an image in label.

66
00:05:13,660 --> 00:05:15,690
So we did the same thing here.

67
00:05:16,060 --> 00:05:22,960
Now to put the image in the in the canvas, although we have to do is write the name of your canvas

68
00:05:23,290 --> 00:05:28,530
that that you will you will call the function called create image.

69
00:05:28,780 --> 00:05:34,620
So this function will create an image for your canvas image.

70
00:05:35,080 --> 00:05:41,410
Then here I will put the there is some part there are some parameters that we have to do.

71
00:05:41,740 --> 00:05:45,190
So the first parameters are, for example, X and Y.

72
00:05:45,610 --> 00:05:52,510
I am writing this only to show you so this X and Y, I would put this in common so I can run the program.

73
00:05:53,470 --> 00:05:54,010
Here.

74
00:05:55,700 --> 00:06:03,440
Here is our application, so this first point, for example, is zero zero, so if we want the starting

75
00:06:03,440 --> 00:06:05,860
point of the image will be at this point.

76
00:06:05,870 --> 00:06:07,820
So we have to put it zero zero.

77
00:06:08,030 --> 00:06:09,790
So the image really starts from here.

78
00:06:10,130 --> 00:06:13,520
But the other stuff that we have to know is the image.

79
00:06:13,520 --> 00:06:18,740
If we are talking about the starting point, the starting point of the image by default will be center.

80
00:06:18,920 --> 00:06:21,220
So imagine with me if this is our image.

81
00:06:21,410 --> 00:06:24,020
So the starting point of the image or the.

82
00:06:24,020 --> 00:06:28,250
Yes, the starting point or the center point of the image would be this point.

83
00:06:28,250 --> 00:06:29,580
For example, this is the center.

84
00:06:29,900 --> 00:06:36,380
So if we say that this starting point, we should be at the point zero zero of the application.

85
00:06:36,410 --> 00:06:38,440
So this starting point will be here.

86
00:06:38,690 --> 00:06:40,520
So the image will be moved.

87
00:06:40,940 --> 00:06:43,880
So just imagine with me, but we will do it now.

88
00:06:44,180 --> 00:06:44,730
You will see it.

89
00:06:44,750 --> 00:06:46,970
How does it look now here?

90
00:06:47,000 --> 00:06:51,960
So this X and Y are the first parameters of where the image will start.

91
00:06:52,340 --> 00:06:59,090
Then there is the other parameter, which is the image, and we give the name of the the variable image.

92
00:06:59,390 --> 00:07:07,160
So here are these two zero zero zero, which we talk about it now.

93
00:07:07,160 --> 00:07:10,580
Here we have image as we had in label.

94
00:07:11,120 --> 00:07:13,130
We were we were able to create an image.

95
00:07:13,130 --> 00:07:17,960
We have to use this parameter image and you can put the name of the variable that has the image.

96
00:07:18,200 --> 00:07:20,900
So in this case, we have image, the same thing here.

97
00:07:21,290 --> 00:07:25,340
Now we have created image if I ran the program like this.

98
00:07:26,790 --> 00:07:28,150
You will see that this is.

99
00:07:28,650 --> 00:07:34,380
It is in the application, but we cannot see it clearly because the size is very big and this is the

100
00:07:34,380 --> 00:07:34,980
first thing.

101
00:07:35,190 --> 00:07:42,990
And the second thing is that the image is more because I told you about that the images is because the

102
00:07:42,990 --> 00:07:45,210
center of the image is zero zero.

103
00:07:45,360 --> 00:07:47,700
We put the center of the image in zero zero.

104
00:07:47,700 --> 00:07:52,830
So the image is moved then the size is not that size is bigger than the application.

105
00:07:53,130 --> 00:07:58,710
So to fix this problem we have the first thing that we have to do is to resize the image and we need

106
00:07:58,710 --> 00:08:03,360
to put it at the same size of this application so that we can see clearly.

107
00:08:03,720 --> 00:08:04,920
Then we have to move it.

108
00:08:05,130 --> 00:08:07,600
So we start by resizing the image.

109
00:08:07,620 --> 00:08:08,730
So here is the image.

110
00:08:09,000 --> 00:08:15,120
But we should decide this before this line, because after this line, we can not use the precise function.

111
00:08:15,390 --> 00:08:19,930
So after opening gates, we will resize it, then convert it into Teekay image.

112
00:08:20,430 --> 00:08:23,340
So here we have replaced at the same variable.

113
00:08:23,850 --> 00:08:25,890
Now here we have image down here.

114
00:08:25,890 --> 00:08:30,720
Image does this size like this as we did before.

115
00:08:31,110 --> 00:08:35,060
Now, here are the first parameters are the new with and height of the image.

116
00:08:35,250 --> 00:08:40,930
So we will put it 300 by 300 because the application needs to be handled by 300.

117
00:08:40,950 --> 00:08:43,060
So it will be it will fit the application.

118
00:08:43,710 --> 00:08:46,580
Then the second parameter is image.

119
00:08:46,590 --> 00:08:47,790
That's a..

120
00:08:47,830 --> 00:08:51,010
Ideas that we had we talked about before.

121
00:08:51,660 --> 00:08:53,850
Now we will run the program.

122
00:08:53,850 --> 00:08:56,480
You will see that we will always have this problem.

123
00:08:56,490 --> 00:08:58,530
So the image is realized now.

124
00:08:58,530 --> 00:09:02,520
But the center of the image, as you can see, is at the point zero zero.

125
00:09:02,790 --> 00:09:10,890
Now, to see the image clearly, we should we should move the image into this display so that we will

126
00:09:10,890 --> 00:09:16,420
see how we see the whole image so that we have to change the anchor of the image.

127
00:09:16,680 --> 00:09:20,070
So here we have what is the image below?

128
00:09:22,430 --> 00:09:31,160
Like this here, so here we need to change the outcome, so here, if I redo the anchor Northwest,

129
00:09:31,160 --> 00:09:36,440
as we did before, for the abdicate, for the crew, for the canvas, when we created the canvas, it

130
00:09:36,440 --> 00:09:37,430
was in the center.

131
00:09:37,460 --> 00:09:44,990
So if we want to put it at the first point of the application or we want to, that's the center or we

132
00:09:44,990 --> 00:09:45,500
don't want.

133
00:09:45,590 --> 00:09:49,340
Because here when we had we thought I would take this off.

134
00:09:51,420 --> 00:09:51,810
Not.

135
00:09:53,460 --> 00:10:00,210
Here is the application now without using anything, the of the application by default is the starting

136
00:10:00,210 --> 00:10:01,890
point of the appeal of the image.

137
00:10:02,040 --> 00:10:07,220
So this starting point or this center of the image will be the starting point of the image.

138
00:10:07,230 --> 00:10:08,130
So it will be here.

139
00:10:08,370 --> 00:10:11,390
Now, we want to change the position of this starting point.

140
00:10:11,640 --> 00:10:17,400
We want that the starting point of the image will be at the point zero zero of the image.

141
00:10:17,550 --> 00:10:20,640
So in this case, it will be zero zero of the image.

142
00:10:20,940 --> 00:10:27,570
The point zero zero will be at the same place of the zero zero of the application so that we can see

143
00:10:27,570 --> 00:10:28,410
the whole image.

144
00:10:28,790 --> 00:10:32,710
Now, to do that, we have to do what I was writing this one.

145
00:10:32,730 --> 00:10:34,110
So we have to change the angle.

146
00:10:34,110 --> 00:10:35,950
We would as Norwest.

147
00:10:36,240 --> 00:10:38,400
So here we see the whole image.

148
00:10:39,470 --> 00:10:46,700
Like it is now, as you can see, here is our image, because we moved it, so since the starting point

149
00:10:46,700 --> 00:10:52,760
of the image now is here and the starting point of the application is here so that we can see the whole

150
00:10:52,760 --> 00:10:59,360
image because size is the same size of the application and the starting point of application is the

151
00:10:59,360 --> 00:11:02,140
same of the starting point of the image.

152
00:11:02,510 --> 00:11:05,270
So that was how to put an image in a canvas.

153
00:11:05,630 --> 00:11:12,020
Now we stop here and the next video we use, we will show you how you can draw something on the application.

154
00:11:12,450 --> 00:11:13,550
So I.