iPhoneお絵描きブラシ階段

今回は、簡単なお絵描きアプリサンプルの作成方法。指で線を書くと、そこにカラフルな階段がでてくるブラシで遊ぶiPhoneアプリを書いてみます。


動作イメージ
XcodeからiOS6 iPhone Simulatorで動かすとこんな感じになります。

ポイント
touchesBeganでタッチを開始した場所を記憶して、touchesEndedで開始点から離した点までの線に合わせた階段を表示するようにしています。x方向の幅は、開始点のX位置から終了点のX位置の差分を10分割して、10段になるようにしました。

サンプルコード

#import “ViewController.h”

#import <QuartzCore/QuartzCore.h>

#define UIColorHex(rgbValue) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]

@interface ViewController () {

    CGPoint start, end;

    CAShapeLayer *sl;

    UIBezierPath *path;

}

@end

@implementation ViewController

– (void)viewDidLoad

{

    [super viewDidLoad];

    self.view.backgroundColor = [UIColor whiteColor];

    [self createClearButton];

}

– (void)createClearButton

{

    UILabel *clear = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, 50, 50)];

    clear.font = [UIFont boldSystemFontOfSize:50];

    clear.text = @”C”;

    clear.textColor = [UIColor whiteColor];

    clear.textAlignment = 1;

    clear.layer.cornerRadius = 25;

    clear.backgroundColor = [self randomcolor];

    [self.view addSubview:clear];

    

    clear.userInteractionEnabled = YES;

    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(clear)];

    [clear addGestureRecognizer:tap];

}

– (void)clear

{

    for (UIView *v in self.view.subviews) {

        [v removeFromSuperview];

    }

    

    [self createClearButton];

}

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

{

    start = [[touches anyObject] locationInView:self.view];

    sl = [[CAShapeLayer alloc] init];

    sl.strokeColor = [UIColor lightGrayColor].CGColor;

    sl.fillColor = [UIColor clearColor].CGColor;

    sl.lineWidth = 2;

    [self.view.layer addSublayer:sl];

}

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

{

    CGPoint p = [[touches anyObject] locationInView:self.view];

    

    path = [UIBezierPath bezierPath];

    [path moveToPoint:start];

    [path addLineToPoint:p];

    sl.path = path.CGPath;

}

– (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event

{

    end = [[touches anyObject] locationInView:self.view];

    [sl removeFromSuperlayer];

    sl = nil;

    path = nil;

    

    [self createStairs];

}

– (void)createStairs

{

    float w = (end.xstart.x) / 10.0;

    float h = (end.ystart.y) / 10.0;

    

    for (int i=0; i<10; i++) {

        UIView *step = [[UIView alloc] initWithFrame:CGRectMake(start.x + w*i, start.y, w, h*(i + 1))];

        step.backgroundColor = [self randomcolor];

        [self.view addSubview:step];

    }

}

– (UIColor*)randomcolor

{

    int i = arc4random() % 5;

    switch (i) {

        case 0:

            return UIColorHex(0x3FB8AF);

        case 1:

            return UIColorHex(0x7FC7AF);

        case 2:

            return UIColorHex(0xDAD8A7);

        case 3:

            return UIColorHex(0xFF9E9D);

        case 4:

            return UIColorHex(0xFF3D7F);

        default:

            break;

    }

    return nil;

}

– (void)didReceiveMemoryWarning

{

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}

@end