ホーム | アプリケーション | Tips | ダウンロード | プログラム | コラム

CBアプリ工房

アプリケーション > 画像ビューアが作りたい！ [ 1 | 2 ]

画像ビューアが作りたい！ - 1/2

更新 ： 2009/10/28
　



実行時の画像ビューア

完成図：画像ビューア

今回はストックした画像を一覧するビューアの解説をしてみます。

デジカメで撮り溜めた画像やインターネットから取得した画像を一覧して、眺めたり、拡大縮小するのは楽しいものです。スライドショウなどもできれば、より面白さが増します。

これらの機能をすべて盛り込むのは大変なので（それより何より大量の画像を高速に読み込み、処理する、などの工夫が必要になります）、ここでは、ビューアの基本機能である、画像を読み込んで一覧する部分を作ってみます。

画像ビューアの作成ポイント
 ●DrawGrid の OnDrawCell イベントの使い方
●画像の StretchDraw の仕方
以上を理解すれば作成できます。

今回は、画像を一覧するコンポーネントとして DrawGrid を利用しています。このコンポーネントは、セルがグリッドで区切られているので、そこに画像を表示していけば、簡単に画像ビューアができあがります。画像の配置に関して、そう悩まなくてもすむので、かなり楽ができます。

しかし、実際に使用するとなると、画像のあるフォルダを自由に指定したり、セルの大きさを簡単に変更できたりする機能が欲しくなってきます。

今回は、そこまでのコーディングは記述してありません。実用的な画像ビューアを作るヒントになれば、と思って作成したサンプルです。時間がある方は、ここでのコードを拡張して画像を拡大縮小する機能やスライドショウなどに挑戦してみてください。

それでは、早速作ってみましょう。

まず新規にアプリケーションを作成して、Form1 のサイズを適当な大きさにします（後からコードで、 Height = 380, Width =414  にしています）。この大きさは適当で良いので、適宜アレンジしてください。

設計時の画像ビューア

コンポーネントは、Panel を配置してその上に Button を置いています。それから DrawGrid を適当に置き、プロパティを設定しておきます。配置は、上の図のような感じになります。
以下のように、各コンポーネントのプロパティを設定してください。

コンポーネント Name 説明
TForm Form1 サイズを Width = 414, Height = 380。
BorderStyle を  bsSingle にします。
BorderIcons から最大表示ボタンを消しておきます。
TPanel Panel1 Align を  alClient にします。
TButton Button1 Caption を "読み込み" にします。
TDrawGrid DrawGrid1 FixedCols と FixedRows を消して、セル数を 3 行 4 列にしきます。
セルのサイズは 100。Align を alClient にします。

コンポーネントの設定が済んだら、Unit1.h のコーディングを行います。

private に画像ファイルを保持する変数と読み込み時に使うビットマップを宣言しておきます。

 

private:	// ユーザー宣言
    AnsiString file[2];
    Graphics::TBitmap *bmp;
}

続く・・・。


[ ホーム | ページトップ | 次へ | ブック | リンク | サイトマップ ]
Copyright(c) 2003 Shibu All rights reserved.