Cocoa Applicationで線を描いてみる

2012年11月10日：OS X

　数値計算した値をグラフで表示したい場合とか、絵を描きたい場合などあるかと思います。そこで、Cocoa Applicationで線を描写するプログラムをつくってみます。

プロジェクトの作成

まず、いつもの通り、Xcodeを開いと、

OS X->Application->Cocoa Application

でプロジェクトを作成します。

以下のようにプロジェクトを記入して進めます。

好きなところへプロジェクトを保存しましょう。

インターフェースの作成

　線を描く画面を作成します。以下のようにして、画面作成用の画面へ移動しましょう。

そして、右下の部分からCustom Viewを選択して、画面上にドラッグアンドドロップで貼り付けます。

　次に、Custom Viewを画面いっぱいになるように大きさを整えます。

では、Custom Viewのためのクラスを作成します。一番上のバーから

File->New->File…

を選択します。そして、Cocoa->Objective-C class->Nextで進めます。

名前は好きに付けてください。ここでは「LineView」としました。

そして、Subclass ofはNSViewにしてください。

そして、createをおします。すると、画面の左に追加されるはずです。確認しましょう。

あとは、作ったクラスとCustom Viewをつなげます。画面設定の部分に移って、CustomViewを選択します。そして、Classの部分に先ほど作ったクラスを選択します。(ここではLineViewです）

これで、クラスとCustomViewがつながりました。あとは、コードを書いていくだけです。

コードを書く

作成したクラスLineView.mを左のウインドウから選択します。そして、以下のように記入しましょう。

#import "LineView.h"
@implementation LineView
- (id)initWithFrame:(NSRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
    // Initialization code here.
    }
    return self;
}
- (void)drawRect:(NSRect)dirtyRect
{
    // Drawing code here.
    [NSBezierPath strokeLineFromPoint:NSMakePoint(0,0)
        toPoint:NSMakePoint(100,200)]; //ここを追加
}
@end

「ここを追加」と書いてあるとこだけを追加しました。たったの一行です。(ここではブログへの表示の問題で２行に分けていますが、一行で大丈夫です。）これで実行してみてください。次のような線が描写されます。

左下が(0,0)で右上が正となっています。線以外にもかきたいものがある場合はいかの一覧を参照してください。

描写用の命令一覧

　描画関係の命令を以下にまとめます。

線をかく

　線を描くには以下の命令を用います。

[NSBezierPath strokeLineFromPoint:NSMakePoint(0,0) toPoint:NSMakePoint(100,200)];

位置(0,0)から位置(100,200)までに線を引きます。

色を付ける

[[NSColor colorWithDeviceRed:1.0 green:0.0 blue:0.0 alpha:1.0] set];

RGBで色を設定できます。描写の前にかいておきましょう。値を0から1の間です。わかっていると思いますが、Red->赤、green->緑、blue->青です。alphaは透明度を意味します。この場合は赤色を設定したことになります。

太さを設定する

[NSBezierPath setDefaultLineWidth:6];

数字の6の部分が線の太さです。

四角をかく

NSRect rect = NSMakeRect(10, 10, 100, 100);//設定
NSFrameRect(rect);//　描写

四角形描写にはクラスNSRectを使用します。クラスの初期設定にはNSMakeRectを使っています。ここでは、位置(10,10)と位置(100,100)を端とした四角形を設定しています。そして、NSFrameRect(rect)で設定したrectを記述します。

円をかく

NSBezierPath *Path = [NSBezierPath bezierPath];
[Path appendBezierPath:[NSBezierPath
     bezierPathWithOvalInRect:NSMakeRect(20,20,100,100)]];
[Path stroke];

設定した長方形に内接する円が描写されます。

[Path fill];

を最後に追加すれば塗りつぶされます。色設定は[Path stroke]や[Path fill]の前に行います。

折れ線の描写

折れ線の描写は以下の通りです。

NSBezierPath* path = [NSBezierPath bezierPath];
[path moveToPoint:NSMakePoint(10, 10)]; //初期座標
[path lineToPoint:NSMakePoint(20, 20)];//次の座標
[path lineToPoint:NSMakePoint(30, 100)];//次の座標
[path stroke];

著者：安井 真人(やすい　まさと)

TOP