Drawing mechanism for iOS

The iOS view mechanism, referring to the iOS view box can be drawn by DrawRect itself, each view of the layer (Calayer) is like a view of the projection, in fact, we can also manipulate it to customize a view, such as a translucent rounded background view.

To complete your drawing on the view, be sure to look at the drawing mechanism of iOS. Today I'm trying to talk about iOS drawing in layman's way.

There are two ways to draw in iOS:

1, using the core graphics library of iOS.

2, using OpenGL ES.

The difference between the two libraries I briefly introduce:

The former is encapsulated mainly through the core graphics library and Uikit, which is closer to our frequently operated view (UIView) or form (UIWindow). For example, the drawrect we mentioned earlier, we are only responsible for drawing in the drawrect, we do not need to pay attention to the interface refresh frequency, as to when the tune DrawRect have iOS view drawing to manage.

Then OpenGL ES is often used in games such as requiring high-frequency refresh and free control of the interface. The popular understanding is that it is closer to the direct control of the screen. In many game programming we may not need a layer of the box, directly on the interface to draw, and through a number of memory cache draw to make the picture smoother.

In other words, OpenGL es can be used as the underlying graphics engine of the view mechanism. That's the relationship they have.

So let's start:

If you want to draw, you have to have a panel at the very least? Whether it is a wall, paper or memory, this is the case. What is it in the iOS drawing? It's a drawing board (Graphics contexts). All the drawing board must first stipulate, otherwise, the computer's drawing all need us to use the number to tell others, that coordinate system first must be clear.

The 2D drawing in iOS is a well-known Cartesian coordinate system, where the origin is in the lower left and the right is the positive axis, and it is important to note that the coordinate system that we are laying out in the view (UIView) is not the same, his dot is on the top left and the right is the positive axis. When we work in the view of the drawrect to get the artboard is already the upper left coordinate, then you want to have your own coordinate system of the content directly drawn, there will be inconsistent problem of coordinates, such as direct drawing of the image will be inverted. (We will say some of the coordinates of the transformation of the content, here do not worry).

We also said in the front of the Windows drawing board that at least we also saw a drawing pad, that in the iOS drawing actually we also have a "virtual" drawing board (graphics contexts), all the drawing operations are in this storyboard operation.

In the view (UIView) in the drawrect operation, actually the view engine has helped us to prepare the artboard (remember the Windows drawing board, so I say you understand), even the current line thickness, the current drawing of the color and so on you passed over. You just need to "connect" to this artboard and then pick up a variety of drawing tools to paint it.

-(void) DrawRect: (cgrect) rect{

Cgcontextref Ref=uigraphicsgetcurrentcontext ();//Get the currently prepared artboard. Painting on this artboard is drawing on the current view.

Cgcontextbeginpath (ref);//This refers to a very important concept called path, which is actually telling the artboard the environment, we have to start drawing, you write down.

Cgcontextmovetopoint (ref,0, 0);//Draw line need I explain? You're not? is to make a straight line at two O ' Day.

Cgcontextaddlinetopoint (ref,300,300);

CGFloat redcolor[4]={1.0,0,0,1.0};

Cgcontextsetstrokecolor (ref, Redcolor);//Set the color of the current brush. Oh, the paintbrush! Do you remember the Windows drawing board I said earlier?

Cgcontextstrokepath (ref);//Tell the artboard to paint the path I moved with a brush.

}

No matter if you draw a circle or draw anything, there are a few steps:

1, get the current panel

2, start drawing declaration

3, painting

4, submit the painting

This article by my Russell's too long, I add one more article. I'm exhausted. Take a look at the drawing mechanism of iOS two.

In the iOS drawing mechanism that article, I said a lot of principles, and now I think it should be put on the stage to say the subject of the program itself. When I finish talking about the subject of the program itself, I introduce how to customize our view (UIView), and I think everyone will reap as much as I do.

We said that the basic graphics mechanism of iOS is its CGXXXX series function, CG is the core graphic, I call the kernel graph library. Let's talk about it by one of the topics (the theme I'm proposing here is Apple's official theme, and I'm trying to make it a little more popular).

No, I would also like to introduce some concepts, otherwise, afraid of everyone or chaos, one to:

coordinate and coordinate transformations : coordinates I'm not going to say, coordinate transformation I want to say something. In iOS apps, zooming, rotating, and so on are common things. So every time we get an artboard, we can't just work on it, and maybe the artboard has been magnified 1000 times times. That is, in the mathematical sense, the coordinates have changed. In the Cartesian coordinate system, the left transformation is nothing more than translation, scaling, rotation, of course, you are more "alone" people, then you can use any transformation matrix, in short I can't control you. But no matter how you change, we can all be abstracted into a 3x3 matrix. (Are you unfamiliar with matrices?) I'm not familiar with it either. It doesn't matter, you know this is OK, not to mention a 3x3 matrix complex where to go, as to why the intuitive coordinate system using a 3x3 matrix, you want to go, how do I know? ）。 In iOS there is a concept called CTM (the current transformation matrix), which is actually telling you to understand the current coordinate features before you work. Otherwise, how do you draw on it? You tell a number that everyone understands it differently. For example, the picture in the first article on the inverted drawing problem is the reason.

path : I mentioned it in the first article, but I still think it should be explained. In fact, this thing is not a big deal, but in reality we take a brush action is so natural, so that we ignore it, but the computer needs to digitize the process, so put forward this concept. But here I would like to emphasize that since it is a computer, then the operation of the path is expected to be more trouble than our people, for example, we draw a lot of things on the wall, we have to check out more than that, it will take a slow, but the computer can use its computing power to help you, for example, it can calculate whether the path you Not closed can be mended for you, and then the closure of the outside of the crop, and so on. Ok! We mentioned here the cropping, for example you can put a picture (square), and then use a five-star shape of the path to cut. Fun, huh? Oh! It seems that the crop is also introduced here. It's a little bit behind.

clipping : The path that piece seems to mention, that's it.

color and Shadow related : Everyone must be not unfamiliar transparent, cmyk,rgb these broken things. If it's strange, I'll talk about it briefly. Start with the color. First let's distinguish between CMYK and RGB is not very significant, just see how you get the original design color is described. In general, you know that RGB is enough. However, in many graphics software also provides the RGBA mode, the last side added a transparent value. You need to be aware that, for example, in CSS3, you can also add transparency values to iOS. Speaking of transparency, we must understand the meaning of several aspects: color transparency, the transparency of the current artboard and the work transparency layer (estimated that everyone is still confused, I will use examples to talk about these things in the following). We're talking about the shadow: Shadow. What is there to say in the shadows? Depressed.

shading and cycle graphs : I don't have to say this, do I? Do the Web page everyone do cycle background, then the iOS drawing mechanism is also supported. Let me just say the shading, the shading is a mechanism of circular drawing. This piece you understand why I put the shading and the circle diagram together. As for how to loop back we will say.

Ok! Enter our theme (I think the line of painting and so I do not have to draw, I am here mainly to the practical, to give you some skills).

1. Gradient Background

First look, we often need a gradient background, as long as you can draw the above, it has or more fun. Like the edges or corners.

Cgcontextref Context=uigraphicsgetcurrentcontext ();
Create a color Gradient object
Cggradientref mygradient;
Cgcolorspaceref Mycolorspace;
size_t locationcount = 3;
CGFloat locationlist[] = {0.0, 0.1, 1.0};
CGFloat colorlist[] = {
1.0, 0.0, 0.5, 1.0,//red, green, blue, alpha
1.0, 0.0, 1.0, 1.0,
0.3, 0.5, 1.0, 1.0
};
Mycolorspace = Cgcolorspacecreatedevicergb ();
Mygradient = Cggradientcreatewithcolorcomponents (Mycolorspace, ColorList,
Locationlist, Locationcount);//The function of the core is this, to understand the gradient of some quantitative things.

Cgpoint StartPoint, EndPoint;
startpoint.x = 0;
Startpoint.y = 0;
Endpoint.x = Cgrectgetmaxx (self.bounds);
Endpoint.y = Cgrectgetmaxy (self.bounds);
Cgcontextdrawlineargradient (context, mygradient, StartPoint, endpoint,0);//This is drawn, and you can trim to complete the transition of a particular shape.
Cgcolorspacerelease (Mycolorspace);
Cggradientrelease (mygradient);

Drawing mechanism for iOS