iOS 使用UIBezierPath类实现随手画画板

这篇文章介绍一下如何通过这个类实现一个简单的随手画画板的简单程序demo,功能包括:划线(可以调整线条粗细,颜色),撤销笔画,回撤笔画,清除画布,橡皮擦。当然也可以扩展其他的功能。

一、首先看看实现划线部分的关键代码吧!


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

- (void) drawRect: (CGRect) rect

{

    //绘制图片

    int width = self.pickedImage.size.width;

    int height = self.pickedImage.size.height;

    CGRect rectForImage = CGRectMake(0,0, width, height);

    [self.pickedImage drawInRect:rectForImage];

    

    if (self.arrayStrokes)

    {

        int arraynum = 0;

        // each iteration draw a stroke

        // line segments within a single stroke (path) has the same color and line width

        for (NSDictionary *dictStroke in self.arrayStrokes)

        {

            NSArray *arrayPointsInstroke = [dictStroke objectForKey:@"points"];

            UIColor *color = [dictStroke objectForKey:@"color"];

            float size = [[dictStroke objectForKey:@"size"] floatValue];

            [color set];        // Sets the color of subsequent stroke and fill operations to the color that the receiver represents.

            

            // draw the stroke, line by line, with rounded joints

            UIBezierPath* pathLines = [UIBezierPath bezierPath];

            CGPoint pointStart = CGPointFromString([arrayPointsInstroke objectAtIndex:0]);

            [pathLines moveToPoint:pointStart];

            for (int i = 0; i < (arrayPointsInstroke.count - 1); i++)

            {

                CGPoint pointNext = CGPointFromString([arrayPointsInstroke objectAtIndex:i+1]);

                [pathLines addLineToPoint:pointNext];

            }

            pathLines.lineWidth = size;

            pathLines.lineJoinStyle = kCGLineJoinRound; //拐角的处理

            pathLines.lineCapStyle = kCGLineCapRound; //最后点的处理

            [pathLines stroke];

            

            arraynum++;//统计笔画数量

        }

    }

}


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

// Start new dictionary for each touch, with points and color

- (void) touchesBegan:(NSSet *) touches withEvent:(UIEvent *) event

{

    

    NSMutableArray *arrayPointsInStroke = [NSMutableArray array]; //点数组,相当于一个笔画

    

    NSMutableDictionary *dictStroke = [NSMutableDictionary dictionary];

    

    [dictStroke setObject:arrayPointsInStroke forKey:@"points"];

    [dictStroke setObject:self.currentColor forKey:@"color"];

    [dictStroke setObject:[NSNumber numberWithFloat:self.currentSize] forKey:@"size"];

    

    CGPoint point = [[touches anyObject] locationInView:self];

    [arrayPointsInStroke addObject:NSStringFromCGPoint(point)];

    

    [self.arrayStrokes addObject:dictStroke];//添加的是一个字典:点数组,颜色,粗细

}

// Add each point to points array

- (void) touchesMoved:(NSSet *) touches withEvent:(UIEvent *) event

{

    CGPoint point = [[touches anyObject] locationInView:self];

    

    CGPoint prevPoint = [[touches anyObject] previousLocationInView:self];

    

    NSMutableArray *arrayPointsInStroke = [[self.arrayStrokes lastObject] objectForKey:@"points"];

    

    [arrayPointsInStroke addObject:NSStringFromCGPoint(point)];

    

    

    CGRect rectToRedraw = CGRectMake(\

                                     ((prevPoint.x>point.x)?point.x:prevPoint.x)-currentSize,\

                                     ((prevPoint.y>point.y)?point.y:prevPoint.y)-currentSize,\

                                     fabs(point.x-prevPoint.x)+2*currentSize,\

                                     fabs(point.y-prevPoint.y)+2*currentSize\

                                     );

    //Marks the specified rectangle of the receiver as needing to be redrawn.

    //在指定的rect范围进行重绘

    [self setNeedsDisplayInRect:rectToRedraw];

    //  [self setNeedsDisplay];

}

这里简单的说明介绍吧!

1、使用一个数组 arrayStrokes(称之为笔画数组) 来记录整一幅画,这个数组中保存的是一个个的字典,而这些字典就是这幅画中的每一笔画(而且是有顺序的),字典中有三项内容:包括笔画的size,color还有一个数组arrayPointsInStroke,注意:这个数组保存的touch  begin和move过程中经过的点的坐标(这些点统统用直线连接起来,就可以形成一个笔画了。当然,这个数组中是保存了好多个点的!所以连接起来笔画还是很逼真的!)。

2、那么在绘制的时候,就要用到 arrayStrokes 这个关键的数组了,从里面拿出每一个字典(一个字典就是代表一个笔画),根据字典中笔画的size,color和笔画所经过的点坐标,那么让UIBezierPath这个类来完成笔画的绘制就很简单了。

这样应该可以理解吧!

二、笔画的撤销和回撤的实现

我们知道每一个笔画都是通过一个字典来保存的,那么我们在画线的过程中对笔画的撤销和回撤那也就很简单了吧!

我们可以使用另一个数组 arrayAbandonedStrokes (称之为废弃数组)来保存我们所撤销的笔画,而撤销,肯定是我们所有笔画中的最后一划,所以我们在arrayAbandonedStrokes 废弃数组保存 arrayStrokes 笔画数组中的最后一个元素,同时将 arrayStrokes 笔画数组中的最后一个元素删除。这样就可以实现笔画的撤销。

反之,就是实现回撤了。即将废弃数组中的最后一个元素添加到笔画数组中,同时将废弃数组中的最后一个元素删除。

实现的代码如下:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

//撤销

-(IBAction) undo {

    if ([arrayStrokes count]>0) {

        NSMutableDictionary* dictAbandonedStroke = [arrayStrokes lastObject];

        [self.arrayAbandonedStrokes addObject:dictAbandonedStroke];

        [self.arrayStrokes removeLastObject];

        [self setNeedsDisplay];

    }

}

//回撤

-(IBAction) redo {

    if ([arrayAbandonedStrokes count]>0) {

        NSMutableDictionary* dictReusedStroke = [arrayAbandonedStrokes lastObject];

        [self.arrayStrokes addObject:dictReusedStroke];

        [self.arrayAbandonedStrokes removeLastObject];

        [self setNeedsDisplay];

    }

}

三、清楚画布的功能实现


1

2

3

4

5

6

7

//清除画布

-(IBAction) clearCanvas {

    self.pickedImage = nil;

    [self.arrayStrokes removeAllObjects];

    [self.arrayAbandonedStrokes removeAllObjects];

    [self setNeedsDisplay];

}

四、笔画颜色的选择

这里的处理是用到一个弹出框,点击可以选择颜色。

下面讲一下如何实现这个颜色选择器。其中参考自:点击打开链接

实现原理:弹出框中显示的是一张图片,我们通过一个函数处理,获取到这个图片的所有像素点的透明度和RGB(每一个值占1Byte)数据(是一个数组),然后通过点击获取到点的坐标,就可以获取到这个像素点的透明度和RGB值了。

实现的有关代码如下:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

- (void) touchesEnded:(NSSet*)touches withEvent:(UIEvent*)event {

    UITouch* touch = [touches anyObject];

    CGPoint point = [touch locationInView:self.imgView]; //where image was tapped

    lastColor = [self getPixelColorAtLocation:point];

    [pickedColorDelegate pickedColor:(UIColor*)lastColor];

}

// Please refer to iOS Developer Library for more details regarding the following two methods

- (UIColor*) getPixelColorAtLocation:(CGPoint)point {

    UIColor* color = nil;

    CGImageRef inImage = self.imgView.image.CGImage;

    // Create off screen bitmap context to draw the image into. Format ARGB is 4 bytes for each pixel: Alpa, Red, Green, Blue

    

    CGContextRef contexRef = [self createARGBBitmapContext:inImage];

    if (contexRef == NULL) { return nil; /* error */ }

    

    size_t w = CGImageGetWidth(inImage);        // problem!

    size_t h = CGImageGetHeight(inImage);

    CGRect rect = {{0,0},{w,h}};

    

    // Draw the image to the bitmap context. Once we draw, the memory

    // allocated for the context for rendering will then contain the

    // raw image data in the specified color space.

    CGContextDrawImage(contexRef, rect, inImage);

    

    // Now we can get a pointer to the image data associated with the bitmap

    // context.

    unsigned char* data = CGBitmapContextGetData (contexRef);

    if (data != NULL) {

        //offset locates the pixel in the data from x,y.

        //4 for 4 bytes of data per pixel, w is width of one row of data.

        int offset = 4*((w*round(point.y))+round(point.x)); //这是一个二维数组,offset是确定数组下标

        int alpha =  data[offset];

        int red = data[offset+1];

        int green = data[offset+2];

        int blue = data[offset+3];

        NSLog(@"offset: %i colors: RGB A %i %i %i  %i",offset,red,green,blue,alpha);

        color = [UIColor colorWithRed:(red/255.0f) green:(green/255.0f) blue:(blue/255.0f) alpha:(alpha/255.0f)];

    }

    

    // When finished, release the context

    CGContextRelease(contexRef);

    // Free image data memory for the context

    if (data) { free(data); }

    

    return color;

}

- (CGContextRef)  createARGBBitmapContext:(CGImageRef) inImage {

    

    CGContextRef    context = NULL;

    CGColorSpaceRef colorSpace;

    void *          bitmapData;

    int             bitmapByteCount;

    int             bitmapBytesPerRow;

    

    // Get image width, height. We‘ll use the entire image.

    size_t pixelsWide = CGImageGetWidth(inImage);

    size_t pixelsHigh = CGImageGetHeight(inImage);

    

    // Declare the number of bytes per row. Each pixel in the bitmap in this

    // example is represented by 4 bytes; 8 bits each of red, green, blue, and

    // alpha.

    bitmapBytesPerRow   = (pixelsWide * 4);

    bitmapByteCount     = (bitmapBytesPerRow * pixelsHigh);

    

    // Use the generic RGB color space.

    //colorSpace = CGColorSpaceCreateWithName(kCGColorSpaceGenericRGB);  //deprecated

    colorSpace = CGColorSpaceCreateDeviceRGB();

    if (colorSpace == NULL)

    {

        fprintf(stderr, "Error allocating color space\n");

        return NULL;

    }

    

    // Allocate memory for image data. This is the destination in memory

    // where any drawing to the bitmap context will be rendered.

    bitmapData = malloc( bitmapByteCount );

    if (bitmapData == NULL)

    {

        fprintf (stderr, "Memory not allocated!");

        CGColorSpaceRelease( colorSpace );

        return NULL;

    }

    

    // Create the bitmap context. We want pre-multiplied ARGB, 8-bits

    // per component. Regardless of what the source image format is

    // (CMYK, Grayscale, and so on) it will be converted over to the format

    // specified here by CGBitmapContextCreate.

    context = CGBitmapContextCreate (bitmapData,

                                     pixelsWide,

                                     pixelsHigh,

                                     8,      // bits per component

                                     bitmapBytesPerRow,

                                     colorSpace,

                                     kCGImageAlphaPremultipliedFirst);

    if (context == NULL)

    {

        free (bitmapData);

        fprintf (stderr, "Context not created!");

    }

    

    // Make sure and release colorspace before returning

    CGColorSpaceRelease( colorSpace );

    

    return context;

}

时间: 2024-10-11 07:42:21

iOS 使用UIBezierPath类实现随手画画板的相关文章

iOS UIBezierPath类 介绍

使用UIBezierPath类可以创建基于矢量的路径,这个类在UIKit中.此类是Core Graphics框架关于path的一个封装.使用此类可以定义简单的形状,如椭圆或者矩形,或者有多个直线和曲线段组成的形状. 1.Bezier Path 基础 UIBezierPath对象是CGPathRef数据类型的封装.path如果是基于矢量形状的,都用直线和曲线段去创建.我们使用直线段去创建矩形和多边形,使用曲线段去创建弧(arc),圆或者其他复杂的曲线形状.每一段都包括一个或者多个点,绘图命令定义如

iOS动画之iOS UIBezierPath类 介绍

感谢:http://blog.csdn.net/crayondeng/article/details/11093689 使用UIBezierPath类可以创建基于矢量的路径,这个类在UIKit中.此类是Core Graphics框架关于path的一个封装.使用此类可以定义简单的形状,如椭圆或者矩形,或者有多个直线和曲线段组成的形状. 1.Bezier Path 基础 UIBezierPath对象是CGPathRef数据类型的封装.path如果是基于矢量形状的,都用直线和曲线段去创建.我们使用直线

iOS 使用UIBezierPath和CAShapeLayer画各种图形

CAShapeLayer 是 CALayer 的子类,但是比 CALayer 更灵活,可以画出各种图形,当然,你也可以使用其他方式来画,随你. 杂谈 在 CAShapeLayer 中,也可以像 CALayer 一样指定它的 frame 来画,就像这样: let layer = CAShapeLayer() layer.frame = CGRectMake(110, 100, 150, 100) layer.backgroundColor = UIColor.blackColor().CGColo

iOS开发-高级UI-小应用画画板

画画板1.搭建界面(3个按钮,1个View) 2.为重写touchesBegan:等方法,需要自定义一个View,新建一个View,名为NJView,然后在故事板将这个View的Class设置为NJView 3.在NJView.m中重写方法 //开始触摸-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ //1.获取手指对应UITouch对象 UITouch *touch = [touches anyObject]:

(素材源码)猫猫学IOS(三十四)UI之Quartz2D画画板的实现

猫猫分享,必须精品 原创文章,欢迎转载.转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243?viewmode=contents 源码:http://download.csdn.net/detail/u013357243/8666923 效果: 代码: NYView NYView.h // // NYView.h // 画画板 // // Created by apple on 15-5-6. // Copyright (c) 2015年 znycat.

iOS quartzCore第五章——CAShapeLayer画各种图形 结合UIBezierPath

CAShapeLayer 是 CALayer 的子类,但是比 CALayer 更灵活,可以画出各种图形,当然,你也可以使用其他方式来画,随你. 首先CAShapeLayer 自身有path ,fillColor ,fillRule ,strokeColor ,strokeStart , strokeEnd , lineWidth(线宽,用点表示单位) ,miterLimit ,lineCap(线条结尾的样子) , lineJoin(线条之间的结合点的样子), lineDashPhase 和lin

猫猫学IOS(三十四)UI之Quartz2D画画板的实现

猫猫分享,必须精品 原创文章,欢迎转载.转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243?viewmode=contents 源码:http://blog.csdn.net/u013357243/article/details/45533403 效果: 实现过程: 首先用storyboard搭建界面,没有什么好说的. 然后就是注意的功能了,这里用了触摸事件来搭配Quartz2D的路径来画画. 思路就是把路径放到数组中 @property (nonat

iOS_24_画画板(含取色板)

终于效果例如以下: 一.简单说明 1.使用一个数组 strokesArr(笔画数组)记录全部笔画.数组中保存的是一个个的笔画字典,一个字典就是一个笔画.笔画字典中有三项:笔画的大小.颜色.pointsArrInOneStroke数组,(保存的是touch begin时的落笔点和touch move过程中经过的点) 2.绘制的时候,从strokesArr(笔画数组)里取出每个字典(一个字典就是一个笔画).依据字典中笔画的大小.颜色.笔画所经过的点坐标(pointsArrInOneStroke数组)

iOS_24_画画板

最终效果如下: 一.简单说明 1.使用一个数组 strokesArr(笔画数组)记录所有笔画,数组中保存的是一个个的笔画字典,一个字典就是一个笔画,笔画字典中有三项:笔画的大小.颜色.pointsArrInOneStroke数组,(保存的是touch begin时的落笔点和touch move过程中经过的点) 2.绘制的时候,从strokesArr(笔画数组)里取出每一个字典(一个字典就是一个笔画),根据字典中笔画的大小.颜色.笔画所经过的点坐标(pointsArrInOneStroke数组),