点を一つタッチしよう、黄色くなるよ。
もう一つタッチしよう、赤色のひもでつながった。
緑のひももつなげられるかな?
といった感じの子供用iPhoneアプリサンプルを作ってみた。

ポイント
変数にselectedというUIViewの箱を用意しておいて、
UITapGestureを使ってタップされたViewをそこに入れておく、
箱にViewが入ってる状態で他のViewがタップされたらそこと線を繋ぐ。
という感じで書いてみました。

環境
今回つくったiPhoneアプリサンプルは、
XcodeのiOS6 iPhone Simulatorで動かしています。


サンプルコード


#import “ViewController.h”

#import <QuartzCore/QuartzCore.h>

@interface ViewController () {

    UIView *selected;

    CAShapeLayer *canvasRed;

    CAShapeLayer *canvasGreen;

    UIBezierPath *pathRed;

    UIBezierPath *pathGreen;

    int color;

}

@end

@implementation ViewController

– (void)viewDidLoad

{

    [super viewDidLoad];

    self.view.backgroundColor = [UIColor whiteColor];

    

    [self createUI];

    

    [self createNodes];

}

– (void)createUI

{

    UILabel *clear = [[UILabel alloc] init];

    clear.text = @”clear”;

    clear.font = [UIFont fontWithName:@”MarkerFelt” size:30];

    [clear sizeToFit];

    clear.center = CGPointMake(160, 30);

    [self.view addSubview:clear];

    

    clear.userInteractionEnabled = YES;

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

    [clear addGestureRecognizer:tap];

    

    

    UIView *green = [[UIView alloc] initWithFrame:CGRectMake(100, 15, 30, 30)];

    green.backgroundColor = [UIColor greenColor];

    green.layer.cornerRadius = 5;

    [self.view addSubview:green];

    UITapGestureRecognizer *tapG = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(setColor:)];

    [green addGestureRecognizer:tapG];

    

    UIView *red = [[UIView alloc] initWithFrame:CGRectMake(190, 15, 30, 30)];

    red.backgroundColor = [UIColor redColor];

    red.layer.cornerRadius = 5;

    [self.view addSubview:red];

    

    UITapGestureRecognizer *tapR = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(setColor:)];

    [red addGestureRecognizer:tapR];

    

}

– (void)clear

{

    [canvasRed removeFromSuperlayer];

    canvasRed = nil;

    pathRed = nil;

    

    [canvasGreen removeFromSuperlayer];

    canvasGreen = nil;

    pathGreen = nil;

}

– (void)setColor:(UITapGestureRecognizer*)gr

{

    if (gr.view.backgroundColor == [UIColor greenColor]) {

        color = 1;

    } else {

        color = 0;

    }

}

– (void)createNodes

{

    int xCount = 6;

    int yCount = 8;

    float size = 15;

    

    for (int i = 0; i<xCount * yCount; i++) {

        float x = (i % xCount) * size * 3 + 40;

        float y = (i / xCount) * size * 3 + 70;

        

        UIView *node = [[UIView alloc] initWithFrame:CGRectMake(x, y, size, size)];

        node.backgroundColor = self.view.backgroundColor;

        node.layer.cornerRadius = 5;

        node.layer.shadowOffset = CGSizeMake(1, 1);

        node.layer.shadowOpacity = 0.6;

        node.layer.shadowRadius = 1;

        [self.view addSubview:node];

        

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

        [node addGestureRecognizer:tap];

    }

}

– (void)tap:(UITapGestureRecognizer*)gr

{

    if ([selected isEqual:gr.view]) {

        selected = nil;

        gr.view.backgroundColor = self.view.backgroundColor;

    } else if (selected){

        selected.backgroundColor = self.view.backgroundColor;

        CGPoint p0 = selected.center;

        CGPoint p1 = gr.view.center;

        

        if (!pathRed) {

            pathRed = [[UIBezierPath alloc] init];

            pathGreen = [[UIBezierPath alloc] init];

        }

        if (!canvasRed) {

            canvasRed = [[CAShapeLayer alloc] initWithLayer:self.view.layer];

            canvasRed.fillColor = [UIColor clearColor].CGColor;

            canvasRed.strokeColor = [UIColor redColor].CGColor;

            canvasRed.lineWidth = 5;

            canvasGreen = [[CAShapeLayer alloc] initWithLayer:self.view.layer];

            canvasGreen.fillColor = [UIColor clearColor].CGColor;

            canvasGreen.strokeColor = [UIColor greenColor].CGColor;

            canvasGreen.lineWidth = 5;

            canvasGreen.transform = CATransform3DMakeTranslation(3, 3, 0);

            

            [self.view.layer addSublayer:canvasRed];

            [self.view.layer addSublayer:canvasGreen];

        }

        

        if (color == 0) {

            [pathRed moveToPoint:p0];

            [pathRed addLineToPoint:p1];

            canvasRed.path = pathRed.CGPath;

        } else {

            [pathGreen moveToPoint:p0];

            [pathGreen addLineToPoint:p1];

            canvasGreen.path = pathGreen.CGPath;

        }

        

        selected = gr.view;

        selected.backgroundColor = [UIColor yellowColor];

        

    } else {

        selected = gr.view;

        gr.view.backgroundColor = [UIColor yellowColor];

    }

}

– (void)didReceiveMemoryWarning

{

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}

@end