Calligraphy Drawing IOS Coregraphics

Question

I am looking to have something which is marked in red, as marker but don't know whether it can be done or not.

It looks like marking using a calligraphy pen.

Trying out the following code as answered by "Andrey", I get the following output with spaces while drawing.

Brush image can be found here used is

Making further changes to the code, I found still I am not able to get the expected result. Here I am trying to fill the path which exists between the current point and the next point.

- (void)drawRect:(CGRect)rect
{
    // Drawing code


    CGFloat w=5.0;
    CGFloat h=2.0;
    CGContextRef context=UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);

    for(int i=0;i<self.positions.count;i++){
        CGPoint point=[[self.positions objectAtIndex:i] CGPointValue];

        CGFloat x=point.x-(w/2.0);
        CGFloat y=point.y-(h/2.0);
        CGContextFillRect(context, CGRectMake(x, y, w, h));
        if(i+1<self.positions.count){
            CGPoint nextPoint=[[self.positions objectAtIndex:(i+1)] CGPointValue];
            CGMutablePathRef myPath=CGPathCreateMutable();
            CGPathMoveToPoint(myPath, NULL, x, y);
            CGFloat x1=nextPoint.x-(w/2.0);
            CGFloat y1=nextPoint.y-(h/2.0);

            CGPathAddLineToPoint(myPath, NULL, x1, y1);
            CGPathAddLineToPoint(myPath, NULL, w, y1);
            CGPathAddLineToPoint(myPath, NULL, w, y);
            CGPathCloseSubpath(myPath);
            CGContextFillPath(context);
        }
    }
}

Answer 1

Those picture can be done via drawing an image in UIView subclass with overridden drawRect: message. You also need to add some kind of touch handler for catching touches. So here is some code:

@interface DrawingView ()

@property (nonatomic, strong) NSMutableArray *positions;

@end

@implementation DrawingView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self awakeFromNib];
    }
    return self;
}

- (void)awakeFromNib
{
    self.positions = [[NSMutableArray alloc] init];
}

- (void)drawRect:(CGRect)rect
{
    [super drawRect:rect];

    UIImage *brushImage = [UIImage imageNamed:@"brush.png"];
    for (NSValue *object in self.positions) {
        CGPoint point = [object CGPointValue];
        [brushImage drawAtPoint:CGPointMake(point.x - brushImage.size.width / 2.0, point.y - brushImage.size.height / 2.0)];
    }
}

- (void)addPoint:(CGPoint)point
{
    [self.positions addObject:[NSValue valueWithCGPoint:point]];

    [self setNeedsDisplay];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    [self addPoint:[touch locationInView:self]];
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    [self addPoint:[touch locationInView:self]];
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    [self addPoint:[touch locationInView:self]];
}

@end

You only need to create a proper brush.png and place those view anywhere you want.