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

公開日: : iPhone, Mac


 前回までのお話

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

 やりたいこと

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

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

本記事では、線の枠と中身で色を変える方法について。

 やったこと

やることは至って単純で以下の通り。

  1. 中の線より太めにし枠の色で線を描く
  2. 中の色で線を描く

以下の様な感じです。

//描画する範囲
[viewImage.image drawInRect:CGRectMake(viewImage.frame.origin.x,
									  viewImage.frame.origin.y,
									   viewImage.frame.size.width,
									   viewImage.frame.size.height)];
//線の形状
CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
CGContextSetTextDrawingMode(UIGraphicsGetCurrentContext(), kCGTextStroke);
//線の太さ(今回の例だと5.0f)
CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 5.0f);
//線の色
CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), outerRed, outerGreen, outerBlue, 1.0);
//線を描く
CGContextMoveToPoint(UIGraphicsGetCurrentContext(), startPoint.x, startPoint.y);
CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), endPoint.x, endPoint.y);
CGContextStrokePath(UIGraphicsGetCurrentContext());
//[以下が追記部分]
//(A)線の太さ
CGContextSetLineWidth(context, 3.0f);
//(B)線の色
CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), red, green, blue, 1.0);
//線を描く
CGContextMoveToPoint(UIGraphicsGetCurrentContext(), startPoint.x, startPoint.y);
CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), endPoint.x, endPoint.y);
CGContextStrokePath(context);
//画像化
UIImage* line = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
//UIImageViewにセット
viewImage.image = line;

 説明

(A)で枠線より細く線の太さを設定しています。
※今回だと2.0f分細いです。

(B)で枠線の色を設定しています。
当然ですが、枠線とは別の色を指定します。
アルファ値を1.0より小さくすることにより蛍光ペンみたいにもできます。

※[蛍光ペンみたくする時の注意点]※
枠線のアルファ値が1.0なので問題ありませんが、アルファ値が1.0以下の場合は線が重なり色の濃さがまちまちになります。
綺麗に見せるには、以下のように少しずつ線を描くのではなく今までの分を一気に描く必要があります。

CGContextMoveToPoint(UIGraphicsGetCurrentContext(), startPoint.x, startPoint.y);
CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), endPoint.x, endPoint.y);

今までのポイントをlinesに保存しておいて、以下のように一気に描けば綺麗に線が表示されます。

CGPoint points[lines.count];
int i = 0;
for (NSValue *value in lines) {
  points[i++] = [value CGPointValue];
}
CGContextAddLines(context, points, lines.count);

線のポイントをずっと保存して描き続けるのは厳しいので、touchesEndedで一旦初期化するのが良いかと思います。

 参考

広告

関連記事

no image

iPhoneアプリをヒットさせるために大事な5つのこと

巷にはたくさんのiPhoneアプリがたくさんあります。 そして、毎日新しいアプリがリリースされていま

記事を読む

Jenkins + iPhoneアプリ(番外1) -TestFlightを利用する-

* これまで - -- 執事(Jenkins)を雇いました。 * やりたいこと Jenk

記事を読む

no image

MacBook ProにGitのインストール

MacBook ProにGitをインストールしようと思いたち、思ったより手間取ってしまったので備忘録

記事を読む

no image

iPhoneアプリを開発してての疑問 -教えてエライ人!-

MacでiPhoneアプリを開発してて疑問に思ったのの解決してないことを列挙。 知識不足をさらけ出し

記事を読む

Jenkins + iPhoneアプリ(1) -執事を雇う-

アプリ開発をしていると、自動化出来るところは自動化したくなってきますよね。 開発しているアプリも増え

記事を読む

iPhoneアプリ開発 芳名帳アプリ作成(1) -最初の一歩-

* 作るアプリ 結婚式や2次会で「自分の名前を書く」芳名帳 これをアプリで作ってみます。

記事を読む

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

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

記事を読む

no image

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

* やりたいこと macのターミナルでgitをいじっていると -今のブランチってなんだっけ? -g

記事を読む

MacでRuby on Railsの開発環境構築 -Apacheで動かす-

* 環境 -MacBook Air MD231J/A -Mac OS X バージョン10.8.2

記事を読む

no image

iPhoneアプリ開発 -スライドアウトするスプラッシュ画像-

* やりたいこと アプリを起動すると表示される画像(スプラッシュ画像)があります。 単に表示されるだ

記事を読む

広告

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 ↑