iPhoneノギスでお絵描き

ノギスのキバみたいになっているところはジョー(ジョウ?)と呼ぶらしい、これを使ってお気に入りの太さで線を描画するiPhoneアプリを書いてみます。


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

サンプルコード

#import “ViewController.h”

#import <QuartzCore/QuartzCore.h>

@interface ViewController ()

{

    UIView *jawA, *jawB;

    UIView *beam;

}

@end

@implementation ViewController

– (void)viewDidLoad

{

    [super viewDidLoad];

    self.view.backgroundColor = [self color:2];

    

    [self createScale];

    [self createJaw];

}

– (void)createScale

{

    UIBezierPath *path = [UIBezierPath bezierPath];

    [path moveToPoint:CGPointMake(30, 50)];

    [path addLineToPoint:CGPointMake(30, 500)];

    [path addLineToPoint:CGPointMake(300, 500)];

    

    CAShapeLayer *sl = [CAShapeLayer layer];

    sl.strokeColor = [self color:0].CGColor;

    sl.fillColor = [UIColor clearColor].CGColor;

    sl.lineWidth = 2;

    sl.path = path.CGPath;

    [self.view.layer addSublayer:sl];

    

    path = [UIBezierPath bezierPath];

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

        float x = 30;

        float y = 50 + 50 * i;

        [path moveToPoint:CGPointMake(x, y)];

        [path addArcWithCenter:CGPointMake(x,y) radius:3 startAngle:0 endAngle:2*M_PI clockwise:YES];

    }

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

        float x = 30 + 50 * i;

        float y = 500;

        [path moveToPoint:CGPointMake(x, y)];

        [path addArcWithCenter:CGPointMake(x,y) radius:3 startAngle:0 endAngle:2*M_PI clockwise:YES];

    }

    sl = [CAShapeLayer layer];

    sl.fillColor = [self color:0].CGColor;

    sl.path = path.CGPath;

    [self.view.layer addSublayer:sl];

}

– (void)createJaw

{

    UIBezierPath *path = [UIBezierPath bezierPath];

    [path moveToPoint:CGPointMake(0, 0)];

    [path addLineToPoint:CGPointMake(10, 40)];

    [path addLineToPoint:CGPointMake(30, 60)];

    [path addLineToPoint:CGPointMake(29, 0)];

    [path closePath];

    

    jawA = [[UIView alloc] initWithFrame:CGRectMake(130, 0, 30, 60)];

    [self.view addSubview:jawA];

    CAShapeLayer *sl = [CAShapeLayer layer];

    sl.fillColor = [self color:3].CGColor;

    sl.path = path.CGPath;

    [jawA.layer addSublayer:sl];

    

    jawB = [[UIView alloc] initWithFrame:CGRectMake(160, 0, 30, 60)];

    [self.view addSubview:jawB];

    sl = [CAShapeLayer layer];

    sl.frame = jawB.bounds;

    sl.fillColor = [self color:3].CGColor;

    sl.path = path.CGPath;

    sl.transform = CATransform3DMakeRotation(M_PI, 0, 1, 0);

    [jawB.layer addSublayer:sl];

    

    

    NSArray *arr = @[jawA, jawB];

    for (UIView *v in arr) {

        UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(slide:)];

        [v addGestureRecognizer:pan];

    }

}

– (void)slide:(UIPanGestureRecognizer*)gr

{

    CGPoint p = [gr locationInView:self.view];

    if (gr.view == jawA) {

        if (p.x < jawB.center.xjawB.bounds.size.width) {

            gr.view.center = CGPointMake(p.x, gr.view.center.y);

        } else {

            gr.view.center = CGPointMake(jawB.center.xjawB.bounds.size.width, gr.view.center.y);

        }

    } else {

        if (p.x > jawA.center.x + jawA.bounds.size.width) {

            gr.view.center = CGPointMake(p.x, gr.view.center.y);

        } else {

            gr.view.center = CGPointMake(jawA.center.x + jawA.bounds.size.width, gr.view.center.y);

        }

    }

    if(!beam) {

        beam = [[UIView alloc] initWithFrame:CGRectZero];

        beam.backgroundColor = [UIColor colorWithCGColor:CGColorCreateCopyWithAlpha([self color:4].CGColor, 0.3)];

        [self.view addSubview:beam];

        

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

        [beam addGestureRecognizer:tap];

    }

    float x = jawA.frame.origin.x + jawA.frame.size.width;

    float w = jawB.frame.origin.x – x;

    beam.frame = CGRectMake(x, 30, w, 470);

}

– (void)drawStraight:(UITapGestureRecognizer*)gr

{

    UIView *line = [[UIView alloc] initWithFrame:gr.view.frame];

    line.layer.anchorPoint = CGPointMake(0, 0);

    line.layer.position = CGPointMake(gr.view.frame.origin.x, 30);

    line.transform = CGAffineTransformMakeScale(1.0, 0);

    line.backgroundColor = [UIColor colorWithCGColor:CGColorCreateCopyWithAlpha([self color:1].CGColor, 0.5)];

    [self.view insertSubview:line belowSubview:beam];

    [UIView animateWithDuration:0.5 animations:^{

        line.transform = CGAffineTransformIdentity;

    }];

}

#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]

– (UIColor*)color:(int)i

{

    switch (i) {

        case 0:

            return UIColorHex(0x96CA2D);

        case 1:

            return UIColorHex(0xB5E655);

        case 2:

            return UIColorHex(0xEDF7F2);

        case 3:

            return UIColorHex(0x4BB5C1);

        case 4:

            return UIColorHex(0x7FC6BC);

        default:

            break;

    }

    return nil;

}

– (void)didReceiveMemoryWarning

{

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}

@end