Drawing details (go to pick)

Quartz is a drawing layer on top of the Darwin core of Mac OS X and is sometimes considered coregraphics. There are two parts composed of quartz:

Quartz compositor, Synthetic windowing system, manages and synthesizes behind-the-scenes window images to build the Mac OS x user interface.

Quartz is a two-dimensional drawing engine in iOS and Mac OS x environments.

Topics include: path-based drawing, transparency drawing, masking, shading, transparent layers, color management, anti-aliasing rendering, generating PDFs, and the processing of PDF metadata related.

14.2 Drawing Basic geometry

View Drawing

On iOS, all drawing, whether or not using OpenGL, Quartz, UIKit, or Core animation-, occurs within the area of the UIView object.

The view defines the area of the screen where the drawing occurs. If you use a system-provided view, the drawing work is automatically processed. However, if you define your own custom view, you must provide your own drawing code.

For applications that use OpenGL to draw, once the rendering surface is established, the drawing model specified by OpenGL must be used.

View Drawing Period

The description system invokes the DrawRect: Method of the UIView object and passes it a rectangle containing the view area that needs to be redrawn. There are several actions to trigger a view update:

Move or delete other views that obscure your view.

Sets the hidden property declaration of the view to no so that it becomes visible from the hidden state.

Roll the view out of the screen, and then back to the screen.

Explicitly call the view's Setneedsdisplay or Setneedsdisplayinrect: method.

Setneedsdisplay is to update the entire view,

Setneedsdisplayinrect is a partial area of the update view.

View Drawing Instance firstquartz2d

H file for custom view

@interface Myview:uiview {    } @end

m file for custom view

@implementation myview-(void) DrawRect: (cgrect) Rect {        Cgcontextref context = Uigraphicsgetcurrentcontext ();        Cgcontextmovetopoint (Context, the "ten,");     Cgcontextaddlinetopoint (context, ten, ());     Cgcontextaddlinetopoint (context,,,);         Closing the path connects the current point to the start of the current path.    Cgcontextclosepath (context);    and stroke the path    [[Uicolor Blackcolor] setstroke];     Cgcontextstrokepath (context);    [[Uicolor Redcolor] setfill];     Cgcontextdrawpath (context, kcgpathfillstroke);    Kcgpathfillstroke,kcgpathfill,kcgpathstroke    } @end

Cgcontextref context = Uigraphicsgetcurrentcontext ();

The two functions of Cgcontextmovetopoint and Cgcontextaddlinetopoint are to construct a depiction path.

Cgcontextclosepath (context); a function is a closed depiction path.

The Cgcontextstrokepath function is a stroke for a closed path.

[[Uicolor Blackcolor] setstroke] Sets the color of the stroke.

[[Uicolor Redcolor] Setfill] Sets the color to fill.

Cgcontextdrawpath (context, kcgpathfillstroke); Sets the way to depict paths. Also commonly used are:

Kcgpathfill and Kcgpathstroke

Graphics context

Before calling the DrawRect: method that you provide, the view object automatically configures its drawing environment so that your code can be drawn immediately. As these

Part of the configuration, the UIView object creates a graphics context for the current drawing environment (corresponding to the CGCONTEXTREF encapsulation type).

The graphical context contains the information needed to draw the system to perform subsequent drawing commands, defining various basic drawing properties, such as drawing the colors used,

Crop area, line width and style information, font information, compositing options, and several other information.

Draw Path

The path is used to describe a 2D geometric shape consisting of a sequence line and a Bézier curve. There are also handy functions for creating simple paths, such as rectangles and ellipses, in the Core graphics. For more complex paths, you must create them yourself with the functions provided by the core graphics framework.

The Bézier curve is the French mathematician "Bessel" found in the work that any curve can be defined by the position of the point at both ends of the control line tangent to it.

Bézier curve

Bézier Curve Instance Beziercurve

-(void) DrawRect: (cgrect) rect {cgcontextref cgcontext = Uigraphicsgetcurrentcontext ();    Cgcontextbeginpath (Cgcontext);    Cgcontextmovetopoint (Cgcontext, 333, 0);    Cgcontextaddcurvetopoint (Cgcontext, 333, 0, 332, 26, 330, 26);    Cgcontextaddcurvetopoint (Cgcontext, 330, 26, 299, 20, 299, 17);    Cgcontextaddlinetopoint (Cgcontext, 296, 17);    Cgcontextaddcurvetopoint (Cgcontext, 296, 17, 296, 19, 291, 19);    Cgcontextaddlinetopoint (Cgcontext, 250, 19);    Cgcontextaddcurvetopoint (Cgcontext, 250, 19, 241, 24, 238, 19);    Cgcontextaddcurvetopoint (Cgcontext, 236, 20, 234, 24, 227, 24);    Cgcontextaddcurvetopoint (Cgcontext, 220, 24, 217, 19, 216, 19);    Cgcontextaddcurvetopoint (Cgcontext, 214, 20, 211, 22, 207, 20);    Cgcontextaddcurvetopoint (Cgcontext, 207, 20, 187, 20, 182, 21);    Cgcontextaddlinetopoint (Cgcontext, 100, 45);    Cgcontextaddlinetopoint (Cgcontext, 97, 46);    Cgcontextaddcurvetopoint (Cgcontext, 97, 46, 86, 71, 64, 72); Cgcontextaddcurvetopoint (CgCOntext, 42, 74, 26, 56, 23, 48);    Cgcontextaddlinetopoint (Cgcontext, 9, 47);        Cgcontextaddcurvetopoint (Cgcontext, 9, 47, 0, 31, 0, 0); Cgcontextstrokepath (Cgcontext);}

14.3 Drawing images and text

Uiimages-drawrect: Method to draw an image:

-[UIImage Drawatpoint: (cgpoint) Point]

-[UIImage Drawinrect: (cgrect) rect]

-[UIImage Drawaspatterninrect: (cgrect) rect]

NSString-drawrect: Method to draw text:

-[NSString Drawatpoint: (cgpoint) point withfont: (Uifont *) font]

Example DrawImage

#import "MyView.h" @implementation myview-(void) DrawRect: (cgrect) rect {        nsstring* imagePath = [[NSBundle] Mainbundle] pathforresource:@ "dog" oftype:@ "png"];    uiimage* myimageobj = [[UIImage alloc] initwithcontentsoffile:imagepath];    [Myimageobj drawatpoint:cgpointmake (0, 0)];    [Myimageobj drawinrect:cgrectmake (0, 0, 480)];        NSString *s = @ "My puppy";        [s Drawatpoint:cgpointmake (0) Withfont:[uifont systemfontofsize:34.0];} @end

Write instance Draw

Dot Object

--h@interface Dot:nsobject {  cgfloat x;  CGFloat y;} @property (assign) CGFloat x; @property (assign) cgfloat y; @end//--m#import "Dot.h" @implementation dot@synthesize x;@ Synthesize y; @end

DrawView.h

#import <UIKit/UIKit.h> @interface Drawview:uiview {  nsmutablearray *dots;} @property (nonatomic, retain) Nsmutablearray *dots; @end

drawview.m

#import "DrawView.h" #import "Dot.h" @implementation drawview@synthesize dots;-(Nsmutablearray *) Dots {    if (nil = = Dots) {        self.dots = [Nsmutablearray array];    }    return dots;} Start:code. drawview.drawrect-(void) DrawRect: (cgrect) rect {    Cgcontextref ctx = Uigraphicsgetcurrentcontext ();    Cgcontextsetfillcolorwithcolor (CTX, [[Uicolor Bluecolor] cgcolor]);    For (Dot *dot in self.dots) {        Cgcontextaddarc (CTX, Dot.x, Dot.y, 5.0f, 0.0f, 2.0f * m_pi, YES);        Cgcontextfillpath (CTX);    }    } End:code. drawview.drawrect-(void) dealloc {    self.dots = nil;    [Super Dealloc];}

The DrawRect method takes the Dot object from the dots collection and draws it one at a screen.

Cgcontextaddarc (CTX, Dot.x, Dot.y, 5.0f, 0.0f, 2.0f * m_pi, YES); the function is to draw arcs.

Cgcontextfillpath (ctx); Fill path.

Start:code. drawview.touchesbegan-(void) Touchesbegan: (Nsset *) touches withevent: (Uievent *) event {    Uitouch *touch = [touches Anyobject];    Cgpoint location = [Touch locationinview:self];    Dot *dot = [[[Dot Alloc] init] autorelease];    Dot.x = location.x;    Dot.y = LOCATION.Y;    [Self.dots removeallobjects];    [Self.dots Addobject:dot];    [Self setneedsdisplay];} End:code. Drawview.touchesbegan//start:code. drawview.touchesmoved-(void) touchesmoved: (Nsset *) touches withevent: (Uievent *) event {    Uitouch *touch = [touches Anyobject];    Cgpoint location = [Touch locationinview:self];    Dot *dot = [[[Dot Alloc] init] autorelease];    Dot.x = location.x;    Dot.y = LOCATION.Y;    [Self.dots Addobject:dot];    [Self setneedsdisplay];} End:code. Drawview.touchesmoved

14.4 coordinates

Quartz coordinates

Quartz technology is the first graphic technology designed for Mac OS X systems, and its coordinate origin is in the lower-left corner.

Uikit coordinates

Uikit coordinates are different from quartz, the origin is in the upper right corner. Controls such as UIView in iOS are based on this coordinate and sometimes need to be converted because quartz coordinates are used in UIView.

Example of coordinate transformation

MYVIEW.M file

#import "MyView.h" @implementation myview-(void) DrawRect: (cgrect) rect {    NSString *path = [[NSBundle Mainbundle] pathforresource:@ "cat" oftype:@ "jpg"];    UIImage *img = [UIImage Imagewithcontentsoffile:path];    CGIMAGEREF image = img. Cgimage;    Cgcontextref context = Uigraphicsgetcurrentcontext ();    Cgcontextsavegstate (context);        CGRect touchrect = CGRectMake (0, 0, img.size.width, img.size.height);    Cgcontextdrawimage (context, touchrect, image);      Cgcontextrestoregstate (context);} @end

Cgcontextsavegstate is the current drawing state to be entered into the graphics stack.

Cgcontextdrawimage (context, touchrect, image) draws a graphic in the context. Cgcontextrestoregstate replies to the current drawing state.

14.5 transformations

Using transformations

Transform (transformation) modifies how graphics are drawn in the context of a graphic. Transformations can be implemented by moving, rotating, or zooming.

Quartz provides several forms of transformations, mainly: CTM (current transformation matrix) transformation and affine (affine) transformation.

CTM (current transformation matrix) transforms, this transformation is simple, the function is:

CGCONTEXTROTATECTM, rotating coordinates

CGCONTEXTSCALECTM, scaling coordinates

CGCONTEXTTRANSLATECTM, moving origin.

Moving transformations

CGCONTEXTTRANSLATECTM (Mycontext, 100, 50)

Moves 100 units forward from the object angle along the x-axis, moving 50 units forward along the y-axis.

Rotation transformation

Static inline double radians (double degrees) {return degrees * m_pi/180;}

CGCONTEXTROTATECTM (Mycontext, radians (–45.));

From Object angle:

Positive numbers are rotated counterclockwise at quartz coordinates, and negative numbers are rotated clockwise.

Positive numbers are rotated clockwise at Uikit coordinates, and negative numbers are counterclockwise.

Scaling transformations

CGCONTEXTSCALECTM (Mycontext,. 5,. 75);

From Object angle: all x coordinates are reduced by 0.5, and all y-coordinates are reduced by 0.75.

Modify the myview.m file

#import "MyView.h" @implementation myview-(void) DrawRect: (cgrect) rect {    NSString *path = [[NSBundle Mainbundle] pathforresource:@ "cat" oftype:@ "jpg"];    UIImage *img = [UIImage Imagewithcontentsoffile:path];    CGIMAGEREF image = img. Cgimage;    Cgcontextref context = Uigraphicsgetcurrentcontext ();    Cgcontextsavegstate (context);        CGCONTEXTROTATECTM (context, M_PI);    CGCONTEXTTRANSLATECTM (context,-img.size.width,-img.size.height);        CGRect touchrect = CGRectMake (0, 0, img.size.width, img.size.height);    Cgcontextdrawimage (context, touchrect, image);      Cgcontextrestoregstate (context);} @end

Affine (affine) transformations

The affine (affine) transform is also a rectangular coordinate transformation that weighs

With transformations, after multiple transformations (multiplication of matrices multiple times),

Each transformation can be represented by a matrix, with multiple matrices

Multiply to get the final result. Affine transformation functions:

Cgaffinemakerotation, creating a rotation matrix affine object

Cgaffinemakescale, creating a scaled matrix affine object

Cgaffinemaketranslation, creating a moving matrix affine object

Cgaffinetransformrotate, rotating matrix affine objects

Cgaffinetransformscale, scaling a matrix affine object

Cgaffinetransformtranslate, moving a matrix affine object

CGCONTEXTCONCATCTM, connecting to the CTM transform

Using affine transform MYVIEW.M

#import "MyView.h" @implementation myview-(void) DrawRect: (cgrect) rect {    NSString *path = [[NSBundle Mainbundle] pathforresource:@ "cat" oftype:@ "jpg"];    UIImage *img = [UIImage Imagewithcontentsoffile:path];    CGIMAGEREF image = img. Cgimage;    Cgcontextref context = Uigraphicsgetcurrentcontext ();    Cgcontextsavegstate (context);        Cgaffinetransform myaffine = cgaffinetransformmakerotation (M_PI);     Myaffine = Cgaffinetransformtranslate (Myaffine,-img.size.width,-img.size.height);     CGCONTEXTCONCATCTM (context, myaffine);        CGCONTEXTROTATECTM (context, M_PI);    CGCONTEXTTRANSLATECTM (context,-img.size.width,-img.size.height);        CGRect touchrect = CGRectMake (0, 0, img.size.width, img.size.height);    Cgcontextdrawimage (context, touchrect, image);      Cgcontextrestoregstate (context);} @end

14.6 Image Picker

Image Picker can help you pick a picture from a picture library, or you can capture a picture of a camera.

PhotoViewViewController.h

Start:code. Photoviewcontroller.h@interface photoviewviewcontroller:uiviewcontroller<uiimagepickercontrollerdelegate> {    Uiimageview *imageview;    Uiimagepickercontroller *imagepicker;} @property (nonatomic, retain) iboutlet Uiimageview *imageview; @property (nonatomic, retain) iboutlet Uiimagepickercontroller *imagepicker; @end//end:code. PhotoViewController.h

The Uiimagepickercontrollerdelegate protocol needs to be implemented.

The Uiimagepickercontroller controller member variable needs to be defined.

Photoviewviewcontroller.m

#import "PhotoViewViewController.h" @implementation photoviewviewcontroller@synthesize ImageView; @synthesize Imagepicker;//start:code. photoviewcontroller.touchesended:withevent:-(void) touchesended: (Nsset *) touches withevent: (UIEvent *) event {    if ([[Touches Anyobject] tapcount] > 1) {        //Bring up image grabber        if ([Uiimagepickercontroller Issourcetypeavailable:            Uiimagepickercontrollersourcetypecamera]) {            Self.imagePicker.sourceType = Uiimagepickercontrollersourcetypecamera;        } else {            Self.imagePicker.sourceType =            uiimagepickercontrollersourcetypephotolibrary;        }        self.imagePicker.allowsImageEditing = YES; IOS 3 before        self.imagePicker.allowsEditing = YES;                 [Self PresentModalViewController:self.imagePicker animated:yes];}     } End:code. PhotoViewController.touchesEnded:withEvent:

The sourcetype properties of the image picker are:

Uiimagepickercontrollersourcetypephotolibrary, photo from "photo album"

Uiimagepickercontrollersourcetypecamera, from the camera

Uiimagepickercontrollersourcetypesavedphotosalbum, from the "Camera roll".

Photoviewviewcontroller.m

Start:code. photoviewcontroller.didfinish-(void) Imagepickercontroller: (Uiimagepickercontroller *) Pickerdidfinishpickingmediawithinfo: (nsdictionary *) Info {    Imageview.image = [Info objectforkey: Uiimagepickercontrollereditedimage];     [Self dismissmodalviewcontrolleranimated:yes]; }//end:code. Photoviewcontroller.didfinish//start:code. photoviewcontroller.didcancel-(void) Imagepickercontrollerdidcancel: (Uiimagepickercontroller *) Picker {    [ Self.imagepicker Dismissmodalviewcontrolleranimated:yes];} End:code. photoviewcontroller.didcancel-(void) dealloc {    Self.imageview = nil;    Self.imagepicker = nil;    [Super Dealloc];}

Imagepickercontroller:didfinishpickingmediawithinfo: The delegate implementation method is called when the selection is complete.

Imageview.image = [info objectforkey:uiimagepickercontrollereditedimage]; The statement can get an image object from the picture picker.

Imagepickercontrollerdidcancel: is a delegate implementation method called when a click is canceled.

Drawing details (go to pick)