線を引くことで、数を数えていく方法を画線法（英語だとTally marks）と呼ぶようです。日本を含む漢字圏では「正」の字、英語圏では、縦棒４本で最後に横に一本線を引いて冊のように線を描いていきます。どちらも、５本の線を一纏めというのは共通のようです。今回は、この画線法を使ったiPhoneアプリをかいてみます。
動作イメージ
XcodeからiOS6 iPhone Simulatorで動かすとこんな感じになります。
ポイント
CAShapeLayerとUIBezierPathを使って、画面の左に正、右は冊を同時に描いていきます。画面の下部にプラスボタンを表示して、ボタンを押すと、線を一本増やしていくようにしました。５本線を描いたら、次は下に正と冊を描いていきます。
サンプルコード
#import “ViewController.h”
#import <QuartzCore/QuartzCore.h>
@interface ViewController () {
int counter;
CAShapeLayer *sl;
UIBezierPath *path;
}
@end
@implementation ViewController
– (void)viewDidLoad
{
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
[self createPlus];
[self createLabel];
}
– (void)createPlus
{
UILabel *plus = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 60, 60)];
plus.text = @”+”;
plus.textAlignment = 1;
plus.font = [UIFont boldSystemFontOfSize:60];
plus.textColor = [UIColor blackColor];
plus.backgroundColor = [UIColor whiteColor];
plus.center = CGPointMake(160, 420);
[self.view addSubview:plus];
plus.userInteractionEnabled = YES;
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(countup)];
[plus addGestureRecognizer:tap];
}
– (void)countup
{
float size = 60;
float space = size * 2.4;
int x = size;
if (counter % 5 == 0) {
sl = [[CAShapeLayer alloc] init];
sl.fillColor = [UIColor clearColor].CGColor;
sl.strokeColor = [UIColor blackColor].CGColor;
sl.lineWidth = 3;
[self.view.layer addSublayer:sl];
path = [UIBezierPath bezierPath];
// 正の字1画目
int y = (counter / 5 + 1) * 80;
[path moveToPoint:CGPointMake(x, y)];
[path addLineToPoint:CGPointMake(x + size, y)];
// tally mark first
[path moveToPoint:CGPointMake(x + space, y)];
[path addLineToPoint:CGPointMake(x + space, y + size)];
sl.path = path.CGPath;
}
else if ( counter % 5 == 1)
{
// 正の字2画目
int y = (counter / 5 + 1) * 80;
[path moveToPoint:CGPointMake(x + size/2.0, y)];
[path addLineToPoint:CGPointMake(x + size/2.0, y + size)];
// tally mark seconds
float d = size / 3.0;
[path moveToPoint:CGPointMake(x + space + d, y)];
[path addLineToPoint:CGPointMake(x + space + d, y + size)];
sl.path = path.CGPath;
}
else if ( counter % 5 == 2)
{
// 正の字3画目
int y = (counter / 5 + 1) * 80;
[path moveToPoint:CGPointMake(x + size/2.0, y + size/2.0)];
[path addLineToPoint:CGPointMake(x + size, y + size/2.0)];
// tally mark third
float d = 2 * size / 3.0;
[path moveToPoint:CGPointMake(x + space + d, y)];
[path addLineToPoint:CGPointMake(x + space + d, y + size)];
sl.path = path.CGPath;
}
else if ( counter % 5 == 3)
{
// 正の字4画目
int y = (counter / 5 + 1) * 80;
[path moveToPoint:CGPointMake(x + size/5.0, y + size/2.0)];
[path addLineToPoint:CGPointMake(x + size/5.0, y + size)];
// tally mark 4th
float d = 3 * size / 3.0;
[path moveToPoint:CGPointMake(x + space + d, y)];
[path addLineToPoint:CGPointMake(x + space + d, y + size)];
sl.path = path.CGPath;
}
else if ( counter % 5 == 4)
{
// 正の字5画目
int y = (counter / 5 + 1) * 80;
[path moveToPoint:CGPointMake(x, y + size)];
[path addLineToPoint:CGPointMake(x + size, y + size)];
// tally mark 5th
[path moveToPoint:CGPointMake(x + space – size*0.2, y + size*0.8)];
[path addLineToPoint:CGPointMake(x + space + size*1.2, y + size*0.2)];
sl.path = path.CGPath;
}
if (counter < 25) {
counter++;
}
}
– (void)createLabel
{
UILabel *jp = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 50, 32)];
jp.text = @”JP”;
jp.textAlignment = 1;
jp.textColor = [UIColor whiteColor];
jp.backgroundColor = [UIColor blackColor];
jp.center = CGPointMake(90, 490);
[self.view addSubview:jp];
UILabel *en = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 50, 32)];
en.text = @”EN”;
en.textAlignment = 1;
en.textColor = [UIColor whiteColor];
en.backgroundColor = [UIColor blackColor];
en.center = CGPointMake(230, 490);
[self.view addSubview:en];
}
– (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end