iPhoneアプリ開発　−タッチで線を描く(1)−

　やりたいこと

今回やりたいことは以下の2点。

• (1) 画面をタッチして、指を動かして線を描きたい。
• (2) 線の枠と中身で色を変えたい。

1つ目は、画面をタッチして指で線を書きたいということ。
2つ目は、描く線の枠と中身で色を変えたいということ。
本記事では、(1)について書いています。
(2)についての説明は以下。
iPhoneアプリ開発　−タッチで線を描く(2)/枠線を描く− | PPl@ce

　最初にやること

画面をタッチして線を描くので、「画面に指がタッチした」と「タッチした指が動いている」というのを認識しないとはじまりません。
上記、それぞれは「touchesBeganメソッド」と「touchesMovedメソッド」を使って対応します。

//画面タッチ
 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];
    touchPoint = [touch locationInView:タッチ対象(selfとか)];
}

touchPointは画面をタッチした際の座標で、「touchesMovedメソッド」でも使うので、このメソッド内のローカル変数にはしません。

//タッチ移動
<ul>
<li>(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{</li>
</ul>
    UITouch *touch = [touches anyObject];
    CGPoint currentPoint = [touch locationInView:タッチ対象(selfとか)];
    [line stroke:touchPoint endPoint:currentPoint]; //(*) この中身については後述
    touchPoint = currentPoint;
}

タッチ移動したら、移動した箇所の座標を取得しcurrentPointに入れます。
線を描く処理((*)のところ)をおこなったら、今の座標をtouchPointに入れます。
この処理を繰り返すことによって、線の描画をおこないます。

　(1)のためにやったこと

線の描画をするためにやったことは以下。
(*)の中身になりますね。

//描画する範囲
[viewImage.image drawInRect:CGRectMake(viewImage.frame.origin.x, viewImage.frame.origin.y, viewImage.frame.size.width, viewImage.frame.size.height)];
//(A)線の形状
CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
CGContextSetTextDrawingMode(UIGraphicsGetCurrentContext(), kCGTextStroke);
//線の太さ
CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 3.0f);
//(B)線の色
CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), red, green, blue, 1.0);
CGContextMoveToPoint(UIGraphicsGetCurrentContext(), startPoint.x, startPoint.y);
CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), endPoint.x, endPoint.y);
CGContextStrokePath(UIGraphicsGetCurrentContext());
UIImage* line = UIGraphicsGetImageFromCurrentImageContext();
viewImage.image = line;
UIGraphicsEndImageContext();

　(A)線の形状

線を描く上でまず大事なのは、線の形状。
「kCGLineCapRound」にすると角を丸くさせます。　
もし、「kCGLineCapButt」にしていると直線の時はいいですが、カーブのときに線ががくつきます。
この「kCGLineCapRound」にすることによって線を曲げても問題ないようにしています。

　(B)線の色

線の色は、RGBの値をそれぞれ設定することにより、決めることができます。
値を決めるのが面倒な場合は、以下のメソッドを使ってUIColorで値を決めることもできます。

    CGContextSetStrokeColorWithColor(<#CGContextRef c#>, <#CGColorRef color#>)

線の場合は、各メソッドはStrokeを使います。
CGContextSetRGBFillColorとかを使ってしまうと何も設定されないので注意です。

　線の枠色と中身の色をかえる方法

これはまた今度描くことにします。
他の図形の場合、kCGTextFillStrokeをDrawingModeで設定して、CGContextSetRGBFillColorとCGContextSetRGBStrokeColorを設定すれば、枠と中で色が変わります。

ただ、線は図形と違って、枠線のみで書いているので枠線と中身の色を変えることが簡単にできません。
※もし出来るなら誰か教えてくださいー！

　参考

SDKで始めるiPad/iPhoneアプリ開発の勘所（5）：Core Graphicsで作るiPad向けお絵描きアプリの基礎 (1/4) – ＠IT