ページ

2010年1月2日土曜日

HUD用のボタンを作る

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

BlogAssistant では HUD (Head Up Display) Window を使おうと考えている。HUD用のボタンを作ってみよう。





参考にしたのはプレビュー.app のカラー調整パネル。


NSView のカスタムクラスを作り、全てプログラムで描画する。

- (void)drawRect:(NSRect)rect {
  :
}


詳細はソースコードを見てもらうとして描画のポイントだけ書いておく。

描画フロー
 1. 影の描画。NSShadow を使った。
 2. 背景(Round Rect - 角丸)を描く。濃淡を付けるために NSGradient を使った。
 3. 枠線(Round Rect)を描く。
 4. 文字の描画

Round Rect (角丸)の描画は -[NSBezierPath bezierPathWithRoundedRect:xRadius:yRadiuss:] が使える。

できあがりはこんな感じ。


ボタンは透けるようにしてある。


半透明の絵を描くときに NSShadow を付けると影が透けて見えて実際より暗くなってしまうため一工夫が必要。今回は影を描く時にマスク(クリッピング)を適用して影が半透明部分にかからないようにしてある。



ソースコードを GitHubに用意したのでどうぞ。
HUDButton at master from xcatsan's SampleCode - GitHub