数字をなぞって書いてみるアプリ
(XcodeのiOS6 iPhone Simulatorで動かしています。)
概要
数字をなぞって覚えるっていうのは、誰もが通る道。
ということで、0から9までの数字をなぞるサンプルを作成
ポイント
UIBezierPathとCAShapeLayerの組み合わせで線を描画する
指の軌跡はTouchイベントを使って取得
サンプルコード
#import “ViewController.h”
#import <QuartzCore/QuartzCore.h>
@interface ViewController () {
NSString *value;
UIBezierPath *path;
CAShapeLayer *shapeLayer;
}
@end
@implementation ViewController
– (void)viewDidLoad
{
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
value = @”2″;
[self createMark];
[self createNumber];
[self lines];
[self createChangeButton];
}
– (void)createChangeButton {
UILabel *change = [[UILabel alloc] initWithFrame:CGRectMake(130, 420, 60, 30)];
change.text = @”>>>”;
change.textColor = [UIColor whiteColor];
change.textAlignment = 1;
change.backgroundColor = [UIColor darkGrayColor];
change.layer.cornerRadius = 10.0;
change.layer.borderColor = [UIColor blackColor].CGColor;
change.layer.borderWidth = 1.0;
change.userInteractionEnabled = YES;
[self.view addSubview:change];
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(changeValue)];
[change addGestureRecognizer:tap];
}
– (void)changeValue
{
for (UIView *v in self.view.subviews) {
[v removeFromSuperview];
}
// remove all CAShapeLayer
self.view.layer.sublayers = nil;
int next = ([value intValue] + 1) % 10;
value = [NSString stringWithFormat:@”%d”,next];
[self createMark];
[self createNumber];
[self lines];
[self createChangeButton];
}
– (void)createMark
{
for (int i=0; i<[value intValue]; i++) {
int x = (i % 3) * 40 + 160;
int y = (i / 3) * 35 + 20;
UIView *mark = [[UIView alloc] initWithFrame:CGRectMake(x, y, 30, 30)];
mark.backgroundColor = [UIColor greenColor];
mark.layer.cornerRadius = 5.0;
[self.view addSubview:mark];
UIView *eyeA = [[UIView alloc] initWithFrame:CGRectMake(5, 10, 5, 5)];
eyeA.layer.cornerRadius = 2.5;
eyeA.backgroundColor = [UIColor whiteColor];
[mark addSubview:eyeA];
UIView *eyeB = [[UIView alloc] initWithFrame:CGRectMake(20, 10, 5, 5)];
eyeB.layer.cornerRadius = 2.5;
eyeB.backgroundColor = [UIColor whiteColor];
[mark addSubview:eyeB];
}
}
– (void)createNumber
{
// top
UILabel *number = [[UILabel alloc] initWithFrame:CGRectMake(10, 20, 100, 100)];
number.font = [UIFont boldSystemFontOfSize:120];
number.text = value;
number.textAlignment = 1;
number.textColor = [UIColor colorWithWhite:0.2 alpha:1.0];
number.backgroundColor = [UIColor clearColor];
[self.view addSubview:number];
// second
for (int i=0; i<3; i++) {
UILabel *number = [[UILabel alloc] initWithFrame:CGRectMake(10 + 100 * i, 140, 100, 100)];
number.font = [UIFont boldSystemFontOfSize:120];
number.text = value;
number.textAlignment = 1;
number.textColor = [UIColor colorWithWhite:0.8 alpha:1.0];
number.backgroundColor = [UIColor clearColor];
[self.view addSubview:number];
}
// third
for (int i=0; i<3; i++) {
UILabel *number = [[UILabel alloc] initWithFrame:CGRectMake(10 + 100 * i, 280, 100, 100)];
number.font = [UIFont boldSystemFontOfSize:120];
number.text = value;
number.textAlignment = 1;
number.textColor = [UIColor colorWithWhite:0.8 alpha:1.0];
number.backgroundColor = [UIColor clearColor];
[self.view addSubview:number];
}
}
– (void)lines
{
float x = 0;
for (int i=0; i<2; i++) {
float y = 140 + 140 * i;
float width = self.view.bounds.size.width;
UIView *top = [[UIView alloc] initWithFrame:CGRectMake(x, y, width, 2)];
top.backgroundColor = [UIColor blueColor];
[self.view addSubview:top];
y = 190 + 140 * i;
for (int i=0; i<width; i+=10) {
UIView *dot = [[UIView alloc] initWithFrame:CGRectMake(i, y, 7, 2)];
dot.backgroundColor = [UIColor grayColor];
[self.view addSubview:dot];
}
x = 0;
y = 240 + 140 * i;
UIView *bottom = [[UIView alloc] initWithFrame:CGRectMake(x, y, width, 2)];
bottom.backgroundColor = [UIColor redColor];
[self.view addSubview:bottom];
}
}
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
path=[[UIBezierPath alloc]init];
UITouch *mytouch=[[touches allObjects] objectAtIndex:0];
[path moveToPoint:[mytouch locationInView:self.view]];
}
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *mytouch=[[touches allObjects] objectAtIndex:0];
[path addLineToPoint:[mytouch locationInView:self.view]];
if(!shapeLayer) {
shapeLayer = [[CAShapeLayer alloc] initWithLayer:self.view.layer];
shapeLayer.lineWidth = 10.0;
shapeLayer.strokeColor = [UIColor blackColor].CGColor;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.lineJoin = kCALineJoinRound;
[self.view.layer addSublayer:shapeLayer];
}
shapeLayer.path = path.CGPath;
}
– (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
shapeLayer = nil;
}
– (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end