IOS drawing summary, ios drawing

Source: Internet
Author: User

IOS drawing summary, ios drawing
Preface

There are projects in development that use iOS plotting. Last year, I was very busy and didn't take the time to summarize it. Now it is a summary of drawing in the project last year,



I. Preface to several methods of circle painting

IOS supports two Graphics API families: Core Graphics/QuartZ 2D and OpenGL ES. OpenGL ES is a cross-platform graphical API and is a simplified version of OpenGL. QuartZ 2D is an API developed by Apple and is part of the Core Graphics Framework. It should be noted that OpenGL ES is an application programming interface that describes the behavior of methods, structures, functions, and the semantics of how they should be used. That is to say, it only defines a set of specifications, and the specific implementation is done by the equipment manufacturer according to the specifications. Many people often misunderstand interfaces and implementations. An inappropriate analogy: the clock on the wind and the clock on the battery have the same visual behavior, but the internal implementation of the two is completely different. Because manufacturers can freely Implement Open gl es, OpenGL ES implemented by different systems also has huge performance differences. The iOS system provides two plotting frameworks: UIBezierPath and Core Graphics. The UIKit of the former is actually further encapsulation of path in the Core Graphics framework, so it is relatively simple to use. But after all, Core Graphics is closer to the underlying layer, so it is more powerful.

Core Graphics

All operations of Core Graphics API are performed in one context. Therefore, you need to obtain the context before drawing and pass it into the function for rendering. If you are rendering an image in memory, you need to input the context of the image. Obtaining a graphic context is the first step for us to complete the drawing task. You can understand the graphic context as a canvas. If you don't get this canvas, you won't be able to complete any drawing operations. Of course, there are many ways to obtain a graphic context. Here I will introduce the two most common methods for obtaining a graphic context.

MyView1
- (void) drawRect: (CGRect) rect {    UIBezierPath* p = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0,100,100)];    [[UIColor blueColor] setFill];    [p fill];}
MyView2
- (void) drawRect: (CGRect) rect {    CGContextRef con = UIGraphicsGetCurrentContext();    CGContextAddEllipseInRect(con, CGRectMake(0,0,100,100));    CGContextSetFillColorWithColor(con, [UIColor blueColor].CGColor);    CGContextFillPath(con);}

In the drawLayer: inContext: Method of the UIView subclass, implement the drawing task. DrawLayer: inContext: The method is a proxy method used to draw layer content. To be able to call the drawLayer: inContext: method, we need to set the proxy object of the layer. However, you should not set the UIView object as the delegate object of the display layer because the UIView object is already a proxy object of the implicit layer, setting it as the delegate object of another layer will cause problems. The lightweight approach is to write the proxy class responsible for drawing.

MyView3
- (void)drawLayer:(CALayer*)lay inContext:(CGContextRef)con {    UIGraphicsPushContext(con);    UIBezierPath* p = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0,100,100)];    [[UIColor orangeColor] setFill];    [p fill];    UIGraphicsPopContext();}
MyView4
- (void)drawLayer:(CALayer*)lay inContext:(CGContextRef)con {    CGContextAddEllipseInRect(con, CGRectMake(0,0,100,100));    CGContextSetFillColorWithColor(con, [UIColor orangeColor].CGColor);    CGContextFillPath(con);}

Create an image context. Call the uigraphicsbeginimagecontextwitexceptions function to obtain the graphic context used to process the image. With this context, you can draw on it and generate an image. Call the UIGraphicsGetImageFromCurrentImageContext function to obtain a UIImage object from the current context. Remember to call the UIGraphicsEndImageContext function to disable the graphic context after all your drawing operations.

MyImageView1
- (void) awakeFromNib {    [super awakeFromNib];    UIGraphicsBeginImageContextWithOptions(CGSizeMake(100,100), NO, 0);    CGContextRef con = UIGraphicsGetCurrentContext();    CGContextAddEllipseInRect(con, CGRectMake(0,0,100,100));    CGContextSetFillColorWithColor(con, [UIColor yellowColor].CGColor);    CGContextFillPath(con);    UIImage* im = UIGraphicsGetImageFromCurrentImageContext();    UIGraphicsEndImageContext();    self.image = im;}
MyImageView2
- (void) awakeFromNib {    [super awakeFromNib];    UIGraphicsBeginImageContextWithOptions(CGSizeMake(100,100), NO, 0);    UIBezierPath* p = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0,100,100)];    [[UIColor yellowColor] setFill];    [p fill];    UIImage* im = UIGraphicsGetImageFromCurrentImageContext();    UIGraphicsEndImageContext();    self.image = im;}

Drawing steps Summary: 1. Get context 2. Create path (description path) 3. Add path to context 4. Render Context

1. Drawing in drawRect is usually performed. Only in this method can the graphic context associated with the View layer be obtained.

2. drawRect will be called in the following cases:

1. If the rect size is not set during UIView initialization, The drawRect will not be automatically called. DrawRect is called after the Controller-> loadView, Controller-> viewDidLoad method. so don't worry about the drawRect of these views in the controller. in this way, you can set some values for the View in the Controller (if some variable values are required for the View draw ).

2. This method is called after sizeToFit is called. Therefore, you can call sizeToFit to calculate the size. Then the system automatically calls drawRect: method.

3. Set the value of contentMode to UIViewContentModeRedraw. The drawRect: is automatically called every time the frame is set or changed :.

4. Call setNeedsDisplay directly or setNeedsDisplayInRect to trigger drawRect:, but there is a precondition that the rect cannot be 0.
1, 2 and 3 are not recommended.

3. Notes for using the drawRect method:

1. If you use UIView for plotting, you can only obtain the corresponding contextRef in the drawRect: method and plot it. If it is obtained in other methods, an invalidate ref will be obtained and cannot be used for drawing. DrawRect: The call method cannot be displayed manually. You must call setNeedsDisplay or setNeedsDisplayInRect to enable the system to automatically call this method. 2. If you use CAlayer to draw a chart, you can only draw it in drawInContext: (similar to drawRect) or the corresponding method in delegate. It also calls setNeedDisplay and other indirect call of the above method. 3. If you want to draw images in real time, you cannot use gestureRecognizer. You can only use touchbegan or other methods to use setNeedsDisplay to refresh the screen in real time.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.