GO BACK

Cocoa-Java 教室　その3

「ベジエによるグラフィックの描画」

■グラフィックはベジエ曲線が基本

　とりあえずコントロールの基本的な使い方がわかったところで、次にグラフィックの描画の基本について説明しましょう。コントロールは、使い方さえわかれば後はリファレンスを見て調べながら使えそうですが、グラフィックは基本の考え方がわからないとなんともやりようがないのです。なぜなら、Cocoaではグラフィックは単純に「このメソッドを実行」というだけでは済まないからです。

　Cocoaでは、グラフィックというのは「ベジエ曲線」として用意するのが基本です。Mac OS Xでは「Quartz」というグラフィックエンジンが使われている、というのは聞いたことがありますね？　これは、AdobeのPostScriptをベースとしています。このPostScriptというのは、要するにさまざまな曲線データを元に描画するやつで、その基本となっているのがベジエ曲線である、というわけです。まるで「風が吹けば桶屋が儲かる」みたいですが、そういうことで「Cocoaのグラフィックはベジエ曲線が基本である」と考えて下さい。

　グラフィックを描画するというのは、「描画のメソッドを呼び出す」という発想でした。JavaのAWTも、Graphicsインスタンスに用意されている「円を描く」とか「四角形を描く」といったメソッドを呼び出せば、それが表示されました。が、Cocoaではこの考えは根本的に改める必要があります。Cocoaでは、グラフィックを描くというのは「図形のパスを作成する」「それを元に画面に描く」という手順をとります。要するに「図形の作成」と「描画」が分かれているのです。

　また、JavaのAWTでは「描くコンポーネント内の描画メソッドを呼び出す」という発想でした。あるコンポーネントに描画したければ、そのコンポーネントのGraphicsインスタンスを取得し、その中にあるメソッドを呼び出せばそこに描かれたわけですね。——ところがCocoaでは違います。コントロールごとに描画用のオブジェクトは「ない」のです。それぞれのコントロールには、描画対象として設定する機能があり、ベジエ曲線のオブジェクトに描くメソッドがあります。そして「お前が描画対象になれ」「お前の図形を描け」というようにして描画をします。

　——まぁ、これだけじゃわからんでしょう。そこで、JavaとCocoaの描画の基本的な流れを簡単に整理してみましょう。

※Java（AWT）の場合

1. 描画するコンポーネントの描画用オブジェクト（Graphics）を取得する。
2. そのオブジェクト内にある描画用メソッドを呼び出す。（ここで描画される）
3. 描画が終ったら、必要に応じてオブジェクトの破棄などを行なって、おしまい。
   

※Cocoaの場合

1. 描画するコントロールに「お前が描画対象になれ！」と命令する。
2. 描画する図形のベジエ曲線を作成する。
3. その他、必要なオブジェクト（色など）を用意する。
4. 描画用オブジェクトやベジエ曲線で、描画のメソッドを呼び出す。（ここで描画される）
5. 描画が終ったら、描画するコントロールを描画対象から解放して、おしまい。
   

　ざっとですが、違いがわかってきたでしょうか。ちょっとCocoaの方が面倒ですね。なにしろ「描く図形」と「描画」がわかれているので、複雑な図形を描こうとするとけっこう大変そうです。——が、逆に「１つの図形を使い回せる」という利点もあります。つまり、図形を作成したら、それを元にして移動したり拡大縮小したりして描画すれば、かなり高度なグラフィックも簡単に描ける（場合もある）のです。

■基本図形を描いてみる

１．新規プロジェクト（Cocoa-Java Application）を作成したら、MainMenu.nibをInterface Builderで開きます。

２．デザインウィンドウに「NSImageView」と「NSButton」を１つずつ配置します。NSImageViewというのは、ツールパレットの左から３番目のアイコンをクリックすると現れます。左上の、中に絵が描かれている部品です。これらを配置して、位置や大きさを整えて下さい。

３．インターフェイスが出来上がったら、Javaのクラスを作成します。以下の手順に従ってMyObjectクラスとインスタンスを作成して下さい。

1. Nibファイルウィンドウで「Classes」タブを選択し、「java.lang.Object」を選択する。そして「Subclass java.lang.Object」メニューで「MyObject」クラスを作成する。
2. Infoウィンドウで、言語が「Java」になっていることを確認する。
3. アウトレットを作成する。名前：「img1」、種類：「NSImageView」という項目を１つ作成する。
4. アクションを作成する。名前：「btn1Click()」という項目を１つ作成する。
5. 以上が終ったら、MyObjectをファイルに保存する。
   
6. 作成したMyObjectを選択して「Instantiate MyObject」メニューでインスタンスを１つ作成する。
   

４．接続を行ないます。まずMyObjectインスタンスからNSImageViewまでCtrlキー＋ドラッグ＆ドロップし、「img1」に接続します。次にNSButtonからMyObjectインスタンスまでCtrlキー＋ドラッグ＆ドロップし、「btn1Click()」に接続します。

public void btn1Click(Object sender) { /* IBAction */
	img1.lockFocus();
	
	NSRect r1 = new NSRect(10,10,70,70);
	NSBezierPath p1 = NSBezierPath.bezierPathWithRect(r1);
	NSColor c1 = NSColor.redColor();
	c1.set();
	p1.stroke();
	
	NSRect r2 = new NSRect(50,50,70,70);
	NSBezierPath p2 = NSBezierPath.bezierPathWithOvalInRect(r2);
	NSColor c2 = NSColor.blueColor();
	c2.set();
	p2.fill();
	
	img1.unlockFocus();
}

■図形描画の基本手順

img1.lockFocus();

NSRect r1 = new NSRect(10,10,70,70);

NSBezierPath p1 = NSBezierPath.bezierPathWithRect(r1);

NSColor c1 = NSColor.redColor();

blackColor() , dargGrayColor() , lightGrayColor , whiteColor() , grayColor() , redColor() , greenColor() ,cyanColor() , yellowColor() , magentaColor() , orangeColor() , purpleColor() , brownColor() , clearColor()

c1.set();

p1.stroke();

NSBezierPath p2 = NSBezierPath.bezierPathWithOvalInRect(r2);

p2.fill();

■複雑なベジエ曲線を描く

public void btn1Click(Object sender) { /* IBAction */ img1.lockFocus(); NSBezierPath p1 = new NSBezierPath(); p1.moveToPoint(new NSPoint(20,20)); p1.lineToPoint(new NSPoint(150,150)); p1.lineToPoint(new NSPoint(20,150)); p1.curveToPoint(new NSPoint(20,80), new NSPoint(150,100), new NSPoint(150,20)); NSColor c1 = NSColor.redColor(); c1.set(); p1.fill(); img1.unlockFocus(); }

NSBezierPath p1 = new NSBezierPath();

p1.moveToPoint(new NSPoint(20,20));

p1.lineToPoint(new NSPoint(150,150));
p1.lineToPoint(new NSPoint(20,150));

p1.curveToPoint(new NSPoint(20,80), new NSPoint(150,100),
					new NSPoint(150,20));

• １つ目のNSPoint：曲線の終りの位置
• ２つ目のNSPoint：曲線の始まり位置から延びるコントロールポイントの位置
• ３つ目のNSPoint：曲線の終り位置から延びるコントロールポイントの位置
  

GO NEXT