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

公開日: : iPhone, IT, Mac


 やりたいこと

今回やりたいことは以下の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

広告

関連記事

mixisample

iPhoneアプリ開発 -mixiSDKを使ってmixi連携をしてみる(1)-

* やりたいこと iPhoneアプリでmixiと連携し、mixiボイスなどに文字を投稿する。 ※

記事を読む

no image

MySQLのバックアップ手順 -消えたら困るものはバックアップ-

そろそろデータが消えてもらったら困るぐらいになっていたのでバックアップをとることにしました。 とい

記事を読む

no image

Facebookがちょっとコワイ vol.2 -本当にあなたはあなたなの?-

以下のブログを読んで、さらにコワイと思ったFacebook。 あなたが登録している「友

記事を読む

no image

iPhoneアプリ開発 -背景画像をiPhone5対応してみた-

* やりたいこと iPhone5は今までと異なり高さが違います。 その結果、背景画像によっては良い感

記事を読む

iPhoneアプリ開発 -UIScrollViewでタッチを取得-

* やりたいこと UIScrollViewでタッチを取得する。 * 方法 通常のUIScrollV

記事を読む

iPhoneアプリにGoogle Analyticsを入れてみる -Google Analytics SDK for iOS導入-

* 導入経緯 iPhoneアプリをリリースして、を使って「ランキング」や「ダウンロード数」は適宜チ

記事を読む

datebox-date

jQueryMobileでカレンダー表示 -DateBoxプラグインの利用-

スマートフォン対応をしているとカレンダーの表示の仕方をスマートフォンらしくしたいことがあると思います

記事を読む

no image

CakePHPのモデルのキャッシュではまった -新しく追加したカラムに値が入らない-

タイトルのとおり、ちょこっとCakePHPではまったのでメモ。 * 作業内容 -MySQLで、ある

記事を読む

no image

さくらのVPSでJenkins -執事さんとご対面-

さくらのVPSを利用している方は多いかと思います。 私も、自分で遊ぶ用(開発用)として借りてみまし

記事を読む

no image

jQuery Mobileの1.0Beta3、1.0RC1で起きた現象 -iOS5で動かない!?-

最近おきたjQuery Mobile周りについてのメモ。 本来なら色々チェックしてちゃんと原因を調

記事を読む

広告

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

広告

no image
[感想] Effective Objective-C 2.0 ☆☆☆☆★(4.5)

* 構成 - 第1章 Objective-Cに慣れる -

no image
[感想] iOSアプリテスト自動化入門 ☆☆☆(3.0)

* 構成 - Chapter 1 テスト自動化への取り組み

DeployGateを試してみた(iOS編) -DeployGateがiOSに対応-

今までのDeployGate - -[http://pplace.

iPhone/iPadアプリを開発するためにやったこと

今までに、iPhoneを3本ほどリリース((リリースしたアプリは全て1

no image
ターミナルでgitのコマンドを補完したりブランチ名を表示する – macでgitを便利に使うために –

* やりたいこと macのターミナルでgitをいじっていると -今の

→もっと見る

PAGE TOP ↑