AFsoft WebSite (AFsoft.JP)

DelphiXE3　[FMX] 画像ビューワーアプリケーション　2014/08/14

　
前回は電卓アプリケーションを作ってみました。今回は簡易な画像ビューワー・アプリケーションを作ってみます。
　
DelphiXE3・FireMonkey(FMX)では、画像ファイルを扱うコンポーネントとして以下のようなものがあります。
　・イメージコントロール(ImageControl)
　・イメージビューワー（ImageViewer）
　・画像（Image）
　
ここでは、イメージコントロール(ImageControl)を使ってみます。下記のように画面デザインをしてみます。

何もしていませんが取り敢えずそのまま保存・コンパイル（ビルド）・実行をしてみます。

イメージコントロールの箇所をクリックすると
画像ファイルを開く画面が表示され、
画像ファイルを選択する事が出来ます。
Windows7標準サンプルの「砂漠.jpg」を指定してみます
↓

画面の大きさを変更してみます
↓

小さくするときはともかく、大きくすると余白が出てしまいます。イメージコントロールにはストレッチの機能もありません。ですので、イメージコントロール ImageControl1 の Align プロパティを「alNone」にしておき、

procedure TForm1.FormResize(Sender: TObject);
var
   x,y,bx,by : single ;
begin
   if not(ImageControl1.Bitmap.IsEmpty) then begin
      x := ScrollBox1.ClientWidth ;
      y := ScrollBox1.ClientHeight;
      bx:= ImageControl1.Bitmap.Width ;
      by:= ImageControl1.Bitmap.Height;
      ImageControl1.Scale.X := x/bx;
      ImageControl1.Scale.Y := y/by;
      ScrollBox1.HScrollBar.Value := 0 ;
      ScrollBox1.VScrollBar.Value := 0 ;
      ScrollBox1.ShowScrollBars := False ;
   end;
end;

procedure TForm1.ImageControl1Change(Sender: TObject);
begin
   if not(ImageControl1.Bitmap.IsEmpty) then begin
      ImageControl1.Scale.X := 1;
      ImageControl1.Scale.Y := 1;
      ScrollBox1.HScrollBar.Value := 0 ;
      ScrollBox1.VScrollBar.Value := 0 ;
      ScrollBox1.ShowScrollBars := True ;
      ImageControl1.Width := ImageControl1.Bitmap.Width ;
      ImageControl1.Height:= ImageControl1.Bitmap.Height;
   end;
end;

というようにプログラミングしておけば、

イメージコントロールをクリックし
「砂漠.jpg」を選択
↓

画面をリサイズ
↓

最初からフィット表示したければ、FormResize(Sender)を呼び出せばいいだけですが、フィット表示したい場合・したくない場合、を選択したい場合には、その切替スイッチが必要となりますね。

procedure TForm1.FormCreate(Sender: TObject);
begin
   ImageControl1.Width := ScrollBox1.ClientWidth ;
   ImageControl1.Height:= ScrollBox1.ClientHeight;
end;

procedure TForm1.FormResize(Sender: TObject);
var
   x,y,bx,by : single ;
begin
   if not(ImageControl1.Bitmap.IsEmpty) then begin
      if (CheckBox1.IsChecked) then begin
         x := ScrollBox1.ClientWidth ;
         y := ScrollBox1.ClientHeight;
         bx:= ImageControl1.Bitmap.Width ;
         by:= ImageControl1.Bitmap.Height;
         ImageControl1.Scale.X := x/bx;
         ImageControl1.Scale.Y := y/by;
      end;
   end;
end;

procedure TForm1.ImageControl1Change(Sender: TObject);
begin
   if not(ImageControl1.Bitmap.IsEmpty) then begin
      ImageControl1.Scale.X := 1;
      ImageControl1.Scale.Y := 1;
      ScrollBox1.HScrollBar.Value := 0 ;
      ScrollBox1.VScrollBar.Value := 0 ;
      ImageControl1.Width := ImageControl1.Bitmap.Width ;
      ImageControl1.Height:= ImageControl1.Bitmap.Height;
      if (CheckBox1.IsChecked) then
         FormResize(Sender);
   end;
end;

procedure TForm1.CheckBox1Change(Sender: TObject);
begin
   ScrollBox1.ShowScrollBars := not(CheckBox1.IsChecked);
   ImageControl1Change(Sender);
end;

のような感じでしょうか。チェックボックスのオンオフを繰り返すとスクロールバーの位置が(0,0)に戻りますが、気にしない事にします。
　
画像のフィットを行うと、縦横比率が異なってしまうと、画像が見えにくくなる場合があります。これを回避するためには、縦と横の倍率を同じにすれば少しマシになる場合があります。
　
　
さて、それでは画面左側で、画像のあるフォルダの指定と、画像ファイル名の指定を行えるようにします。ここでは単純に、「開く」画面と、そのフォルダ内のファイル一覧を表示するようにします。

　
[F]ボタン Button1 をクリックしたら、OpenDialog1 を開くようにします。その際、Filter プロパティには、扱える画像タイプを

OpenDialog1.InitialDir := AppPath;
OpenDialog1.Filter := TBitmapCodecManager.GetFilterString;

のようにして絞り込むようにしていますが、残念ながら、MacOSX では、ちゃんと機能していないようですね。MacOSX には、ファイルの種類を指定する項目欄が見当たりませんので。
　
その横にコンボボックス ComboBox1 を配置しています。ここでは、選択したフォルダを20個まで保持するようにしています。それに、アプリケーションプログラムを入れてあるフォルダ、ユーザーのホームパス、を追加するようにしています。　この内容は、画面の大きさと同じく、Iniファイルに保存するようにしています。
　
Iniファイルにフォルダ名を保存する際、前後に二重引用符「"」を付けていますが、Windowsの場合はこれを自動的に除去してくれるのですが、MacOSXの場合は「"」も文字列に入ってしまいます。そのため、それを除去するようにしています。
　
当初は、コンボボックス ComboBox1 をダブルクリックしたらフォルダ選択を行うようにしていましたが（[F]ボタン Button1 が無い状態）、MacOSX でそれを実行すると、フリーズ／アプリ強制終了してしまいましたので、その手法は取りやめました。
　
ファイル一覧は、ListBox1 で表示させています。

// ListBox1 にファイル一覧を表示
procedure TForm1.ListBox1Disp ;
var
   i : integer;
   p,t,f,e : string;
   l : TStringDynArray;
begin
   if (ComboBox1.Items.Count = 0) then exit;
   i := ComboBox1.ItemIndex;
   if (i = -1) then exit;
   p := ComboBox1.Items[i];   // 検索フォルダ
   t := TBitmapCodecManager.GetFileTypes;
   t := t.ToLower;
   ListBox1.Items.Clear;
   l := TDirectory.GetFiles(p);
   for i := 0 to Length(l)-1 do begin
      f := ExtractFileName(l[i]);
      e := ExtractFileExt(f.ToLower);
      if (t.IndexOf(e) >= 0) then
         ListBox1.Items.Add(f);
   end;
   l := nil;
end;

　
ファイルを開く際も

// 画像ファイルを読み込む
function TForm1.LoadImageFile(f:string) : Boolean ;
var
   e,t : string;
begin
   Result := False;
   t := TBitmapCodecManager.GetFileTypes;
   t := t.ToLower;
   e := ExtractFileExt(f.ToLower);
   if (t.IndexOf(e) >= 0) then begin
      if (FileExists(f)) then begin
         try
            ImageControl1.Bitmap.LoadFromFile(f);
            ImageControl1Change(SELF);
            Label1.Text := f;
            Result := True;
         except
            ;
         end;
      end;
   end;
end;

のようにして、指定したファイルの拡張子が、扱える画像の拡張子かどうかを確認してから読み込むようにしています。

↓

↓

↓

　
ステータスバー上の Label1 には、ファイル名を表示するようにしていますが、イメージコントロールをクリックして画像ファイルを指示した場合には表示されません。まぁ、この画像ビューワーでは、画像をクリックすると、開く画面が出るようになりますが、逆に、その機能は不必要に思えてくるかもしれません。なお、MacOSXの場合には、フルパスファイル名がかなり長くなりすぎて変な表示になってしまうかもしれません。
　
　
しかし、MacOSXでテスト実行してみると、想定もしていなかった箇所での想定外の動作（フリーズ・アプリ強制終了等）や不具合等、色々と起きてしまうので、実際にやってみないと分からないものだなぁと実感してしまいます。
　
　
アイコンは、DelphiXE3 の提供するアイコンをそのまま使っています。
　

ダウンロード：Win32 プログラム（p447_w32.zip；3,151KB）
ダウンロード：Win64 プログラム（p447_w64.zip；3,470KB）
ダウンロード：MacOSXプログラム（p447_mac.zip；4,190KB）
ダウンロード：ソースファイル　（p447_src.zip；86KB）

バッチファイル
ＢＡＳＩＣ
C言語のお勉強
拡張子な話
DOSプログラム
Delphi
>Dehi入門編
>Delphi2010
>DelphiXE3
▲2014/08/13
　2014/08/14
▼2014/08/19
　
シェアウェア
Script!World
データベース
　