Implement a simple artboard app in iOS

In this essay, we want to implement a simple artboard app for the iphone, similar to a panel that writes in handwriting. However, our artboard supports the selection of brush colors.

The first thing to point out is that this demo uses Quarzcore for painting, not OpenGL. Both can achieve similar functionality, except that OpenGL is faster, but Quarzcore is simpler. The first step, new Xcode project, the project name is called Simplepaint.  The second step is to add quarzcore.framework to the project. The third step is to create a new class called Line. It represents the line when painting on the iphone's screen. Because whether you draw a line or a curve, it can be seen as a number of short lines connected together. So what are the attributes of line? The simple point is the start and end points of the line, and the color of the line. So, open the line class that you just created, modify Line.h: And then modify LINE.M: Fourth, Next, create another class, the class name is called Colorpiker. It represents a color picker, and we can paint by clicking one of the colors in the color of the brush. The following is the code for COLORPIKER.H: Acolorpikerisselected is a delegate, and when the current selector is selected, it can pass the color value of the currently selected color selector to the class that implements the delegate. In our demo, we'll let the artboard view implement this delegate. Implement COLORPIKER.M: Fifth, we'll create our artboard view, which represents the part of the active area where you can draw. Creating a new class is called Touchdrawview. Modify the contents of the TouchDrawView.h: just mentioned above, we draw the main idea is to put a number of short-term links together, you can become a trajectory. So our artboard has an array whose item is the line type, which is the set of all the line that slides through the track. We also have a separate line object that represents the current drawing in the drawing process. There is also a color-type property that represents the color of the line, which is used to hold the color value passed by the Colorpiker. Implement TOUCHDRAWVIEW.M

1 //2 //touchdrawview.m3 //Caplesscoderpaint4 //5 //Created by backslash112 on 14/10/29.6 //Copyright (c) 2014 backslash112. All rights reserved.7 //8 9 #import "TouchDrawView.h"Ten #import "Common.h" One  A @implementationTouchdrawview - { - } the @synthesizeCurrentLine; - @synthesizelinescompleted; - @synthesizeDrawcolor; -  +- (ID) Initwithcoder: (Nscoder *) C - { +Self =[Super INITWITHCODER:C]; A     if(self) { atlinescompleted =[[Nsmutablearray alloc] init]; - [self setmultipletouchenabled:yes]; -          -Drawcolor =[Uicolor Blackcolor]; - [self becomefirstresponder]; -     } in     returnSelf ; - } to  + //It is a method of UIView called every time, the screen needs a redisplay or refresh. -- (void) DrawRect: (cgrect) Rect the { *Cgcontextref context =Uigraphicsgetcurrentcontext (); $Cgcontextsetlinewidth (Context,5.0);Panax Notoginseng Cgcontextsetlinecap (context, kcglinecapround); -[DrawcolorSet]; the      for(Line *lineinchlinescompleted) { +[[Line Color]Set]; A cgcontextmovetopoint (context, [line begin].x, [line begin].y); the cgcontextaddlinetopoint (context, [line end].x, [line end].y); + Cgcontextstrokepath (context); -     } $ } $  -- (void) Undo - { the     if([Self.undomanager CanUndo]) { - [Self.undomanager undo];Wuyi [self setneedsdisplay]; the     } - } Wu  -- (void) Touchesbegan: (Nsset *) touches withevent: (Uievent *)Event About { $ [Self.undomanager beginundogrouping]; -      for(Uitouch *tinchtouches) { -         //Create a line for the value -Cgpoint loc =[t locationinview:self]; ALine *newline =[[Line alloc] init]; + [NewLine Setbegin:loc]; the [NewLine Setend:loc]; - [NewLine Setcolor:drawcolor]; $CurrentLine =NewLine; the     } the } the  the- (void) AddLine: (line*) Line - { in [[Self.undomanager preparewithinvocationtarget:self] removeline:line]; the [linescompleted addobject:line]; the } About  the- (void) Removeline: (line*) Line the { the     if([linescompleted containsobject:line]) + [linescompleted removeobject:line]; - } the Bayi- (void) Removelinebyendpoint: (cgpoint) Point the { theNspredicate *predicate = [Nspredicate predicatewithblock:^bool (IDEvaluatedobject, Nsdictionary *bindings) { -Line *evaluatedline = (line*) Evaluatedobject; -         returnEvaluatedline.end.x = = Point.x && theEvaluatedline.end.y = =Point.y; the     }]; theNsarray *result =[linescompleted filteredarrayusingpredicate:predicate]; the     if(Result && result.count >0) { -[Linescompleted removeobject:result[0]]; the     } the } the 94- (void) touchesmoved: (Nsset *) touches withevent: (Uievent *)Event the { the      for(Uitouch *tinchtouches) { the [CurrentLine Setcolor:drawcolor];98Cgpoint loc =[t locationinview:self]; About [CurrentLine Setend:loc]; -         101         if(currentline) {102 [self addline:currentline];103         }104Line *newline =[[Line alloc] init]; the [NewLine Setbegin:loc];106 [NewLine Setend:loc];107 [NewLine Setcolor:drawcolor];108CurrentLine =NewLine;109     } the [self setneedsdisplay];111 } the 113- (void) Endtouches: (Nsset *) Touches the { the [self setneedsdisplay]; the }117 118- (void) touchesended: (Nsset *) touches withevent: (Uievent *)Event119 { - [self endtouches:touches];121 [Self.undomanager endundogrouping];122 }123 124- (void) touchescancelled: (Nsset *) touches withevent: (Uievent *)Event the {126 [self endtouches:touches];127 } - 129-(BOOL) Canbecomefirstresponder the {131     returnYES; the }133 134- (void) Didmovetowindow135 {136 [self becomefirstresponder];137 }138 139- (ID) initWithFrame: (CGRect) Frame $ {141Self =[Super Initwithframe:frame];142     if(self) {143         //Initialization Code144     }145     returnSelf ;146 }147 148 @end

This file contains the main logic that illustrates the role of the Main method:

-(ID) Initwithcoder: This method is called automatically when this view is created, so you don't have to implement it, and you need to implement it when you want to do something else at the time of initialization.

-(void) DrawRect: This method is called every time the screen needs to be re-displayed or refreshed.

-(void) Touchbegan: This method is called when your finger clicks to the screen.

-(void) TouchMove: When your finger starts to swipe on the screen after tapping the screen, it will be called.

-(void) Touchend: It will be called when your finger leaves after tapping the screen.

Also need to explain is, when each Touchmove method, add a new line to the array, in order to display in the canvas, you need to refresh the next page, call the [self Setneedsdisplay] method.   Basically the main logic is this, what's the difference? Of course it's ui!.   Sixth step, create a. xib file, called Touchdrawviewcontroller.xib. Add a view to the toolbox on the right, and then add multiple sub-view to the view, adding as many as you wish, because these are used as color selectors, and a few fewer are irrelevant. Then set these sub-view class to Colorpiker, and then set their background color, color value you arbitrarily, because the selected color selector will be the background color directly as a parameter.    We also need a canvas area, add a view, stretch it, and let it cover the entire empty area. Also change its class to Touchdrawview.    we are almost finished.   Seventh Step, add a View controller class for the UI you just added, and create a new class file named Touchdrawviewcontroller. Modifying the. h file for:  can see that it implements the Colorpikerdelegate delegate, and when Colorpiker is selected, the color value (the background color) is passed to the current class as the color of the brush.   Next connect UI and Viewcontroller. Open Touchdrawviewcontroller.xib and Touchdrawviewcontroller.h,ctrl+drop at the same time Each color block on the UI and canvas to TouchDrawViewController.h, when done TouchDrawViewController.h is:  implementation TOUCHDRAWVIEWCONTROLLER.M:   In the Viewdidload method, we take each colorpiker delegate as self, and then implement the Acolorpikerisselected method so that the color value can be passed over.   Finally, set Touchrawviewcontroller to Rootcontroller. Open the DELEGATE.M file, modify the Didfinishlaunchingwithoptions method to:  OK, run it!

Related source code: GitHub

Implement a simple artboard app in iOS