Eto.Formsで画像表示
今回は画像を表示してみます。Eto.Formsで画像を表示する主なクラスは、「Image」がつくクラスとDrawableクラスです。
- Image~:画像表示のみ(画像であるImageインスタンス上では、ピクセル単位の色設定が可能)
- Drawable:Graphicsインスタンスを取得することで、点や線、文字、画像などの描画処理が可能
今回は、前者のうちImageViewを使ってみます。
いつものようにテンプレートからプロジェクトを作ります。ファイルアクセスの都合上、アプリケーション・プロパティの設定ではFull .NETを選択します。
using System; using Eto.Forms; using Eto.Drawing; namespace EtoSample3 { public class MainForm : Form { ImageView myImage = new ImageView { BackgroundColor = Color.FromRgb(0) }; Scrollable container; public MainForm() { Title = "Image Viewer"; MinimumSize = new Size(200, 100); BackgroundColor = myImage.BackgroundColor; container = new Scrollable { Content = myImage, BackgroundColor = myImage.BackgroundColor, MinimumZoom = 1F, MaximumZoom = 1F, ExpandContentHeight = false, ExpandContentWidth = false, }; Content = container; //Content = myImage; var openCommand = new Command { MenuText = "Open...", ToolBarText = "Open", Shortcut = Application.Instance.CommonModifier | Keys.O }; openCommand.Executed += (s, e) => { var dialog = new OpenFileDialog(); if (dialog.ShowDialog(this) != DialogResult.Ok) return; try { var img = new Bitmap(dialog.FileName); if (img != null) { myImage.Image = img; ClientSize = new Size( img.Width + 2, img.Height + 2); //ClientSize = img.Size; return; } } catch (Exception) { } MessageBox.Show("Error!"); }; var quitCommand = new Command { MenuText = "Quit" }; quitCommand.Executed += (sender, e) => Application.Instance.Quit(); Menu = new MenuBar { Items = { new ButtonMenuItem { Text = "&File", Items = { openCommand } }, }, QuitItem = quitCommand, }; } } }
上のコードには、一部コメントアウトした領域があります。 コメントの仕方によって、2種類の構造を作り分けるためです。
- 上のコードのままなら、Formの中身がScrollableコンテナとなり、その中身がImageViewになる。
- コメントアウトを外して、代わりにcontainerインスタンス関連を全てコメントアウトすると、Formの中身がいきなりImageViewになる。
上のコードのまま起動すると、中が黒いウインドウがあらわれます。
メニューの「File」→「Open...」を選ぶと(またはCtrl+Oを押下すると)、ファイル選択ダイアログがあらわれます。 画像ファイルを選ぶと、その画像が表示されます(ここではVisual Studioのソリューション エクスプローラ部分のスクリーンショットです)。
今回のコードでは、ウインドウを縮小するとスクロールバーがあらわれ、拡大すると画像の外側は黒く塗られます。
ImageViewクラス
ImageViewは、Imageプロパティに画像インスタンスを設定すると表示する、シンプルなクラスです。
ちなみにBackgroundColorプロパティは、画像の外側の領域(拡大時に生じるもの)の色となります。
Imageクラス
Imageクラスは、Eto.Formsで画像を扱う、基本のクラスです。拡大縮小などの機能も、このクラス自体にはありません。唯一できる変更は、SetPixelメソッドによる点単位の色設定のみ。
なお、一般的な画像は派生クラスの1つであるBitmap
クラスを使いますが、Windows BMPファイル以外に「よくある画像」は読み書き可能です。具体的な種類は、ImageFormat
列挙体にあります。
Eto.Forms API : ImageFormat Enumeration
とりあえず読んで表示するだけなら、これでも十分ではないかと思います。
ScrollLayout
名前の通り、大きな中身をスクロールさせつつ表示できるコンテナです。
ソース中のcontainerコンストラクタにある設定を変えることで、挙動を変えられます。
なお、中身よりコンテナが大きくなった場合に「拡大しない」ためには、 ExpandContentWidth
, ExpandContentHeight
を false にする必要があります。 MaximumZone=1F
だけでは拡大してしまいます。
一方、MinimumZoom
を小さくすると、ウインドウ縮小時に中身も縮小します。設定値より小さくした場合のみ、スクロールバーが現れます。