[Tutorial] Drawing to the screen.

sai · Apr 15, 2012

Guys
it looks like the original project file link is no longer working. Can someone post the link to the original or your project?

sai · Apr 15, 2012

Can you post your project with the source code? Thanks ...

Incyc said: ↑

Hi, I am doing this as a learning experience. I got the code working but I wanted to add more stroke colors. My code begins with a default stroke in UIColor greenColor, but I have two buttons labeled "Red" and "Blue" that should change the stroke color to Red or Blue. I can't get it to change stroke colors when I press the buttons. I've confirmed my UIButtons are linked up correctly. Any help is appreciated, thanks!

DrawView.h:

Code:

#import <UIKit/UIKit.h>
 
@interface DrawView : UIImageView
- (void)chooseColor:(NSString *)color;
@end

DrawView.m:

Code:

#import "DrawView.h"
 
@interface DrawView()
@property (nonatomic, strong) UIColor *strokeColor;
@end
 
@implementation DrawView
 
BOOL fingerMoved;
CGPoint lastPoint;
 
@synthesize strokeColor = _strokeColor;
 
- (UIColor *)strokeColor
{
    if (!_strokeColor) {
        _strokeColor = [UIColor greenColor];
    }
    return _strokeColor;
}
 
- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
    }
    return self;
}
 
- (void)chooseColor:(NSString *)color
{
    if ([color isEqualToString:@"Red"]) {
        self.strokeColor = [UIColor redColor];
    }else if ([color isEqualToString:@"Blue"]) {
        self.strokeColor = [UIColor blueColor];
    }
}
 
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    fingerMoved = NO;
    UITouch *touch = [touches anyObject];
    if ([touch tapCount] == 2) {
        self.image = nil;
        return;
    }
    lastPoint = [touch locationInView:self];
    lastPoint.y -= 20;
}
 
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    fingerMoved = YES;
    UITouch *touch = [touches anyObject];
    CGPoint currentPoint = [touch locationInView:self];
    currentPoint.y -= 20;
 
    UIGraphicsBeginImageContext(self.frame.size);
    [self.image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
    CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
    CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 5.0);
    [self.strokeColor setStroke];
    CGContextMoveToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
    CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), currentPoint.x, currentPoint.y);
    CGContextStrokePath(UIGraphicsGetCurrentContext());
    self.image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    lastPoint = currentPoint;
}
 
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    if ([touch tapCount] == 2) {
        self.image = nil;
        return;
    }
 
    if (!fingerMoved) {
        UIGraphicsBeginImageContext(self.frame.size);
        [self.image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
        CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
        CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 5.0);
        [self.strokeColor setStroke];
        CGContextMoveToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
        CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
        CGContextStrokePath(UIGraphicsGetCurrentContext());
        self.image = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
    }
}
 
/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
    // Drawing code
}
*/
 
@end

DrawViewController.h:

Code:

#import <UIKit/UIKit.h>
 
@interface DrawViewController : UIViewController
@end

DrawViewController.m:

Code:

#import "DrawViewController.h"
#import "DrawView.h"
 
@interface DrawViewController()
@property (nonatomic, strong) IBOutlet DrawView *drawView;
@end
 
@implementation DrawViewController
 
@synthesize drawView = _drawView;
 
- (IBAction)changeColor:(UIButton *)sender
{
    NSString *color = [sender currentTitle];
    [self.drawView chooseColor:color];
}
 
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return YES;
}
 
@end

Thanks!

JackSilver · Jun 4, 2012

Hi SkylarEC.
I've been asked to develop a app with signature capture.
Your tutorial is a great starting point for my weak iOS experience.
Somehow I could not download the test_draw_app.zip from touchrepo.com.
Have you made available elsewhere? It would help me greatly.

Thanks"

sai · Jun 4, 2012

what s your email and i can email you the project ... i have a different version of this but it will get you going ...

ivanstojkovic · Jun 8, 2012

Hi,

great tutorial!
Can you send me the source for the project too?
ivan AT thestojkovic.com

jbeuzelin · Jun 25, 2012

Hi;

Can you send me the source for the project too?
jbeuzelin@hotmail.fr
thanks very much

pineapple juice · Jun 25, 2012

Please stop bumping this thread, if you want to draw on you iDevice's screen, get iWhiteboard from Cydia.

lauNchD · Jun 29, 2012

pineapple juice said: ↑

Please stop bumping this thread, if you want to draw on you iDevice's screen, get iWhiteboard from Cydia.

Even though I'm also annoyed by the constant bumping, I think your missing the point: this is the developers' section and most people here want to incorporate that functionality into their own apps.

djEnter · Jul 6, 2012

Hi, can you send me the source code of project? My email address is djenter@centrum.sk. Thanks

Cameron E · Aug 12, 2012

Thank you for this, very helpful!
I have a slight problem that I was wondering if you might know the answer to.
I subclassed UIScrollView and inserted a large image.
I placed another image on top of it with the same frame dimensions.
When the user draws, it updates the UIImage on top so it appears as though they are drawing on the image underneath.
Everything works, I have figured out how to composite the two together and save the new image...
There is a slight bug...
Only sometimes when the user draws, each time they make a new line the previous lines slowly shift and streach upward. It only happens with certain frame sizes.
Is this an issue either you or anyone else on here has seen and dealt with before?

Log in or Sign up

[Tutorial] Drawing to the screen.

sai New Member

sai New Member

JackSilver New Member

sai New Member

ivanstojkovic New Member

jbeuzelin New Member

pineapple juice Well-Known Member

lauNchD Well-Known Member

djEnter New Member

Cameron E New Member

Log in or Sign up

[Tutorial] Drawing to the screen.

sai New Member

sai New Member

JackSilver New Member

sai New Member

ivanstojkovic New Member

jbeuzelin New Member

pineapple juice Well-Known Member

lauNchD Well-Known Member

djEnter New Member

Cameron E New Member

Useful Searches