|
PC写真システム |
|
写真表示コントロール(FreePhoto) |
| 最終更新日：2007/02/16 修正 |
今まで、その都度ソフトウェアを開発してきたが、画像仕様やファイル仕様などが固まったので、筆者のシステムに特化された写真表示のコントロール(FreePhoto)を開発し、実際にアプリで使用しているので紹介する。
●概要
筆者の写真ライブラリの写真を対象と限定した画像表示コントロールである。限定された部分を一般化すれば写真表示の汎用コントロールとなる。
○対象画像
Thumb、SmallWeb、LargeWeb、Monitor、Print の5種である。
○表示形式
- 画像：ベタ表示(Thumb)、一覧表示(Thumb、SmallWeb)、単一表示(LargeWeb、Monitor)、原画表示(Print )、単一表示ではAutoサイズもある。
- 付帯情報：なし、簡易、詳細
- フォーム表示、フォームレス(全面)表示については、このコントロールは感知しない。
○情報の引渡し
- 全て文字列配列で行う。データベースに依らない。
- 画像はパス情報で与える。パスは、基本パスと画像番号で与える。
- 付帯情報は、必要な全情報を項目名を付けて与える。
- 内容が空白のとき省略する行には、項目名の頭に '@' を付加する。
- 表示する情報は、項目名リストを与えれば良い。
○画像表示指示
- 指示は、表示形式(画像と付帯情報)を与える。
- 一度与えた情報のままで、自由に表示形式を変更できる。
- 頁の概念で制御する。
- 最初、前、次、最後の頁の制御ができる。
- 表示頁が変化すればイベントが発生する。
- ユーザの選択画像はイベントで取得できる。その旨表示ができる。選択は複数可能。
●プログラミング仕様
○Enum/Structure
Public Enum ShowMode
Thumb
ThumbContact
SmallWeb
LargeWeb
LargeWebAuto
'画像を表示領域に合せて自動縮小する
Monitor
MonitorAuto
Print
End Enum
Public Enum PhotoSize
UnKnown = -1
Thumb
SmallWeb
LargeWeb
Monitor
Print
End Enum
Public Enum InfoMode
Non
Brief
Detail
'項目名あり
DetailUnTitled
'項目名なし
End Enum
Public Structure PageStatus
'表示頁が変化した時得られる構造体
Public PageCount As Integer
Public CurrentPage As Integer
Public TopStatus As Boolean
'最初の頁への制御に意味があるかないか
Public PreStatus As Boolean
Public NextStatus As Boolean
Public LastStatus As Boolean
End Structure
○イベント
- Event PageChanged(ByVal sender As Object, ByVal Page As Integer, ByVal Status As PageStatus)
- Event PhotoSelected(ByVal sender As Object, ByVal Index As Integer)
○プロパティ
- Default Property Item(Col As Integer, Row As Integer) As String
取り込まれている付帯情報のアイテムにアクセスする。書込みは、Col = 0 以外でできる。書込みがあれば、直ちに表示に反映される。
- Property ShowMode() As ShowMode
- Property InfoMode() As InfoMode
- Property PageInfoEnable() As Boolean
- Property CurrentSelectEnable() As Boolean
その時マウスが位置している(ムーブ、ホーバー)画像を選ぶかどうか
- ReadOnly Property CurrentSelect() As Integer
- ReadOnly Property IsOnImage() As Boolean
CurrentSelect で更に画像の上の場合、True
- ReadOnly Property CurrentPhotoSize() As PhotoSize
- ReadOnly Property CurrentTopImage() As Integer
現在表示されている頁の左上の画像のインデックス
- Property HOffSet() As Integer
- Property VOffSet() As Integer
- Property BaseColor() As Color
- Property InfoColor() As Color
- Property LineColor() As Color
- Property SelectShape() As String
選択画像を示す文字(記号)。デフォールトは、●
- Property SelectColor() As Color
- Property MarkShape() As String
マーク画像を示す文字(記号)。デフォールトは、■
- Property MarkColor() As Color
- Property SelectOne(ByVal Index As Integer) As Integer
- Property MarkOne(ByVal Index As Integer) As Integer
CurrentSelect：マウスのクリックが不要でマウスポインタが載っている画像のみを選択する。
Select：マウス左クリックにて選択する。複数選択できる。
Mark：マウス左クリックにてマークする。複数マークできる。
SelectOne/MarkOne：このプロパティをオン(1)にすれば選択/マーク表示がされる。
Select と Mark は、使う方の自由。
○メソッド
- Sub PhotoInfo(ByRef PInfo(,) As String, ByRef Title() As String, ByRef
BInfo() As String, ByRef DInfo() As String)
PInfo(0,k) に基本パス、Pinfo(1,k) に写真番号、Pinfo(1+m,k) に付帯情報を与える。
Title にて全ての付帯情報の項目名を与える。
BInfo に簡易情報としての項目名リストを与える。
DInfo に詳細情報としての項目名リストを与える。
項目名に '@' が付いている場合は、内容が空白時表示が省略される。
- Sub PhotoInfoDirect(ByRef PInfo(,) As String, ByVal FHead() As String)
非写真ライブラリの画像を指定する。
- Sub ShowPage(ByVal Page As Integer)
Page を現在のShowMode で表示する
- Friend Sub ShowImage(ByVal ImageIndex As Integer)
'隠しメソッドで、ImageIndexの画像が必ず含まれる頁を表示する。
- Sub ShowTop()
- Sub ShowPre()
- Sub ShowNext()
- Sub ShowLast()
- Function SelectedList() As Integer()
- Function UnSelectAll()
●使い方
- フォーム表示か全面表示かはコントロールの貼り付けられた環境で決まる。
- PhotoInfoメソッドで写真情報を与える。
- 必要であれば、ShowMode、InfoMode を設定する。それぞれ初期値は、一覧表示、簡易情報である。
- ShowTopメソッドで最初の表示を行う。
- 表示頁制御のUI は、このコントロールには含まれないので、コントロール外部で決める。メニューやツールボタン、キーボードなど自由である。
- 表示形式や情報形式の切り替えなどもコントロール外部で決める。メニューやツールボタン、キーボードなど自由である。コンテキストメニューが便利が良いと思う。
- 画像選択は、イベントがあるので、それを処理するかしないかは自由である。処理すれば、選択画像をユーザは判別できる。
CurrentSelect(黄色太枠) とコンテキストメニューの例
●ソフトウェア処理
- 表示画像のリフレッシュをなくすために、原画表示以外は、画像はバックグランドイメージにしている。
- 付帯情報はPaintイベントで描画している。
- 原画表示では、ガイド画像をThumb
で表示し、その上の矩形マークをマウスでドラッグすれば主画像が移動するところまではコントロールの機能となっている。主画像をピクセル単位や、任意の単位で移動するには、以下のメソッドを利用する。この場合のUI
は、プログラミングが必要となる。
・Sub MoveOrgImage(ByVal dX As Single, ByVal dY As Single)
dX/dY：画像の中心の移動量をピクセルで示す。負であれば、X/Y が減少する。
・Sub HomeOrgImage()
主画像の中心を表示領域の中心に合せる。