LEADTOOLS JavaScript(Leadtools.Controls)

フレームを表示

ImageViewerクラスは、レイアウトを構築して、ビューと項目を提出するために、標準的なマージン、境界とパディングシステム(CSS箱モデル)を使います。

以下の具体例は、概念を説明します:

ビューは、すべての項目の領域さらにビュー境界とパディングの値です。

各項目のコンテンツは、その境界(具体例の灰色の部分)の内側の領域です。

ここに最も外部のものから開始している画像ビューワレイアウトがある。

注意:以下のレイアウトは、画像ビューワが要素Modeを使っていないと仮定します。

プロパティ 説明
ImageViewer.ViewMargin ControlPadding

ビューワクライアント四角形の左上とビューワ境界の間の領域。

ImageViewer.ViewBorderThickness 整数

ビュー境界の厚さ

ImageViewer.ViewPadding ControlPadding

ビュー境界と項目の間の領域

ImageViewer.ItemMargin ControlPadding

項目の左上とパディングしているビュー間の領域

ImageViewer.ItemBorderThickness 整数

項目長方形の厚さ

ImageViewer.ItemPadding ControlPadding

項目境界とimage間の領域

ImageViewer.ImageBorderThickness 整数

image境界の厚さ

ImageViewer.ItemSpacing LeadSizeD

隣接した項目の間のスペーシング。レイアウトに可視項目が複数存在する場合のみ使用されます。

上のすべての値がピクセルにあって、固定である点に現在のズーム値に関係なく注意します。

以下のテーブルは、各々の領域がどのように提出されるかについて示します。

注意:以下のレイアウトは、画像ビューワが要素Modeを使っていないと仮定します。

プロパティ 説明
ImageViewer.ViewMargin

制御背景色

ImageViewer.ViewBorderThickness

ImageViewer.ViewBorderColor

ImageViewer.ViewPadding

制御背景色

ImageViewer.ItemMargin

制御背景色

ImageViewer.ItemBorderThickness

ImageViewer.ItemBorderColorImageViewer.SelectedItemBorderColorImageViewer.HoveredItemBorderColorまたは項目状態に従うImageViewer.ActiveItemBorderColor

ImageViewer.ItemPadding

ImageViewer.ItemBackgroundColorImageViewer.SelectedItemBackgroundColorImageViewer.HoveredItemBackgroundColorまたは項目状態に従うImageViewer.ActiveItemBackgroundColor

ImageViewer.ImageBorderThickness

ImageViewer.ImageBorderColor

表示領域

見方は、上のテーブルにリストされる要素の全てのための領域がImageViewer.ViewMarginを受け取るということです:

パディングとマージンセットと2つの項目によるImageViewer。垂直を用いて、レイアウトを表示します。

ImageViewerは、スクロールバーの値を計算するために、ビューサイズを使います。レイアウトシステムによってピクセル単位で計算される総サイズは、リードオンリーのImageViewer.ViewSizeプロパティから得られることができます。バウンディング四角形(開始位置はクライアントエリアさらにビューマージンです)は、リードオンリーのImageViewer.ViewBoundsプロパティを使用して得られることができます。これらの2つの値は、総レイアウトサイズプラス現在のビュー変換に基づいて計算されます。

ビューは、以下のどれを用いてでも変形されることができます:

すべてのこれらの操作はビュー(ViewSizeViewBounds)を再計算して、スクロール領域を更新します。

ビューは、ViewHorizontalAlignmentViewVerticalAlignmentを用いてビューの中に位置合わせされることができます。

ViewDropShadowプロパティは、ビュー境界のまわりでドロップシャドウを提出するのに用いられることができます。

項目領域

各項目はサイズを持っています、これはImageViewer.ItemSizeプロパティ(たとえば画像ビューワがimageリストとして使われるとき)を使用してビューワですべての項目のために固定されることもできます。または、各項目は、imageが項目で設定されるとき、固定値に設定されることができるか、ビューワによって自動的に計算されることができるそれ自身の項目の大きさ(ImageViewerItem.Size)を持っていることができます。

項目は、ItemHorizontalAlignmentItemVerticalAlignmentを用いてビューの中に位置合わせされることができます。

内部の各項目は、コンテンツ領域です。これは、画像データとオプションのテキストが提出されるところです。imageは、ImageHorizontalAlignmentImageVerticalAlignmentを用いてコンテンツの中に位置合わせされます。これらの値はビューワですべての項目のためにイメージの位置合せを変更して、個々の項目使用イメージの位置合せImageViewerItem.ImageHorizontalAlignmentImageViewerItem.ImageVerticalAlignmentを設定します。

項目がImageViewerItem.Textプロパティでテキスト文字列を格納するならば、画像ビューアーはItemTextFontItemTextColor(または、項目が選択されるならばSelectedItemTextColor)を用いてこのテキストを生成します。ItemTextTrimmingItemTextWrapは、そのサイズが境界ボックスを上回るならば、テキストがどのように提出されるかについて制御するのに必要に応じて用いられることができます。TextHorizontalAlignmentTextVerticalAlignmentは、コンテンツの中にテキストを位置合わせするのに用いられることができます。上のイメージの位置合せと同様で、個々の項目を設定するために、テキスト配置は、ImageViewerItem.TextHorizontalAlignmentImageViewerItem.TextVerticalAlignmentを使います。

ImageViewerItemPart列挙体が、興味があるアイテムの部分に寄与するために、メソッドとプロパティで使われることができます。

ImageDropShadowプロパティは、コンテンツの中にimage境界のまわりでドロップシャドウを提出するのに用いられることができます。

ドロップシャドウ

imageは、ビューのまわりで、または、以下を用いた各項目imageのまわりでドロップシャドウを提出することをサポートします:

メンバ 説明
ViewDropShadow

ビューのドロップシャドウプロパティ。ビュー境界の外で、そして、ビューマージンの中に提出されます。それゆえに、ビューマージン値が目的のドロップシャドウサイズをカバーするのに十分大きいことを確実にしなければなりません。

ImageDropShadow

項目イメージのドロップシャドウプロパティ。image境界の外で、そして、パディングしている項目の中に提出されます。それゆえに、値をパディングしている項目が目的のドロップシャドウサイズをカバーするのに十分大きいことを確実にしなければなりません。

これらのプロパティの各々は、型ControlDropShadowOptionsで、以下のメンバを持っています:

メンバ 説明
IsVisibleな

ドロップシャドウで見える。この値がtrueでないならば、ドロップシャドウは提出されません

カラー

ドロップシャドウのカラー

OffsetX

水平が暗くなるという見解f

OffsetY

垂直方向のシャドウのposition

ぼかし

ぼかし距離

参照

参照

ImageViewerを用いて
HTML5とJavaScriptによる画像ビューワを用いて
画像ビューワコンポーネント
画像ビューワ要素モード
画像ビューワユーザー定義のHTMLディスプレイ
アプリケーションの複数の画像ビューアーを用いて
画像ビューワの項目
画像ビューワの境界と変換
画像ビューワの変換
画像ビューワのレイアウト
画像ビューワのレンダリング
画像ビューワのスクローリング
画像ビューワの対話モード
画像ビューワのそのほかのオプション
画像ビューワのシングルアイテムモード
画像ビューワのドラッグ&ドロップ
画像ビューワ補間