LEADTOOLS JavaScript(Leadtools.Controls)

フレームを表示

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

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


            // Create an instance of Pan/Zoom interactive mode
            var mode = new lt.Controls.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

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

ImageViewerPagerInteractiveMode

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

ImageViewerSelectItemsInteractiveMode

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

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

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

以下のサンプルは、このコレクションを使う方法を説明するために、下記のすべてのコードスニペットにより用いられるでしょう。前提としますimageViewer、1divインチのIDは、HTMLページです:


            // Get the div item for the viewer
            var div = document.getElementById("imageViewer");
            var createOptions = new lt.Controls.ImageViewerCreateOptions(div);
            // Create a new image viewer instance using the default constructor
            var imageViewer = new lt.Controls.ImageViewer(createOptions);
            // Load an image into it
            imageViewer.imageUrl = "http://localhost/images/image1.png";
            

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

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

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

imageを設定した後に、サンプルに以下のcodeを追加します:


            // Add Pan/Zoom mode first
            var panZoomMode = new lt.Controls.ImageViewerPanZoomInteractiveMode();
            imageViewer.interactiveModes.add(panZoomMode);
            // And Rubber Band mode second
            var rubberBandMode = new lt.Controls.ImageViewerRubberBandInteractiveMode();
            imageViewer.interactiveModes.add(rubberBandMode);
            

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


            // And Rubber Band mode first
            var rubberBandMode = new lt.Controls.ImageViewerRubberBandInteractiveMode();
            imageViewer.interactiveModes.add(rubberBandMode);
            // Add Pan/Zoom mode second
            var panZoomMode = new lt.Controls.ImageViewerPanZoomInteractiveMode();
            imageViewer.interactiveModes.add(panZoomMode);
            

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

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

ImageViewerInteractiveMode.IsEnabledの値

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

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


            // And Rubber band first
            var rubberBandMode = new lt.Controls.ImageViewerRubberBandInteractiveMode();
            // But disable it
            rubberBandMode.isEnabled = false;
            imageViewer.interactiveModes.add(rubberBandMode);
            // Add Pan/Zoom mode second
            var panZoomMode = new lt.Controls.ImageViewerPanZoomInteractiveMode();
            imageViewer.interactiveModes.add(panZoomMode);
            

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

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

ImageViewerInteractiveMode.MouseButtonsの値

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

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


            // And Rubber band first
            var rubberBandMode = new lt.Controls.ImageViewerRubberBandInteractiveMode();
            // Assign it to left mouse button (this is the default)
            rubberBandMode.mouseButtons = lt.Controls.MouseButtons.left;
            imageViewer.interactiveModes.add(rubberBandMode);
            // Add Pan/Zoom mode second
            var panZoomMode = new lt.Controls.ImageViewerPanZoomInteractiveMode();
            // Assign to the right mouse button
            panZoomMode.mouseButtons = lt.Controls.MouseButtons.right;
            imageViewer.interactiveModes.add(panZoomMode);
            

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

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

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

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

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


            // Add auto-pan attached to left mouse button
            var autoPanMode = new lt.Controls.ImageViewerAutoPanInteractiveMode();
            autoPanMode.mouseButtons = lt.Controls.MouseButtons.left;
            imageViewer.interactiveModes.add(autoPanMode);
            

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


            // Add auto-pan, not attached to any button
            var autoPanMode = new lt.Controls.ImageViewerAutoPanInteractiveMode();
            autoPanMode.MouseButtons = lt.Controls.MouseButtons.none;
            imageViewer.interactiveModes.add(autoPanMode);
            

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

ImageViewerInteractiveMode.CanStartWorkの値

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

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


            // Get the div item for the viewer
            var div = document.getElementById("imageViewer");
            // Create a new image viewer instance with a vertical layout
            var createOptions = new lt.Controls.ImageViewerCreateOptions(div);
            createOptions.viewLayout = new lt.Controls.ImageViewerVerticalViewLayout();
            var imageViewer = new lt.Controls.ImageViewer(createOptions);
            // Add a border (need some padding as well)
            imageViewer.imageBorderThickness = 1;
            // Add some padding
            imageViewer.itemPadding = lt.Controls.ControlPadding.createAll(80);
            // Use a border around the items so we can see them
            imageViewer.itemBackgroundColor = "yellow";
            imageViewer.itemBorderThickness = 1;
            // Add a couple of items
            imageViewer.items.addFromUrl("http://localhost/images/image1.png", lt.LeadSizeD.empty);
            imageViewer.items.addFromUrl("http://localhost/images/image2.png", lt.LeadSizeD.empty);
            

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


            var mode = new lt.Controls.ImageViewerRubberBandInteractiveMode();
            imageViewer.interactiveModes.add(mode);
            

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

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


            var mode = new lt.Controls.ImageViewerRubberBandInteractiveMode();
            mode.workOnBounds = false;
            imageViewer.interactiveModes.add(mode);
            

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

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

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


            var mode = new lt.Controls.ImageViewerRubberBandInteractiveMode();
            mode.autoItemMode = lt.Controls.ImageViewerAutoItemMode.autoSet;
            mode.itemPart = lt.Controls.ImageViewerItemPart.image;
            mode.workOnBounds = true;
            imageViewer.interactiveModes.add(mode);
            

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


            var mode = new lt.Controls.ImageViewerRubberBandInteractiveMode();
            mode.autoItemMode = lt.Controls.ImageViewerAutoItemMode.none;
            mode.item = imageViewer.items.item(1);
            mode.itemPart = lt.Controls.ImageViewerItemPart.image;
            mode.workOnBounds = true;
            imageViewer.interactiveModes.add(mode);
            

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

コーミング対話モード

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

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


            // Add auto-pan, also left button
            var autoPanMode = new lt.Controls.ImageViewerAutoPanInteractiveMode();
            autoPanMode.mouseButtons = lt.Controls.MouseButtons.left;
            imageViewer.interactiveModes.add(autoPanMode);
            // Add rubber-band, left button
            var rubberBandMode = new lt.Controls.ImageViewerRubberBandInteractiveMode();
            rubberBandMode.mouseButtons = lt.Controls.MouseButtons.left;
            imageViewer.interactiveModes.add(rubberBandMode);
            

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

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

参照

参照

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