1 00:00:01,670 --> 00:00:08,130 So I come back again in this lesson we're going to get us started with the cool graphics and this lesson 2 00:00:08,130 --> 00:00:11,250 perhaps is going to be the most code intensive. 3 00:00:11,250 --> 00:00:16,320 But in general is not such a difficult thing that just a bunch of rules that you must follow in order 4 00:00:16,320 --> 00:00:19,870 to get core graphics items into the screen. 5 00:00:20,010 --> 00:00:21,940 So let's go ahead and to export. 6 00:00:22,060 --> 00:00:27,460 Let's get started with a new app called it core graphics intro. 7 00:00:28,710 --> 00:00:37,000 And in my core graphics intro in my view controller here's the things that we should be no code graphics 8 00:00:37,000 --> 00:00:50,750 needs a context context only works within the role of a you view. 9 00:00:51,160 --> 00:00:52,990 So let me explain what that means. 10 00:00:52,990 --> 00:01:00,280 That means whenever you want to use the context for cool graphics drawing you need to have a subclass 11 00:01:00,310 --> 00:01:10,680 of you I view that I'm going to call the last let's call it draw in view which is a subclass of you 12 00:01:10,730 --> 00:01:11,950 I view. 13 00:01:12,310 --> 00:01:18,910 And then whatever you want to do with the context which I have misspelled it it has to happen within 14 00:01:18,910 --> 00:01:23,130 the drawer of that particular class. 15 00:01:23,140 --> 00:01:27,010 So in here for the drawing I'm going to add the necessary stuff. 16 00:01:27,010 --> 00:01:29,100 One of them is in it. 17 00:01:29,170 --> 00:01:40,000 So override that one say so that in it's weight of frame V frame which is this frame and the moment 18 00:01:40,000 --> 00:01:46,180 we do that we also get an error saying that the required initializer in it with the code there must 19 00:01:46,180 --> 00:01:46,970 be there. 20 00:01:47,020 --> 00:01:51,200 So you can just add this and leave it somewhere that you know you don't really do anything with it. 21 00:01:51,370 --> 00:01:57,820 That is for when you want to initialize your identities directly from the storyboard which is not what 22 00:01:57,820 --> 00:01:59,000 you want to do right now. 23 00:01:59,260 --> 00:02:03,450 And then the more important one is that they're all function. 24 00:02:03,460 --> 00:02:09,820 So I'm going to say draw which is an all right and everything that you want to do should happen between 25 00:02:09,820 --> 00:02:10,740 here. 26 00:02:11,110 --> 00:02:18,100 Let's quickly recap everything we did so far we made a new class of the type you I view and we have 27 00:02:18,100 --> 00:02:20,960 an override function for it's draw. 28 00:02:20,980 --> 00:02:25,080 This is something that you probably haven't seen yet or maybe you have on your own. 29 00:02:25,090 --> 00:02:27,520 I probably didn't cover it in this course yet. 30 00:02:27,550 --> 00:02:30,460 Let me quickly explain how we call this one. 31 00:02:30,670 --> 00:02:33,520 Let's go ahead into our controller. 32 00:02:33,690 --> 00:02:37,300 And as you can imagine we have to make an instance of that. 33 00:02:37,300 --> 00:02:38,580 So in my view a lot. 34 00:02:38,620 --> 00:02:42,190 I'm going to go ahead and say Let let's call it. 35 00:02:42,180 --> 00:02:48,170 The view is going to become the drawing view of. 36 00:02:48,340 --> 00:02:56,530 It's going to ask for a frame and the frame will want to give it is self doubt view dot frame. 37 00:02:56,890 --> 00:03:04,510 So I want to make a view which is exactly the same size of my main window essentially self that if you 38 00:03:05,310 --> 00:03:12,340 want to change my grand color so we can somehow seat the view that by gone color becomes you eye color 39 00:03:12,400 --> 00:03:21,590 that light gray color for instance and then I say self that view DOD rather sober view their view. 40 00:03:21,610 --> 00:03:28,970 Now this is something we have done before we have initialises drawing views or any kind of view. 41 00:03:29,110 --> 00:03:35,320 And we have attached them to our self that view or any other kind of view on the baculum obviously is 42 00:03:35,320 --> 00:03:37,810 that the question becomes about this one. 43 00:03:37,810 --> 00:03:40,170 How do we call it this method. 44 00:03:40,330 --> 00:03:45,830 And this is the kind of method that you can call away for instance saying if you don't draw. 45 00:03:45,840 --> 00:03:47,430 It doesn't work like that. 46 00:03:47,450 --> 00:03:49,200 Did you read Roy. 47 00:03:49,220 --> 00:03:56,290 Or essentially ask for it to be drawn is saying their view that set needs a display. 48 00:03:56,350 --> 00:04:03,030 It means this guy has to redraw itself because something has changed in there. 49 00:04:03,100 --> 00:04:06,430 So for now without even drawing anything in it. 50 00:04:06,520 --> 00:04:14,920 If I go ahead and run the quote we should be able to see a light gray background view completely covering 51 00:04:14,920 --> 00:04:20,520 the entirety of our screen if that is that it means that so far the code is working. 52 00:04:21,380 --> 00:04:22,210 And that's there. 53 00:04:22,220 --> 00:04:23,880 So we have the lights on. 54 00:04:24,050 --> 00:04:29,380 So now we go to the actual part which is of writing code which is going to draw a stuff. 55 00:04:29,390 --> 00:04:31,930 So let's go ahead in here into the draw. 56 00:04:32,000 --> 00:04:35,630 And the first thing we have to do is we have to get a context for drawing. 57 00:04:35,630 --> 00:04:40,920 So I'm going to say if let us call it my context or context. 58 00:04:41,030 --> 00:04:50,920 And that's going to become you my graphics card and context if that context was available within drove 59 00:04:50,940 --> 00:04:52,490 each year here different. 60 00:04:52,590 --> 00:04:53,290 Is. 61 00:04:53,460 --> 00:04:57,900 But then if led to make sure that you know nothing could possibly go wrong. 62 00:04:58,040 --> 00:05:00,650 If that's the case let's go ahead and add some stuff. 63 00:05:00,650 --> 00:05:06,180 The first thing I want to add is I want to add a little rectangular essentially. 64 00:05:06,200 --> 00:05:10,880 So I'm going to say context which is can text. 65 00:05:10,910 --> 00:05:18,770 I wanted it to be context Dot said feel the color fill color. 66 00:05:18,800 --> 00:05:26,120 And when I get the color I'm going to become a white color dot that's a red and I have to get the cool 67 00:05:26,120 --> 00:05:28,230 graphics color out of it. 68 00:05:28,340 --> 00:05:32,690 So I have to convert the white color into a cool graphics color. 69 00:05:32,870 --> 00:05:38,360 So we set the color and then we can actually set whatever we want to set. 70 00:05:38,360 --> 00:05:46,870 So I'm going to say context dot fin and I want it filled with a CGI effect and that's just the CGI that 71 00:05:46,940 --> 00:05:49,350 we have done many many many times before. 72 00:05:49,490 --> 00:05:58,040 So my subject is going to be let's say from a stacked them properly so it's easier to see let's say 73 00:05:58,040 --> 00:06:14,570 from 20 to 40 to self are dot frame dot sized dot minus 40 so 20 pixels margin on the left hand if it 74 00:06:14,570 --> 00:06:19,810 says margin on the right the subtotal or for the height of let's say 200. 75 00:06:20,110 --> 00:06:24,140 And that's all I have to do in here to draw one rectangle. 76 00:06:24,310 --> 00:06:32,440 Let's go ahead and roll it and now we can see a red rectangle being drawn now you might be asking yourself 77 00:06:32,440 --> 00:06:35,450 so I could simply do that with you I view. 78 00:06:35,470 --> 00:06:38,320 What's the advantage of doing it in here. 79 00:06:38,470 --> 00:06:42,010 And the advantage advantages not in drawing things such as a rectangle. 80 00:06:42,010 --> 00:06:44,840 There are advantages in drawing things that are more advanced. 81 00:06:44,890 --> 00:06:47,370 So let's have a look at some of those stuff. 82 00:06:47,500 --> 00:06:53,290 I'm going to go in here in the same context after I have drawn the rectangle I'm going to go and draw 83 00:06:53,400 --> 00:06:56,740 draw in an oval or a or a circle essentially. 84 00:06:56,860 --> 00:07:01,380 So I'm going to change the color so I can see it again in a different color. 85 00:07:01,420 --> 00:07:09,220 So this time is going to become a blue one and then I'm going to go ahead and say context dot fill. 86 00:07:09,370 --> 00:07:14,580 And this time I want to fill an ellipse and the Arabs and they want to fill is going to ask for a c 87 00:07:14,580 --> 00:07:21,040 direct again which is essentially the boundaries of the circle you are trying to draw for the boundaries 88 00:07:21,040 --> 00:07:26,500 of that I'm going to go ahead and say so x and y of that. 89 00:07:26,520 --> 00:07:36,210 Let's say it is this number 20 and devoid of it is 40 plus 20 that is 240 and other twenty. 90 00:07:36,280 --> 00:07:37,860 Two hundred and sixty. 91 00:07:37,870 --> 00:07:42,830 So it is below the rectangle that we have there. 92 00:07:42,850 --> 00:07:47,030 I'm going to say let's make it this bit of the view. 93 00:07:47,440 --> 00:07:53,020 So that's that and a height of it actually does make the height of it exactly the same as that. 94 00:07:53,020 --> 00:07:55,230 So one of them would be a rectangle. 95 00:07:55,270 --> 00:07:59,680 The other one would be an ellipse but within that rectangle. 96 00:07:59,830 --> 00:08:01,480 And this time is going to be blue. 97 00:08:01,480 --> 00:08:03,780 Let's go ahead and run this one. 98 00:08:03,880 --> 00:08:06,440 And we should be able to see the two of them. 99 00:08:06,460 --> 00:08:10,380 One of them below the other one exactly like that. 100 00:08:10,430 --> 00:08:16,430 And that's that's very useful because there is no other way for drawing objects like that anywhere in 101 00:08:16,430 --> 00:08:17,520 the screen. 102 00:08:17,540 --> 00:08:23,670 The Using the outlet's there is no UI view that draws round objects. 103 00:08:23,690 --> 00:08:27,060 Let's go ahead and add another thing this I'm going to add a line. 104 00:08:27,080 --> 00:08:31,400 So I'm going to say context and I have to get a vid for it. 105 00:08:31,410 --> 00:08:38,310 So I'm going to say set the line but I'm going to make it say 10. 106 00:08:38,660 --> 00:08:41,620 And that's that's C.G. float value essentially. 107 00:08:41,630 --> 00:08:47,700 Then I'm going to go ahead and change the color of this stroke so I'm going to say context that set 108 00:08:47,710 --> 00:08:49,010 a strong color. 109 00:08:49,280 --> 00:08:55,840 And that's going to become a color dot let's say Green Dot C.G. color. 110 00:08:55,850 --> 00:08:59,430 So we have to convert that into a C-g heard as such. 111 00:08:59,590 --> 00:09:04,290 Now let's get some points for where you want to draw the line. 112 00:09:04,400 --> 00:09:11,810 So I'm going to have to essentially introduce an array and then I say let's let's call it points or 113 00:09:11,810 --> 00:09:21,380 eight or nine array points or three points and raise that becomes a an array with several values one 114 00:09:21,380 --> 00:09:23,710 of them being C.G. point. 115 00:09:24,260 --> 00:09:33,530 And that first one I'm going to play sit at 260 Antwon that is 400 and 60 plus another twenty four hundred 116 00:09:33,530 --> 00:09:34,440 and eighty. 117 00:09:34,470 --> 00:09:41,750 So twenty four hundred and eighty and then I'm going to have another C.G. point. 118 00:09:42,080 --> 00:09:50,140 Another one that one is going to be all the way to the size of the vits and the Y are four hundred and 119 00:09:50,180 --> 00:09:50,540 eighty. 120 00:09:50,540 --> 00:09:55,220 So essentially in the same place so it's going to be an horizontal line. 121 00:09:55,400 --> 00:10:05,150 So we have a dot and I'm going to go ahead and say well no they have that context do I add the line 122 00:10:06,950 --> 00:10:13,620 on in that line I think I used the wrong one because the line is asking for a point. 123 00:10:13,890 --> 00:10:16,380 I think they should get on line. 124 00:10:16,440 --> 00:10:16,910 Yes. 125 00:10:16,920 --> 00:10:22,480 Between these points and the points eight is that one. 126 00:10:22,980 --> 00:10:34,650 And then I'm going to go ahead and say context doth the stroke line segments and the segments are again 127 00:10:34,710 --> 00:10:35,260 the same. 128 00:10:35,260 --> 00:10:38,380 Guys let's go ahead and run it. 129 00:10:40,760 --> 00:10:46,270 So now we have another line which is essentially a horizontal line as well. 130 00:10:46,280 --> 00:10:52,160 And with this you could draw a combination of different things and so many different drawings you can 131 00:10:52,190 --> 00:10:54,280 you can essentially produce. 132 00:10:54,350 --> 00:11:01,830 So it was a quick introduction to the use of context and graphics context for drawing different items. 133 00:11:01,840 --> 00:11:07,640 There is a lot of stuff you can do with did primarily in drawing primitive objects as well as drawing 134 00:11:07,640 --> 00:11:13,700 curves which is something that we will cover in the next few lessons using the graphics context you 135 00:11:13,700 --> 00:11:20,720 could essentially render objects into images and perhaps read or write PTF files as well. 136 00:11:20,720 --> 00:11:27,470 So I recommend that you guys have a look at it and get a sense of you know familiarizing yourself with 137 00:11:27,470 --> 00:11:30,200 the different possibilities of the core graphics. 138 00:11:30,320 --> 00:11:34,810 And let's move on to our next lesson will be draw Bezier curves.