Use quartz2d drawing and custom Uiimageview controls in IOS development _ios

Draw Basic Graphics
One, simple explanation

Graphics Context Graphics: is a cgcontextref type of data

Role of graphics Context: Saving drawing information, drawing status

Determines the output target drawn (where to draw to?) (The output target can be a PDF file, a bitmap, or a display window)

The same set of drawing sequences, specifying different graphics context, can draw the same image to a different target.

QUARTZ2D provides the following types of graphics context:

Bitmap Graphics Context

PDF Graphics Context

Window Graphics Context

Layer Graphics Context

Printer Graphics Context

As long as the context is different, the place to draw is different.

This article explains how to draw the picture to the top of the bitmap, that is, the request to generate a picture, the picture above saved the drawing information.

Bitmap is the picture, which is the uiimage of the system. A uiimage is a bitmap

Second, how to draw the picture to the bitmap?

Note: You cannot get the context of bitmap directly in the DrawRect: method, and we need to create it ourselves.

code example:

Copy Code code as follows:

//
Yyviewcontroller.m
06-Draw Basic Graphics
//
Created by Apple on 14-6-22.
Copyright (c) 2014 itcase. All rights reserved.
//

#import "YYViewController.h"

@interface Yyviewcontroller ()
@property (Weak, nonatomic) Iboutlet Uiimageview *iv;
@end

Copy Code code as follows:

@implementation Yyviewcontroller

-(void) viewdidload
{
[Super Viewdidload];

Load picture
0. Create a bitmap context
The method of C language
Cgbitmapcontextcreate (< #void *data#> < #size_t width#> < #size_t height#> < #size_t bitspercom Ponent#&gt < #size_t bytesperrow#> < #CGColorSpaceRef space#> < #CGBitmapInfo bitmapinfo#>)
Methods of encapsulation in OC
Method 1
Uigraphicsbeginimagecontext (< #CGSize size#>);
Method 2
Uigraphicsbeginimagecontextwithoptions (Cgsizemake), NO, 0);
1. Get Bitmap context
Cgcontextref CTX = Uigraphicsgetcurrentcontext ();
2. Drawing (drawing a circle)
Cgcontextaddellipseinrect (CTX, cgrectmake (0, 0, 100, 100));
3. Rendering
Cgcontextstrokepath (CTX);
4. Get the generated picture
UIImage *image=uigraphicsgetimagefromcurrentimagecontext ();
5. Show the generated picture to ImageView
Self.iv.image=image;
6. Save the drawn pictures into the file
First convert the picture to binary data, and then write the picture to the file
UIImageJPEGRepresentation (image, 1); The second argument is the effect of the saved picture
NSData *data=uiimagepngrepresentation (image);
[Data writetofile:@ "/users/apple/desktop/abc.png" atomically:yes];
}

-(void) didreceivememorywarning
{
[Super didreceivememorywarning];
Dispose of any of the can is recreated.
}

@end

Program execution Effect:

After the program is finished, a abc.png picture is created at the specified location

Supplementary Note:

1. How to create a bitmap graphics context

Copy Code code as follows:

Methods 1 Uigraphicsbeginimagecontext (< #CGSize size#>);

Methods 2 uigraphicsbeginimagecontextwithoptions (cgsize size, BOOL opaque, cgfloat scale)

The same can be done with two methods, but the clarity and quality of the picture created in the first method will not be as good as the second method.
Method 2 receives three parameters:
Cgsize Size: Specifies the size of the bitmap to be created in the future

BOOL opaque: Set transparent yes to represent transparency, no is opaque

CGFloat scale: Represents scaling, 0 means not scaling

The created bitmap corresponds to a UIImage object

Memory management for 2.QUARTZ2D

objects created with functions that contain "create" or "Copy" must be released after use, or they will result in a memory leak

Objects that are obtained using functions that do not contain "Create" or "Copy", you do not need to release

If you retain an object and you are no longer using it, you need to release it

You can use the Quartz 2D function to specify an object for retain and release. For example, if you create a Cgcolorspace object, you use functions Cgcolorspaceretain and cgcolorspacerelease to retain and release objects.

You can also use the Core Foundation Cfretain and Cfrelease. Note You cannot pass null values to these functions

Customizing the Uiimageview Control

First, the realization of ideas

The biggest purpose of quartz2d is to customize view (custom UI controls) and customize the view when the view of the system does not meet the requirements we use.
Using quartz2d custom view, you can start with the use of ImageView that mimics the system.
Demand-driven development: The ImageView process of imitating systems
1. Create
2. Set Picture
3. Set Frame
4. Add the custom view created to the interface (in a custom view, you need an image property to receive the image Image parameter->5).
5. Add an Image property (next, get image, you should get this image to render out.) How do you render it? How does a custom view show the picture? -> the picture, so you need to rewrite the DrawRect: method for the Custom view.
6. Rewrite the custom view DrawRect: method to draw a graphic inside the method.
Second, code implementation

Copy Code code as follows:

The use of ImageView with the system itself
//
Yyviewcontroller.m
02-Custom Uiimageview
//
Created by Apple on 14-6-22.
Copyright (c) 2014 itcase. All rights reserved.
//

#import "YYViewController.h"

@interface Yyviewcontroller ()

@end

@implementation Yyviewcontroller

-(void) viewdidload
{
[Super Viewdidload];
The use of the Uiimageview system
1. Create a Uiimageview
Uiimageview *iv=[[uiimageview Alloc]init];
2. Set Picture
Iv.image=[uiimage imagenamed:@ "Me"];
3. Set Frame
Iv.frame=cgrectmake (100, 100, 100, 100);
4. Add the custom view you created to the interface
[Self.view Addsubview:iv];
}
@end

Implementation effect:

Use quartz2d to customize view with the following code:

Create a new custom class to inherit from the Uiview,yyimageview.h file code as follows:

Copy Code code as follows:

//
yyimageview.m
02-Custom Uiimageview
//
Created by Apple on 14-6-22.
Copyright (c) 2014 itcase. All rights reserved.
//

#import "YYimageView.h"

@implementation Yyimageview

Overriding DrawRect: Methods
-(void) DrawRect: (cgrect) rect
{
[Self.image Drawinrect:rect];
}

@end

In the main controller, imitate the system with the uiimageview of the process, achieve the same effect.

Copy Code code as follows:

//
Yyviewcontroller.m
02-Custom Uiimageview
//
Created by Apple on 14-6-22.
Copyright (c) 2014 itcase. All rights reserved.
//

#import "YYViewController.h"
#import "YYimageView.h"

@interface Yyviewcontroller ()

@end

Copy Code code as follows:

@implementation Yyviewcontroller

-(void) viewdidload
{
[Super Viewdidload];

The use of the Uiimageview system
1. Create a Uiimageview
Uiimageview *iv=[[uiimageview Alloc]init];
2. Set Picture
Iv.image=[uiimage imagenamed:@ "Me"];
3. Set Frame
Iv.frame=cgrectmake (100, 100, 100, 100);
4. Add the custom view you created to the interface
[Self.view Addsubview:iv];


Custom Uiimageview
1. Create
2. Set Picture
3. Set Frame
4. Add the custom view you created to the interface
Yyimageview *yyiv=[[yyimageview Alloc]init];
Yyiv.image=[uiimage imagenamed:@ "Me"];
Yyiv.frame=cgrectmake (100, 100, 100, 100);
[Self.view Addsubview:yyiv];

}
@end

Third, improve

The problems that exist?

In the interface, add a button, request to click the button, can realize the picture switch.

Copy Code code as follows:

//
Yyviewcontroller.m
02-Custom Uiimageview
//
Created by Apple on 14-6-22.
Copyright (c) 2014 itcase. All rights reserved.
//

#import "YYViewController.h"
#import "YYimageView.h"

@interface Yyviewcontroller ()
@property (Nonatomic,strong) Uiimageview *imageview;
@end

Copy Code code as follows:

@implementation Yyviewcontroller

-(void) viewdidload
{
[Super Viewdidload];

The use of the Uiimageview system
1. Create a Uiimageview
Uiimageview *iv=[[uiimageview Alloc]init];
2. Set Picture
Iv.image=[uiimage imagenamed:@ "Me"];
3. Set Frame
Iv.frame=cgrectmake (100, 100, 100, 100);
4. Add the custom view you created to the interface
[Self.view Addsubview:iv];
Self.imageview=iv;


Custom Uiimageview
1. Create
2. Set Picture
3. Set Frame
4. Add the custom view you created to the interface
Yyimageview *yyiv=[[yyimageview Alloc]init];
Yyiv.image=[uiimage imagenamed:@ "Me"];
Yyiv.frame=cgrectmake (100, 100, 100, 100);
[Self.view Addsubview:yyiv];

Add a button to toggle the picture when the button is clicked
UIButton *btn=[[uibutton alloc]initwithframe:cgrectmake (100, 300, 100, 50)];
[btn Settitlecolor:[uicolor Blackcolor] forstate:uicontrolstatenormal];
[Btn settitle:@ "Click to switch" forstate:uicontrolstatenormal];
[Btn addtarget:self Action: @selector (Btnclick) forcontrolevents:uicontroleventtouchupinside];
[Self.view ADDSUBVIEW:BTN];

}

-(void) Btnclick
{
UIImage *image=[uiimage imagenamed:@ "Psb.jpeg"];
Self.imageview.image=image;
}
@end

Click on the button to implement the picture switch.

Description: The uiimage of the system can be replaced. The custom ImageView does not change because the custom view needs to be redrawn and rendered once for the picture. So when you get the replacement picture, you need to redraw the picture and rewrite the SetImage method.
The perfect code is as follows:

The code for the YYVIEWCONTROLLER.M file in the primary controller:

Copy Code code as follows:

//
Yyviewcontroller.m
02-Custom Uiimageview
//
Created by Apple on 14-6-22.
Copyright (c) 2014 itcase. All rights reserved.
//

#import "YYViewController.h"
#import "YYimageView.h"

@interface Yyviewcontroller ()
@property (Nonatomic,strong) Uiimageview *imageview;
@property (Nonatomic,strong) Yyimageview *yyimageview;
@end

Copy Code code as follows:

@implementation Yyviewcontroller

-(void) viewdidload
{
[Super Viewdidload];

The use of the Uiimageview system
1. Create a Uiimageview
Uiimageview *iv=[[uiimageview Alloc]init];
2. Set Picture
Iv.image=[uiimage imagenamed:@ "Me"];
3. Set Frame
Iv.frame=cgrectmake (100, 100, 100, 100);
4. Add the custom view you created to the interface
[Self.view Addsubview:iv];
Self.imageview=iv;


Custom Uiimageview
1. Create
2. Set Picture
3. Set Frame
4. Add the custom view you created to the interface
Yyimageview *yyiv=[[yyimageview Alloc]init];
Yyiv.image=[uiimage imagenamed:@ "Me"];
Yyiv.frame=cgrectmake (100, 100, 100, 100);
[Self.view Addsubview:yyiv];
Self.yyimageview=yyiv;

Add a button to toggle the picture when the button is clicked
UIButton *btn=[[uibutton alloc]initwithframe:cgrectmake (100, 300, 100, 50)];
[btn Settitlecolor:[uicolor Blackcolor] forstate:uicontrolstatenormal];
[Btn settitle:@ "Click to switch" forstate:uicontrolstatenormal];
[Btn addtarget:self Action: @selector (Btnclick) forcontrolevents:uicontroleventtouchupinside];
[Self.view ADDSUBVIEW:BTN];

}

-(void) Btnclick
{
NSLog (@ "button was clicked");
UIImage *image=[uiimage imagenamed:@ "Psb.jpeg"];
Self.imageview.image=image;
Self.yyimageview.image=image;
}
@end

Code for YYIMAGEVIEW.M files:

Copy Code code as follows:

//
yyimageview.m
02-Custom Uiimageview
//
Created by Apple on 14-6-22.
Copyright (c) 2014 itcase. All rights reserved.
//

#import "YYimageView.h"

@implementation Yyimageview

Overriding DrawRect: Methods
-(void) DrawRect: (cgrect) rect
{
[Self.image Drawinrect:rect];
}

Overriding the Set method
-(void) SetImage: (UIImage *) image
{
_image=image;
[Self setneedsdisplay];
}
@end