Cat learning iOS (34) UI quartz2d The implementation of drawing board

Cat Share, must boutique

Original articles, welcome reprint. Reprint Please specify: Sanayu's Blog
Address: http://blog.csdn.net/u013357243?viewmode=contents
Source: http://blog.csdn.net/u013357243/article/details/45533403

Effect:

Implementation process:

First use storyboard to build the interface, there is nothing to say.
Then is the function of attention, here with the touch of events to match the path of quartz2d to draw.
The idea is to put the path in the array

@property (nonatomicstrongNSMutableArray *paths;

Note here if you use the C language in this way

CGMutablePathRef path = CGPathCreateMutable();     NULL2020);     NULL100100);

The picture is not placed in the OC array, so the Uibezierpath is used to create a path object.

UIBezierPath *path = [UIBezierPath bezierPath];

Then you put the path in the array and render

Note: Just beginning I didn't call redraw method, then tragedy, nothing. Depressed long time.
Redraw:
Call the DrawRect method to return to the view

[self setNeedsDisplay];

Code implementation

Start Touch:

//Start Touch- (void) Touchesbegan: (Nsset *) touches withevent: (uievent *) event{//1. Get the finger corresponding to the Uitouch objectUitouch *touch = [touches anyobject];//2. Get the position of finger touch via Uitouch object    CgpointStartPoint = [Touch Locationinview:touch. View];//3. Create a path when the user's finger is pressedUibezierpath *path = [Uibezierpath Bezierpath];//3.1 Set the related properties of the path[Path Setlinejoinstyle:kcglinejoinround];    [Path Setlinecapstyle:kcglinecapround]; [Path Setlinewidth:Ten];//4. Set the starting point of the current path[Path Movetopoint:startpoint];//5. Add the path to the array[ Self. PathsAddobject:path];}

Move:

// 移动- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{    // 1.获取手指对应UITouch对象    UITouch *touch = [touches anyObject];    // 2.通过UITouch对象获取手指触摸的位置    CGPoint movePoint = [touch locationInView:touch.view];    // 3.取出当前的path    UIBezierPath *currentPaht = [self.paths lastObject];    // 4.设置当前路径的终点    [currentPaht addLineToPoint:movePoint];    // 6.调用drawRect方法重回视图    [self setNeedsDisplay];}

Fallback and clear Screen method:

- (void)clearView{    [self.paths removeAllObjects];    [self setNeedsDisplay];}- (void)backView{    [self.paths removeLastObject];    [self setNeedsDisplay];}

The line-drawing method is to iterate through the Uibezierpath object in the array to implement

// 画线- (void)drawRect:(CGRect)rect{    [[UIColor redColor] set];    // 边路数组绘制所有的线段    forself.paths) {        [path stroke];    }}

Cat learning iOS (34) UI quartz2d The implementation of drawing board