LEADTOOLSコントロール(Leadtools.Topics.Controlsアセンブリ)

フレームを表示

ImageViewerクラスは、組み込みリッチとパニング、ズーム、拡大鏡、ラバーバンディングとより多くの完全にカスタマイズ可能で拡張可能なユーザーインターフェース対話操作サポートをサポートします。マウスとタッチの両方の入力をサポートします。

対話モードを使うために、ImageViewerInteractiveModeに由来するタイプの1つのインスタンスを作成して、ImageViewer.InteractiveModesコレクションにそれを追加します。たとえば:


             // Create an instance of Pan/Zoom interactive mode
             ImageViewerPanZoomInteractiveMode mode = new ImageViewerPanZoomInteractiveMode();
             // Add it to the viewer
             imageViewer.InteractiveModes.Add(mode);
             

上記の例のようにビューワをセットアップし、ビューワ表面上でマウスをクリックしてドラッグすると、画像がパンされます。CTRLキーを押しながらクリックやドラッグをすると、画像が拡大縮小されます。同様に、タッチ入力をサポートするデバイス上で、2本の指でドラッグして拡大縮小するとき、押してドラッグすると画像がパンされます。

ImageViewerは、組み込まれる以下と完全に機能対話モードをサポートします:

対話モード 説明
ImageViewerPanZoomInteractiveMode

インタラクティブパンとズームユーザーインターフェース機能性をImageViewerへ供給します

ImageViewerZoomToInteractiveMode

マウスまたはタッチを用いてユーザーによって作成されるimage長方形へのズーム

ImageViewerMagnifyGlassInteractiveMode

マウスまたはタッチの下でimageの部分を拡大します

ImageViewerSpyGlassInteractiveMode

汎用的なスパイガラスの対話モード

ImageViewerCenterAtInteractiveMode

ユーザーのマウスクリックまたはタップのタッチに応じて画像を中心にします(任意で拡大縮小します)。

ImageViewerZoomAtInteractiveMode

ユーザーパソコンのマウスをクリックすることまたはタッチのあたりのimageがタップするズーム

ImageViewerRubberBandInteractiveMode

マウスまたはタッチを使用して画像の上に一時的な四角形を描画します。ユーザー定義操作における関心領域の描画など、追加機能を実行するために使用できます。

ImageViewerNoneInteractiveMode

空の対話モード

ImageViewerAutoPanInteractiveMode

自動的に、ユーザーがビューワのエッジの近くでドラッグしているとき、方向にimageをパンします

ImageViewerActiveItemInteractiveMode

ユーザーパソコンのマウスをクリックすることのアクティブな項目またはタッチがタップする変更

ImageViewerAddRegionInteractiveMode

imageにリージョンを追加します

ImageViewerFloaterInteractiveMode

入力されるマウスまたはタッチを用いてimageのフローターのドラッグして、大きさを変更することのサポート

ImageViewerPagerInteractiveMode

ユーザーがビューワ面でドラッグするとき、複数ページのimageのページを上下に反転します

ImageViewerSelectItemsInteractiveMode

入力されるマウスまたはタッチを用いて単一のおよびマルチ選択サポートを提供します

これらの対話モードには、さらに詳細な操作のために完全に拡張可能なだけでなくさらに動作をカスタマイズするために、追加の機能性があります。

ImageViewer.InteractiveModesプロパティはコレクションです、それゆえに、ビューワに目的であるのと同じくらい多くのモードを追加することができます。これは、以下に許可します:

以下のサンプルは、このコレクションを使う方法を説明するために、下記のすべてのコードスニペットにより用いられるでしょう。


             // Create a new image viewer instance using the default constructor
             ImageViewer imageViewer = new ImageViewer();
             // Set some properties
             imageViewer.Dock = DockStyle.Fill;
             // Add it to the form
             this.Controls.Add(imageViewer);
             // Load an image into it
             using (RasterCodecs codecs = new RasterCodecs())
                imageViewer.Image = codecs.Load(@"C:\Users\Public\Documents\LEADTOOLS Images\Ocr1.tif", 1);
             

どのモードが入力アクションを処理するかは、以下に依存します:

コレクションのモードの順序

コレクション(インデックス0で)の上のモードは、アクションを処理する最初の可能性があります。このモードがアクションを処理しないならば、それはリスト(任意であるならば)で次のモードに渡されます。

上のサンプルに、以下のcodeを追加します:


             // Add Pan/Zoom mode first
             ImageViewerPanZoomInteractiveMode panZoomMode = new ImageViewerPanZoomInteractiveMode();
             imageViewer.InteractiveModes.Add(panZoomMode);
             // And Rubber Band mode second
             ImageViewerRubberBandInteractiveMode rubberBandMode = new ImageViewerRubberBandInteractiveMode();
             imageViewer.InteractiveModes.Add(rubberBandMode);
             

サンプルを実行して、パン/ズームだけが使えることがわかります、ラバーバンドは機能しません。ここで、変更codeは、これに合います:


             // And Rubber band mode first
             ImageViewerRubberBandInteractiveMode rubberBandMode = new ImageViewerRubberBandInteractiveMode();
             imageViewer.InteractiveModes.Add(rubberBandMode);
             // Add Pan/Zoom mode second
             ImageViewerPanZoomInteractiveMode panZoomMode = new ImageViewerPanZoomInteractiveMode();
             imageViewer.InteractiveModes.Add(panZoomMode);
             

サンプルを実行して、ラバーバンドは描画できますが、パンやズームはできなくなっていることを確認します。

コレクションを使って項目を追加や削除したり別の場所に挿入したりすることで順序を変えることもできます。

ImageViewerInteractiveMode.IsEnabledの値

無効にされるモードは、決して実行しないで、すべてのイベントを無視するというわけではありません。(IsEnabledは、そばにtrueです)デフォルト。

以下のようにサンプルでcodeを変更します:


             // And Rubber band first
             ImageViewerRubberBandInteractiveMode rubberBandMode = new ImageViewerRubberBandInteractiveMode();
             // But disable it
             rubberBandMode.IsEnabled = false;
             imageViewer.InteractiveModes.Add(rubberBandMode);
             // Add Pan/Zoom mode second
             ImageViewerPanZoomInteractiveMode panZoomMode = new ImageViewerPanZoomInteractiveMode();
             imageViewer.InteractiveModes.Add(panZoomMode);
             

ラバーバンドが最初のモードであってもサンプルを実行します。これは役に立ちませんが、パンやズームは役立ちます。

これは、InteractiveEventArgs.IsHandledプロパティを用いることにより各々のモードによって処理されます。

ImageViewerInteractiveMode.MouseButtonsの値

デバイスがマウス入力をサポートするとき、使われます。この値はそうですMouseButtons.Left、しかし、様々なボタンに対話モードを関連づけるためにそれを変更することができます。

以下のようにサンプルでcodeを変更します:


             // And Rubber band first
             ImageViewerRubberBandInteractiveMode rubberBandMode = new ImageViewerRubberBandInteractiveMode();
             // Assign it to left mouse button (this is the default)
             rubberBandMode.MouseButtons = MouseButtons.Left;
             imageViewer.InteractiveModes.Add(rubberBandMode);
             // Add Pan/Zoom mode second
             ImageViewerPanZoomInteractiveMode panZoomMode = new ImageViewerPanZoomInteractiveMode();
             // Assign to the right mouse button
             panZoomMode.MouseButtons = MouseButtons.Right;
             imageViewer.InteractiveModes.Add(panZoomMode);
             

サンプルを実行します。左マウスボタンをつかるとラバーバンドが描画されます。右マウスボタンを使用するとパンやズームを行えます。

複数のモードが同じマウスボタンに関連づけられるとき、IsEnabledの方法と状態の順序はまだ適用します。

マウスをサポートしないタッチデバイスで、それに注意します。タッチ入力は、左マウスボタンとみなされます。他のどのマウスボタンにもモードを関連づけることは、エフェクトを持っていません。しかし、アプリケーションが両方のマウスをサポートして、イベント(たとえば、ウェブアプリケーション)をタッチするように設計されているならば、アプリケーションがマウスまたは両方のマウスとタッチをサポートするデスクトップブラウザで動作しているとき、追加の機能性のためにモードを左右のマウスボタンに割り当てることができます。

対話モードMouseButtonsプロパティを値の組合せに設定することもできます。たとえばMouseButtons.Left | MouseButtons.Right。どちらのマウスボタンでもクリックされるとき、これは実行するためにモードを指示します。

MouseButtonsの値がそうであるとき、若干の対話モードは実行することができますMouseButtons.None。たとえば:


             // Add auto-pan attached to left mouse button
             ImageViewerAutoPanInteractiveMode autoPanMode = new ImageViewerAutoPanInteractiveMode();
             autoPanMode.MouseButtons = MouseButtons.Left;
             imageViewer.InteractiveModes.Add(autoPanMode);
             

サンプルを実行して、クリックして、マウスをビューワのエッジの方へ動かして、それがどのようにその方向にimageをパンするか見ます。すぐに、以下のように変更します:


             // Add auto-pan, not attached to any button
             ImageViewerAutoPanInteractiveMode autoPanMode = new ImageViewerAutoPanInteractiveMode();
             autoPanMode.MouseButtons = MouseButtons.None;
             imageViewer.InteractiveModes.Add(autoPanMode);
             

マウスボタンなしがクリックされるとき、サンプルを実行して、自動パンがどのようにここで機能するか見ます。

ImageViewerInteractiveMode.CanStartWorkの値

この仮想メソッドは、WorkOnBoundsの値などの標準状態(上述のIsEnabledMouseButtonsプロパティなどの)ならびに任意のさらにカスタム状態を確認するために、ベースクラスによって呼び出されます、ItemPart

複数の項目を使うために、サンプルでcodeを変更します:


             // Create a new image viewer instance with a vertical layout
             ImageViewerViewLayout viewLayout = new ImageViewerVerticalViewLayout();
             ImageViewer imageViewer = new ImageViewer(viewLayout);
             // Set some properties
             imageViewer.Dock = DockStyle.Fill;
             imageViewer.BackColor = Color.Bisque;
             // Add a border (need some padding as well)
             imageViewer.ImageBorderThickness = 1;
             // Add some padding
             imageViewer.ItemPadding = new Padding(80);
             // Use a border around the items so we can see them
             imageViewer.ItemBackgroundColor = Color.Yellow;
             imageViewer.ItemBorderThickness = 1;
             // Add it to the form
             this.Controls.Add(imageViewer);
             imageViewer.BringToFront();
            
             // Add a couple of items
             imageViewer.Items.AddFromImageFile(@"C:\Users\Public\Documents\LEADTOOLS Images\sample1.png", 1);
             imageViewer.Items.AddFromImageFile(@"C:\Users\Public\Documents\LEADTOOLS Images\sample2.png", 1);
             

すぐに、以下の対話モードを追加します:


             ImageViewerRubberBandInteractiveMode mode = new ImageViewerRubberBandInteractiveMode();
             imageViewer.InteractiveModes.Add(mode);
             

ラバーバンドを黄色の項目ボックスの外側に描画しようとするとモードが実行されないことを確認してください。これは、ItemPartのデフォルト値がコンテンツである、そして、WorkOnBoundsのデフォルト値がtrueであるからです。意味:項目のコンテンツ(項目の中に)一部の上で機能するだけです。モードは項目に関してヒットテストを実行します、そして、状態が満たされないならば、それは実行しません。

以下のようにcodeを変更します:


             ImageViewerRubberBandInteractiveMode mode = new ImageViewerRubberBandInteractiveMode();         
             mode.WorkOnBounds = false;
             imageViewer.InteractiveModes.Add(mode);
             

その時、たとえ部分がまだコンテンツであるとしても、この値とerformヒットテストでないのを無視するためにモードを指示しました。コードを実行して、ビューワコントロール内部の部分をパンやズームできることを確認してください。

アイテムの特定の部分の上で機能するために、そうする必要があります:

たとえば、このcodeは、ラバーバンドが項目のimage一部の上で機能するだけのことを確認します。


             ImageViewerRubberBandInteractiveMode mode = new ImageViewerRubberBandInteractiveMode();
             mode.AutoItemMode = ImageViewerAutoItemMode.AutoSet;
             mode.ItemPart = ImageViewerItemPart.Image;
             mode.WorkOnBounds = true;
             imageViewer.InteractiveModes.Add(mode);
             

最後に。モードを特定の項目の研究に制限することができます。以下により、ラバーバンドは2つ目の項目(インデックス1)のみで機能できます。AutoItemModeをNoneに設定すると、モードでItemプロパティが変更されないことにご注意ください。


             ImageViewerRubberBandInteractiveMode mode = new ImageViewerRubberBandInteractiveMode();
             mode.AutoItemMode = ImageViewerAutoItemMode.None;
             mode.Item = imageViewer.Items[1];
             mode.ItemPart = ImageViewerItemPart.Image;
             mode.WorkOnBounds = true;
             imageViewer.InteractiveModes.Add(mode);
             

このサンプルを実行して、ラバーバンドが第2の項目に関して機能するだけであることがわかります。

コーミング対話モード

若干の対話モードは、追加の機能性を提供するために、他と結合されることができます。たとえば、他のモードが実行する間、ImageViewerAutoPanInteractiveModeはビューワを自動パンするのを許すために他のどのモードとも結合されることができます。

以下のようにcodeを変更します:


             // Add auto-pan, also left button
             ImageViewerAutoPanInteractiveMode autoPanMode = new ImageViewerAutoPanInteractiveMode();
             autoPanMode.MouseButtons = MouseButtons.Left;
             imageViewer.InteractiveModes.Add(autoPanMode);
             // Add rubber-band, left button
             ImageViewerRubberBandInteractiveMode rubberBandMode = new ImageViewerRubberBandInteractiveMode();
             rubberBandMode.MouseButtons = MouseButtons.Left;
             imageViewer.InteractiveModes.Add(rubberBandMode);
             

サンプルを実行します、そして、ラバーバンドを描画して、ビューワのエッジの方へ移動するとき、それがその方向でパンすることがわかります。これは、ラバーバンドに追加の機能性を実行している自動パンです。

これは、自動パンではInteractiveEventArgs.IsHandledの値をTrueに設定しないため、実現します。そのため、イベントはリスト内の次の対話モードに伝播します。ラバーバンド。

参照

参照

ImageViewerを用いて
Windows.Formsによる画像ビューワの利用
画像ビューワ外観
画像ビューワの項目
画像ビューワの境界と変換
画像ビューワの変換
画像ビューワのレイアウト
画像ビューワのレンダリング
画像ビューワのスクローリング
画像ビューワのそのほかのオプション
画像ビューワのシングルアイテムモード
画像ビューワのバーチュアライザ
画像ビューワのドラッグ&ドロップ