quartz2d controls the circle scaling and the implementation of the brush frame effect in IOS development _ios

A brief review of quartz2d
One, what is quartz2d

Quartz 2D is a two-dimensional graphics engine that supports both iOS and Mac systems ⼀

Quartz 2D can complete the work:

Drawing graphics: line \ triangle \ Rectangle \ Circle Arc etc.

Draw text

Drawing \ Generating pictures (images)

Read \ Build PDF

Screenshot \ Crop Picture

Customizing UI Controls

Ii. the value of quartz2d in iOS development

To help build an aesthetically pleasing UI interface, iOS provides a uikit framework, ⾥⾯ has a wide variety of UI controls

Uilabel: Explicit ⽰ text
Uiimageview: Show Pictures
UIButton: Display both picture and ⽂ characters (can be clicked)

The ⽤uikit framework provides control, patchwork, and can build and realistically some simple, common UI boundaries ⾯

However, some UI interfaces are extremely complex, ⽽, and ⽐, and ⽤ the normal UI controls, you can use the QUARTZ2D technology to draw the structure inside the control and customize the control's appearance

In fact, the contents of the ⼤ part of iOS are drawn by quartz2d.
Therefore, the important ⼀ value of quartz2d in iOS development is Custom view (custom UI control)

Third, graphics context

Graphics Context Graphics: is a cgcontextref type of data

The role of the graphics context:

(1) Save drawing information, drawing status
(2) Determine the output target to draw (⽅ to what?) (The output target can be a Pdf⽂ file, a bitmap, or a monitor window)

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

Four, custom view

How do I define view using Quartz2d⾃? (⾃ defines UI controls)

How to use quartz2d to draw things into view?

First, there must be a graphics context, because it saves the drawing information and decides where to draw it.

Second, the graph up and down ⽂ must be associated with the view in order to draw the content onto view

⾃ to define a view:

(1) New ⼀ class, inherited from UIView

(2) Implement-(void) DrawRect: (CGRect) Rect⽅ method. And then in this ⽅ method:

1 to obtain the graphic context associated with the current view;

2) draw the corresponding graphic content

3 rendering all content rendered to view using the graphics context

V. Supplementary notes

1.drawRect:

(1) Why to realize Drawrect:⽅ method to draw to view?

Because the graphics context associated with view can be obtained in the Drawrect:⽅ method

(2) When is the Drawrect:⽅ method invoked?

When the view is first displayed on the screen (added to the UIWindow)

Call Setneedsdisplay or Setneedsdisplayinrect of view: When

2.QUARTZ2D Notice

• Quartz2d's API is pure C ⾔ language.
• The Quartz2d API comes from the core graphics framework
• Data types and functions are basically prefixed with CG
• Cgcontextref
• Cgpathref
• Cgcontextstrokepath (CTX);

3.drawRect: The upper and lower ⽂ text obtained

After you have the context in the DrawRect: method, you can draw something to the view

There is a layer (layer) attribute inside the view, DrawRect: The method gets a layer Graphics context, so the things that are drawn are actually drawn to the layer of the view.

View is able to show things because of its internal layer

controlling the scaling of a circle through slider
1. Implementation process

Create a new project, create a new class that inherits from UIView, and associate it with a custom view in storyboard.

interface to build, as shown:

code example:

YYVIEWCONTROLLER.M file

Copy Code code as follows:

//
Yyviewcontroller.m
04-Zoom on a circle
//
Created by Apple on 14-6-11.
Copyright (c) 2014 itcase. All rights reserved.
//

#import "YYViewController.h"
#import "YYview.h"

@interface Yyviewcontroller ()
@property (Weak, nonatomic) Iboutlet Yyview *circleview;
-(Ibaction) ValueChange: (UISlider *) sender;

@end

Copy Code code as follows:

@implementation Yyviewcontroller

-(void) viewdidload
{
[Super Viewdidload];
Do no additional setup after loading the view, typically from a nib.
}

-(Ibaction) ValueChange: (UISlider *) Sender {
When the shift is changed, pass the value to view and change the radius of the circle.
NSLog (@ "%f", Sender.value);
Pass the value of the sender to the custom view to set the radius of the circle
Self.circleview.radius=sender.value;
}
@end

YYview.h file

Copy Code code as follows:

//
YYview.h
04-Zoom on a circle
//
Created by Apple on 14-6-11.
Copyright (c) 2014 itcase. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface Yyview:uiview
Provides an attribute to receive incoming radius from outside
@property (nonatomic,assign) float radius;
@end

YYVIEW.M file

Copy Code code as follows:

//
yyview.m
04-Zoom on a circle
//
Created by Apple on 14-6-11.
Copyright (c) 2014 itcase. All rights reserved.
//

#import "YYview.h"

@implementation Yyview
The circle in the custom view is not displayed
Override the Set method to assign a value to the radius
-(void) Setradius: (float) Radius
{
_radius=radius;
Notifies a custom view to redraw a graphic
[Self setneedsdisplay];
}

If the view is created from Xib or storyboard, the Awakefromnib method is called first
-(void) awakefromnib
{
Here, set an initial value for the radius of the circle.
Self.radius = 20;
}

-(void) DrawRect: (cgrect) rect
{
1. Get the graphics context
Cgcontextref Ctx=uigraphicsgetcurrentcontext ();
2. Drawing
Draw a circle in a custom view
Cgcontextaddarc (CTX, MB, Self.radius, 0, 2*M_PI, 0);
Set the fill color of a circle
[[Uicolor Graycolor]set];

3. Rendering
Cgcontextstrokepath (CTX);
Cgcontextfillpath (CTX);
}

@end

Effect:

2. Note the point:

DrawRect: Methods cannot be invoked manually by ourselves, only by the system.
DrawRect: Call timing: Called when the first display or a redraw event occurs.
Setneedsdisplay method: Redraw, call this method will notify the custom view redraw screen, call DrawRect:.
Tip: When a view is created from Xib or storyboard, the Awakefromnib method is invoked.
3. Supplementing

Brush Frame Effect
Description: The snowflake-like picture drawn to the view, to achieve the picture in the views of the whereabouts of the effect.
1. Implementation code:

Copy Code code as follows:

//
yyview.m
05-Brush Frame Animation
//
Created by Apple on 14-6-11.
Copyright (c) 2014 itcase. All rights reserved.
//

#import "YYview.h"

Private extension
@interface Yyview ()
@property (nonatomic,assign) float imagey;

@end
@implementation Yyview

-(ID) Initwithcoder: (Nscoder *) Adecoder
{
Please note that this must first initialize the parent class's construction method
if (Self=[super Initwithcoder:adecoder]) {
NSLog (@ "Initwithcoder:");

Nstimer is generally used to regularly update some non-interface data and tell how often to call
Use the timer, use the timer will appear cotton phenomenon
[Nstimer scheduledtimerwithtimeinterval:0.1 target:self selector: @selector (updateimage) Userinfo:nil Repeats:YES ];

Cadisplaylink brush frame, default refresh 60 times per second
After the timer is created, it is not executed by default and needs to be loaded into the message loop
Cadisplaylink *display= [Cadisplaylink displaylinkwithtarget:self selector: @selector (updateimage)];
[Display Addtorunloop:[nsrunloop Mainrunloop] formode:nsdefaultrunloopmode];

}
return self;
}

-(void) updateimage
{
Call this method to redraw the screen
[Self setneedsdisplay];
}
-(void) awakefromnib
{
NSLog (@ "awakefromnib");
}

-(void) DrawRect: (cgrect) rect
{
Draw the picture to the view

Each time the method is called to redraw the screen, the Imagey value is +5
self.imagey+=5;
Judge, when the snowflakes are out of the screen, let the picture begin to land
if (self.imagey>rect.size.height) {
self.imagey=0;
}
UIImage *image=[uiimage imagenamed:@ "Snow"];
[Image drawatpoint:cgpointmake (0, Self.imagey)];

UIImage *image2=[uiimage imagenamed:@ "Me"];
[Image2 Drawatpoint:cgpointmake (Self.imagey)];

}

@end

Implementation effect

2. Important note

(1) The order in which the following two methods are called

-(void) awakefromnib

-(ID) Initwithcoder: (Nscoder *) Adecoder

Tip: If view is created from Xib or storyboard you can invoke the Awakefromnib method, archive. Creating a view from a file will actually call the Initwithcoder method first. Xib and storyboard are also documents.

The above two methods,-(ID) Initwithcoder: (Nscoder *) Adecoder will be called first. The implementation of this method requires the implementation of the Nscoding protocol, which has been implemented by default since the UIView was created.

can go to the header file view:

Run the newly created program, and print to verify the order in which the two methods are called.

(2) Two timers

The first one:

Copy Code code as follows:

[Nstimer scheduledtimerwithtimeinterval:0.1 target:self selector: @selector (updateimage) Userinfo:nil Repeats:YES];

Description: Nstimer is generally used to update some non-interface data regularly, tell how often to call once

The second one:

Copy Code code as follows:

Cadisplaylink *display= [Cadisplaylink displaylinkwithtarget:self selector: @selector (updateimage)];

[Display Addtorunloop:[nsrunloopmainrunloop] formode:nsdefaultrunloopmode];

Description: Cadisplaylink brush frame, the default refresh 60 times per second. After the timer is created, it is not executed by default and needs to be loaded into the message loop