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アプリ開発 −遷移先のViewControllerに値を引き継ぎたい−

例えば、トップページに複数個のボタンがあって、「A」と「B」というボタンを押下した際に、同じView

記事を読む

iPhoneアプリ開発 芳名帳アプリ作成(2) -記帳画面作成-

* 今までの流れ - * 画面構成 今回の芳名帳アプリは以下の画面で構成しています。 -

記事を読む

no image

iPhoneアプリ開発 -UIScrollViewで画像を拡大・縮小-

* やりたいこと UIScrollViewでピンチアウト・インして上に乗っている画像を拡大・縮小した

記事を読む

no image

ViewController単位で画面の向きを変えてみる

ViewController毎に画面の向きを変えたい!ということがあったのでやってみました。 *

記事を読む

no image

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

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

記事を読む

no image

iPhoneアプリ開発 -Bundle identifierを変えてはまった-

* 現象 Bundle identifierを変えた際にXcodeで実機に転送しようとすると以下のエ

記事を読む

no image

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

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

記事を読む

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

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

記事を読む

no image

iPhoneアプリ開発 −iOS6からの「写真」へのアクセス問題−

写真を扱うアプリを開発している際に問題になったこと。 ※結構前の話を今更まとめてみる。 * 写真へ

記事を読む

no image

MacBook ProにGitのインストール

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

記事を読む

広告

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 ↑