LEADTOOLS JavaScript(Leadtools.Controls)

フレームを表示

ImageViewerは、多重画像レイアウトで多くの項目をサポートします。ただし、一部のアプリケーションではビューワでは1つの画像を使用し、レイアウトをセットアップしたり項目コレクションを処理しようとしない場合があります。この種のアプリケーションのために、ImageViewerは単一の項目モードを提供します。

画像ビューワの項目に記載されているように、項目がビューワにあるならば、1つはアクティブな項目として寄与されます、そして、画像ビューワのレイアウトから、ビューワは項目 ― アクティブな項目 ― で単一の項目を示すImageViewerSingleViewLayoutをサポートします。したがって、常に単一の項目を表示するようビューワをセットアップするのは簡単です。


            // Get the div element for the viewer
            var div = document.getElementById("imageViewer");
            // Create a single view layout
            var layout =  new lt.Controls.ImageViewerSingleViewLayout();
            // Create the viewer, passing this layout
            var createOptions = new lt.Controls.ImageViewerCreateOptions(div);
            createOptions.viewLayout = layout;
            var imageViewer = new lt.Controls.ImageViewer(createOptions);
            // Add an empty item
            var item = new lt.Controls.ImageViewerItem();
            imageViewer.items.add(item);
            // Now, ImageViewer.activeItem is item
            

これは、正確にImageViewerCreateOptions.ViewLayoutのためにnullを渡すとき、起こることです:


            var createOptions = new lt.Controls.ImageViewerCreateOptions(div);
            createOptions.viewLayout = null;
            var imageViewer = new lt.Controls.ImageViewer(createOptions);
            

ビューワがこのようなセットアップであったあと、ビューレイアウトと項目コレクションを忘れて、ただイメージを表示するためにActiveItemプロパティを使うことは簡単です。ビューワにimageを設定します:


            imageViewer.activeItem.image = myImage;
            

またはimageを削除します:


            imageViewer.activeItem.image = null;
            

その変換を取得すること:


            var transform = imageViewer.getItemImageTransform(imageViewer.activeItem);
            

またはimageから制御座標にポイントを変換して:を後退させます


            controlPoint = imageViewer.convertPoint(imageViewer.activeItem, lt.Controls.ImageViewerCoordinateType.image, lt.Controls.ImageViewerCoordinateType.control, imagePoint);
            imagePoint = imageViewer.convertPoint(imageViewer.activeItem, lt.Controls.ImageViewerCoordinateType.control, lt.Controls.ImageViewerCoordinateType.image, controlPoint);
            

ActiveItemプロパティを使うことに加えて、ビューワは、単一の項目モードで使われることができるショートカットメソッドとプロパティも格納します。以下は、これらのショートカットを使用することより上に同じcodeです。ビューワにimageを設定します:


            imageViewer.image = myImage;
            

またはimageを削除します:


            imageViewer.image = null;
            

その変換を取得すること:


            var transform = imageViewer.imageTransform;
            

またはimageから制御座標にポイントを変換して:を後退させます


            controlPoint = imageViewer.convertPoint(null, lt.Controls.ImageViewerCoordinateType.image, lt.Controls.ImageViewerCoordinateType.control, imagePoint);
            imagePoint = imageViewer.convertPoint(null, lt.Controls.ImageViewerCoordinateType.control, lt.Controls.ImageViewerCoordinateType.image, controlPoint);
            

これらのプロパティ/メソッドで、「ビュー」または「項目」のプロパティまたはメソッドを少しでもタッチすることなく、ImageViewerコントロールを使うことができます。これらのショートカットは、アクティブな項目がビューワに追加されることを確認するために、すべての必要なチェックを実行します。たとえば、ImageViewer.Imageは、メソッドがこのように実装されることを取得します:


            if (this.activeItem != null) // Do we have an active item?
               return this.activeItem.image; // Yes, return its image
            else
               return null; // No, return null
            

そして、設定されたメソッド:


            if (this.activeItem != null) // Do we have an active item?
               this.activeItem.image = value; // Yes, set its image
            // Else, nothing to do
            

以下は、すべての単一の項目モードショートカットと対応する内部コードをリストします:

ショートカット 等価物
ImageViewer.Image

ImageViewer.ActiveItem.Image

ImageViewer.Canvas

ImageViewer.ActiveItem.Canvas

ImageViewer.ImageSize

ImageViewer.ActiveItem.Size

ImageViewer.ImageResolution

ImageViewer.ActiveItem.Resolution

ImageViewer.ImageUrl

ImageViewer.ActiveItem.Url

ImageViewer.BackImageUrl

ImageViewer.ActiveItem.BackImageUrl

ImageViewer.LoadImageUrlMode

ImageViewer.ActiveItem.LoadUrlMode

ImageViewer.BackImageLoadImageUrlMode

ImageViewer.ActiveItem.BackImageLoadUrlMode

ImageViewer.HasImage

ImageViewer.ActiveItem.ImageまたはImageViewer.ActiveItem.Canvasは、nullでありません

ImageViewer.ImageTransform

ImageViewer.GetItemImageTransform(ImageViewer.ActiveItem)

ImageViewer.GetImageTransformWithDpi

ImageViewer.GetItemImageTransformWithDpi(ImageViewer.ActiveItem、useDpi)

ImageViewer.Floater

ImageViewer.ActiveItem.Floater

ImageViewer.FloaterTransform

ImageViewer.ActiveItem.FloaterTransform

ImageViewer.ImageBounds

ImageViewer.GetItemViewBounds(ImageViewer.ActiveItem、ImageViewerItemPart.View、false)

ImageViewer.ConvertPointImageViewer.ConvertPointsImageViewer.ConvertRect

アクティブな項目に寄与する項目パラメーターとして、nullを受け取ります

これらのショートカットに加えて、ImageViewerが単一の項目モードで使われる時だけ、以下は使われるメンバです:

メンバ 説明
ImageViewer.AutoResetOptions

新しいimageがビューワに設定されるとき、どの変換値をリセットするべきか決定します。

ImageViewer.Reset

変換値をリセットします

参照

参照

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