Simple use of UI advanced--quartz2d and Touch events: Simple Doodle Board

Requirements: To achieve a simple graffiti board application, using the mouse to drag in the graffiti board can be doodle, click on the Save button, you can save the completed graffiti, click the fallback button can back to a step, click to empty can let the Doodle board empty.

Implementation steps:

1, layout storyboard, wiring buttons and graffiti board;

2, listen to touch events, mainly for Touchesbegan: and touchesmoved:;

3, get the moving path and add to the Uibezierpath object;

4, rendering;

Sample file Structure:

Specific implementation code:

1 //2 //Scrawl.h3 //1-04-scrawl4 //5 //Created by Xiaomoge on 15/1/4.6 //Copyright (c) 2015 Xiaomoge. All rights reserved.7 //8 9 #import<UIKit/UIKit.h>Ten  One @interfaceScrawl:uiview A /* - the width of the graffiti line -  */ the @property (nonatomic,assign) cgfloat linswidth; - /* -  Fallback -  */ +- (void) back; - /* + Clear Screen A  */ at- (void) Clear; - @end

1 //2 //SCRAWL.M3 //1-04-scrawl4 //5 //Created by Xiaomoge on 15/1/4.6 //Copyright (c) 2015 Xiaomoge. All rights reserved.7 //8 9 #import "Scrawl.h"Ten @interfacescrawl () One /* A an array of paths that store all lines -  */ -@property (nonatomic,strong) Nsmutablearray *Linspath; the @end - @implementationscrawl - #pragmaMark-Lazy Loading --(Nsmutablearray *) Linspath { +     if(!_linspath) { -_linspath =[Nsmutablearray array]; +     } A     return_linspath; at } -- (void) DrawRect: (cgrect) rect { -     //gets the total number in the current array -Nsinteger count =Self.linsPath.count; -      for(Nsinteger i =0; I < count; i + +) { -         //gets a Path object inUibezierpath *path =Self.linspath[i]; -         //Set line width toPath.linewidth =Self.linswidth; +         //set the end style of a line -Path.linecapstyle =Kcglinecapround; the         //set the connection style of a line *Path.linejoinstyle =Kcglinejoinround; $         //RenderingPanax Notoginseng [path stroke]; -     } the } + //Start Touch Event A- (void) Touchesbegan: (Nsset *) touches withevent: (Uievent *)Event { the     //gets the position of the current touch point +Uitouch *touch =[touches anyobject]; -Cgpoint point =[Touch LocationInView:touch.view]; $     //Create a Path object, note that this is [Uibezierpath Bezierpath] $Uibezierpath *path =[Uibezierpath Bezierpath]; -     //to create the start position of the path object - [path movetopoint:point]; the     //in an array of paths added to the line - [Self.linspath Addobject:path];Wuyi } the //Mobile Touch Events -- (void) touchesmoved: (Nsset *) touches withevent: (Uievent *)Event { Wu     //gets the position of the current touch point -Uitouch *touch =[touches anyobject]; AboutCgpoint point =[Touch LocationInView:touch.view]; $     //creates a path object that is the current point of the line's paths -Uibezierpath *path =[Self.linspath Lastobject]; -     //set the end point of the Path object - [path addlinetopoint:point]; A     //Redraw + [self setneedsdisplay]; the } - //Fallback Events $- (void) Back { the     //Fallback is actually the last line to clear the [Self.linspath Removelastobject]; the     //then redraw the [self setneedsdisplay]; - } in- (void) Clear { the     //the fallback is actually to get rid of all the lines. the [Self.linspath removeallobjects]; About     //then redraw the [self setneedsdisplay]; the } the @end

1 //2 //VIEWCONTROLLER.M3 //1-04-scrawl4 //5 //Created by Xiaomoge on 15/1/4.6 //Copyright (c) 2015 Xiaomoge. All rights reserved.7 //8 9 #import "ViewController.h"Ten #import "Scrawl.h" One @interfaceViewcontroller () A@property (Weak, nonatomic) iboutlet scrawl *Scrawlview; -  - @end the  - @implementationViewcontroller -  -- (void) Viewdidload { + [Super Viewdidload]; -Self.scrawlView.linsWidth =3; + } A-(ibaction) Backclick { at [Self.scrawlview back]; - } --(ibaction) Clearclick { - [Self.scrawlview clear]; - } --(ibaction) Saveclick { in     //Open Bitmap Context - Uigraphicsbeginimagecontext (self.scrawlView.frame.size); to     //Rendering + [Self.scrawlView.layer Renderincontext:uigraphicsgetcurrentcontext ()]; -     //gets the picture in the current bitmap context theUIImage *img =Uigraphicsgetimagefromcurrentimagecontext (); *     //end edit of bitmap context $ Uigraphicsendimagecontext ();Panax Notoginseng     //Convert the picture to NSData -NSData *data =uiimagepngrepresentation (IMG); the     //Save +[Data writetofile:@"/users/xiaobao/desktop/scrawl.png"Atomically:yes]; A     //Note that you can actually extract this saved image as a method and then call it.  the } + @end

The final effect (click the Save button to save the entire doodle Board):

Simple use of UI advanced--quartz2d and Touch events: Simple Doodle Board