Create a simple canvas for iOS and a canvas for ios

Create a simple canvas for iOS and a canvas for ios

Make a simple canvas

As a beginner in iOS, after learning several simple controls (UILable, UITextField, UIButton) in the UI, you can create a simple graphic board demo, the following is the specific production process (under MRC). If you have any shortcomings, please kindly advise us 0.0.

1. Build the interface, which consists of UIButton and UITextField. The button at the bottom is a custom keyboard (inputView) of UITextField)

.

-(Void) viewDidLoad {

[Super viewDidLoad];

// Create menu button

UIButton * menuButton = [UIButton buttonWithType: UIButtonTypeSystem];

MenuButton. frame = CGRectMake (CGRectGetWidth (self. view. bounds)-80, 40, 60, 40 );

[MenuButton setTitle: @ "menu" forState: UIControlStateNormal];

[MenuButton addTarget: self action: @ selector (handleMenuButtonAction :) forControlEvents: UIControlEventTouchUpInside];

[Self. view addSubview: menuButton];

 

// Add textField, but do not want it to be displayed, so frame = CGRectZero

UITextField * textField = [[UITextField alloc] initWithFrame: CGRectZero];

TextField. tag= 123;

[Self. view addSubview: textField];

[TextField release];

 

UIView * inputView = [[UIView alloc] initWithFrame: CGRectMake (0, 0, CGRectGetWidth (self. view. bounds), 60)];

InputView. backgroundColor = [UIColor whiteColor];

TextField. inputView = inputView;

[InputView release];

NSArray * titles = @ [@ "", @ "clear", @ "color"];

CGFloat width = (CGRectGetWidth (self. view. bounds)-20*6)/5;

CGFloat height = width;

CGFloat originY = (60-height)/2;

CGFloat originX = 20;

For (int I = 0; I <titles. count; I ++ ){

UIButton * button = [UIButton buttonWithType: UIButtonTypeSystem];

Button. tag= 100 + I;

Button. frame = CGRectMake (originX + (width + origmake) * I, originY, width, height );

[Button setTitle: titles [I] forState: UIControlStateNormal];

Button. backgroundColor = [UIColor colorWithRed: arc4random () % 256/255. 0 green: arc4random () % 256/255. 0 blue: arc4random () % 256/255. 0 alpha: 0.6];

// Change the title Color to white.

[Button setTitleColor: [UIColor whiteColor] forState: UIControlStateNormal];

// Set the Corner radius of the button, half of the button bandwidth

Button. layer. cornerRadius = width/4.0;

Button. layer. masksToBounds = YES; // cut the view by the specified radius.

[Button addTarget: self action: @ selector (handleButtonAction :) forControlEvents: UIControlEventTouchUpInside];

[InputView addSubview: button];

}

}

// The following is the response method of the menu button.

-(Void) handleMenuButtonAction :( UIButton *) sender {

// Obtain textField

UITextField * textField = (UITextField *) [self. view viewWithTag: 123];

// Determine if textField is currently the first responder, revoke the first responder permission; otherwise, make it the first responder.

If (textField. isFirstResponder ){

[TextField resignFirstResponder];

} Else {

[TextField becomeFirstResponder]; // becomes the first responder.

}

}

 

2. Create a LineModel class that inherits NSObject to record lines.

# Import <Foundation/Foundation. h>

# Import <UIKit/UIKit. h>

// Used to record the three elements of a line (track path color width)

@ Interface LineModel: NSObject

@ Property (nonatomic, retain) UIBezierPath * path; // use the besell curve to record the touch track.

@ Property (nonatomic, retain) UIColor * color; // line color

@ Property (nonatomic, assign) CGFloat width; // line width

@ End

 

# Import "LineModel. h"

 

@ Implementation LineModel

-(Void) dealloc {

[_ Color release];

[_ Path release];

[Super dealloc];

}

@ End

 

3. Create a sub-class PaintView that inherits the UI View. The above LineModel is used to implement the graphic board.

@ Interface PaintView: UIView

@ Property (nonatomic, retain) NSMutableArray * allLines; // stores all line objects on the canvas.

@ Property (nonatomic, retain) UIColor * lineColor; // The current line color.

@ Property (nonatomic, assign) CGFloat lineWidth; // The width of the current line

-(Void) undoLastDrawing; // undo the last draw

-(Void) allClean; // clear the canvas.

@ End

 

# Import "PaintView. h"

# Import "LineModel. h"

@ Implementation PaintView

-(Void) dealloc {

[_ AllLines release];

[_ LineColor release];

[Super dealloc];

}

-(NSMutableArray *) allLines {

If (! _ AllLines ){

Self. allLines = [NSMutableArray array];

}

Return _ allLines;

}

-(Void) touchesBegan :( NSSet *) touches withEvent :( UIEvent *) event {

UITouch * aTouch = touches. anyObject;

CGPoint startPoint = [aTouch locationInView: self. superview];

// Create a beiser curve object and set the starting point of the curve.

UIBezierPath * bezierPath = [UIBezierPath bezierPath];

// Set the start point.

[BezierPath moveToPoint: startPoint];

// Create a line model object and save the three data of the current line

LineModel * line = [[LineModel alloc] init] autorelease];

Line. path = bezierPath;

Line. color = self. lineColor;

Line. width = self. lineWidth;

// Add to the array for use

[Self. allLines addObject: line];

}

-(Void) touchesMoved :( NSSet *) touches withEvent :( UIEvent *) event {

UITouch * aTouch = touches. anyObject;

CGPoint cuttentPoint = [aTouch locationInView: self. superview];

// Obtain the corresponding line model (the last object of the array corresponds to the curve currently being drawn during touch Movement)

LineModel * aLine = self. allLines. lastObject;

// Add a vertex to the touch track.

[ALine. path addLineToPoint: cuttentPoint];

[Self setNeedsDisplay]; // call this method to draw the interface of the Notification View. Once this method is called, the system automatically calls drawRect: Method to draw the interface.

}

-(Void) drawRect :( CGRect) rect {

For (LineModel * aLine in self. allLines ){

// Set the fill color

[ALine. color setStroke];

// Set the line width during painting

[ALine. path setLineWidth: aLine. width];

// Start to draw the curve

[ALine. path stroke];

}

}

-(Void) undoLastDrawing {

[Self. allLines removeLastObject];

[Self setNeedsDisplay]; // removes the last curve object from the array and redraws the interface.

}

-(Void) allClean {

[Self. allLines removeAllObjects];

[Self setNeedsDisplay]; // clear all curves.

}

@ End

4. Introduce PaintView into the View Controller to call the button method.

/// Rewrite loadView to use PaintView as the View Controller

 

-(Void) loadView {

 

PaintView * paintView = [[PaintView alloc] initWithFrame: [UIScreen mainScreen] bounds];

 

PaintView. backgroundColor = [UIColor whiteColor];

 

Self. view = paintView;

 

// Set the default width and color.

 

PaintView. lineWidth = 10;

 

PaintView. lineColor = [UIColor blackColor];

 

[PaintView release];

 

}

//// Implementation of each button.

 

 

-(Void) handleButtonAction :( UIButton *) sender {

 

PaintView * paintView = (PaintView *) self. view;

 

Switch (sender. tag ){

 

Case 100:

 

If (paintView. lineWidth> 2 ){

 

PaintView. lineWidth-= 1;

 

}

 

Break;

 

Case 101 :{

 

PaintView. lineWidth + = 1;

 

Break;

 

}

 

Case 102 :{

 

[PaintView undoLastDrawing];

 

Break;

 

}

 

Case 103 :{

 

[PaintView allClean];

 

Break;

 

}

 

Case 104 :{

 

Sender. backgroundColor = [UIColor colorWithRed: arc4random () % 256/255 .0 green: arc4random () % 256/255 .0 blue: arc4random () % 256/255 .0 alpha: 1];

 

// Set the paint brush color

 

PaintView. lineColor = sender. backgroundColor;

 

Break;

 

}

 

Default:

 

Break;

 

}

 

}

 

 

This simple graffiti version has been created, and there must be many shortcomings in it. Xiao Bo wrote a blog for the first time, but I am not familiar with it. Please give me some suggestions and I will continue to improve it. Thank you.