LEADTOOLS JavaScript(Leadtools.Controls)

Zoomメソッド(ImageViewer)

フレームを表示
サンプル 
使用するサイズモード。
目的のズーム値。これは、0より大きい値でなければなりません。1.0の値は100パーセントのズーム、0.5の値は50パーセント、1.5の値は150パーセントに等しい、等です。値は現在のMinimumScaleFactor値以上でなければならなくて、現在のMaximumScaleFactor値以下でなければなりません。
ズーム操作の原点。
ビューのサイズモードを拡大縮小するか変更します。
構文
 function Leadtools.Controls.ImageViewer.zoom( 
   sizeMode ,
   zoomValue ,
   origin 
)

パラメーター

パラメーター説明
sizeModeControlSizeMode使用するサイズモード。
zoomValue目的のズーム値。これは、0より大きい値でなければなりません。1.0の値は100パーセントのズーム、0.5の値は50パーセント、1.5の値は150パーセントに等しい、等です。値は現在のMinimumScaleFactor値以上でなければならなくて、現在のMaximumScaleFactor値以下でなければなりません。
原点LeadPointDズーム操作の原点。
解説

「ビュー」サイズはUpdateTransformによって計算されて、ViewSizeで保存されます。それは、以下のように現在のViewLayoutによって制御されます:

ビューレイアウト 説明
ImageViewerSingleViewLayout

表示サイズは現在のActiveItemのサイズです。Fit Page操作では、アクティブな項目をビューワ内に合わせます。Fit Width操作では、アクティブな項目の幅をビューワ内に合わせます。

ImageViewerVerticalViewLayout

表示サイズは列数のに依存します。たとえば、列数が0の場合、ビューのレイアウトでは、次の行に移動する前に、項目をビューワに水平にできるだけぴったり収まるようにします。カラム数がそれ以外の場合、次の行に移動する前に、コラムを項目の数ぴったりに合わせます。ビューの幅は、いずれの列においても項目の最大全幅です。ビューの高さは、すべての行の全高さです。

ImageViewerHorizontalViewLayout

表示サイズは行のに依存します。たとえば、行数が0の場合、ビューのレイアウトでは、次の行に移動する前に、項目をビューワに垂直にできるだけぴったり収まるようにします。カラム数がそれ以外の場合、次の列に移動する前に、行を項目の数ぴったりに合わせます。ビューの高さは、いずれの行においても項目の最大全高さです。ビューの幅は、すべてのコラムの全幅です。

以下の要因は、ビューの現在のズーム値に影響を及ぼします:

上記の組み合わせの結果、実際のXとYの拡大縮小値になります(たとえばサイズモードがControlSizeMode.Stretchであるならば、様々でしょう)。これらの値は、読み取り専用のXScaleFactorとYScaleFactorからいつでも取得できます。アプリケーションでStretchサイズモードを使用しない場合はScaleFactorを使用できます。これは、xおよびy方向の倍率のうち大きい方を返すヘルパープロパティです(stretch以外のサイズモードでは両方向の倍率は同じになります)。

たとえば、ビューを現在のビューワ領域に合わせるには、次を使います。sizeMode = ControlSizeMode.FitzoomValue = 1。サイズが制御サイズより大きいならば、ビューワはフィットにするためにビューをズームアウトするかもしれません。それゆえに、実際の倍率(メソッドが返ったあと、ScaleFactorで保存されます)は、1でなく、1未満の値です。ビューワは、画像全体をズームアウトしなければなりません。

例:

ビューワを拡大縮小表示するには、現在の倍率を取得し増減値で乗算します。たとえば、ビューワを200%拡大表示する(2倍大きく見せる)には、以下を使います。


            // Multiply the current scale factor by two
            viewer.Zoom(ControlSizeMode.None, viewer.ScaleFactor * 2.0, viewer.DefaultZoomOrigin);
            

以下は、50%(半分の大きさにする)、ビューワをズームアウトします


            // Multiply the current scale factor by half
            viewer.Zoom(ControlSizeMode.None, viewer.ScaleFactor * 0.5, viewer.DefaultZoomOrigin);
            

50%(1.5倍の大きさにする)(使用)ビューワをズームインすること:


            // Multiply the current scale factor by one and a half
            viewer.Zoom(ControlSizeMode.None, viewer.ScaleFactor * 1.5, viewer.DefaultZoomOrigin);
            

そして、25%(4分の1の大きさにする)、ビューワをズームアウトします


            // Multiply the current scale factor by quarter
            viewer.Zoom(ControlSizeMode.None, viewer.ScaleFactor * 0.25, viewer.DefaultZoomOrigin);
            

様々なサイズモードを使用することもできます。たとえば全景を現在のビューワに合わせるには、以下を使います。


            viewer.Zoom(ControlSizeMode.Fit, 1.0, viewer.DefaultZoomOrigin);
            

ここで、倍率として1.0(つまり100%)渡しています。ビューワは、"FIT"を実行するために必要な実際のスケール値を計算するためです。同様に以下は、アスペクト比を維持しつつビューワ全体のの水平方向空間を取るようビュー幅を合わせます。


            viewer.Zoom(ControlSizeMode.FitWidth, 1.0, viewer.DefaultZoomOrigin);
            

すべてのControlSizeModeのものサポートにより、任意のサイズに合わせてズームを適用します。


            viewer.Zoom(ControlSizeMode.Fit, 2.0, viewer.DefaultZoomOrigin);
            

ビューを利用可能なビューワスペースにフィットさせ、2で拡大縮小します。

上記のすべてのサイズモードは、ビューのアスペクト比を維持管理します。そのため、XScaleFactorYScaleFactorの値は同じになります。しかし、ビューをコントロール領域に合わせて各方向を塗りつぶすよう拡張する場合は、以下を使います。


            viewer.Zoom(ControlSizeMode.Stretch, 1.0, viewer.DefaultZoomOrigin);
            

そしてこれは多くの場合、XScaleFactorYScaleFactorの値が異なるという結果になります。

zoomValueは、MinimumScaleFactorMaximumScaleFactor間の値でなければなりません。デフォルト値は、より小さいかより大きな法的倍率値をサポートするために変更されることができます。ただしズームはフレームワークの別の部分(ImageViewerPanZoomInteractiveMode等)によって呼び出されるので、デフォルトのカットオフ値が必要で、ビューワはユーザー制御値の外側にズームしません。最小範囲と最大範囲を超えてzoomValue値を渡しても影響はなく無視されます。

ズームを呼び出してScaleFactorまたはSizeModeの値を変更するたびに、UpdateTransformを内部的に呼び出してビューワ上に要求されたとおりにビューと項目を配置して描画するために必要な変換行列とビューのレイアウトが再計算されます。項目とイメージのためのマトリックスがGetItemTransformまたはGetItemImageTransformを用いてアップデートされることができる間、ビュー変換行列はViewTransformで保存されます。

sizeModeの値は、内部的にビューワによって保存されます(SizeModeに)。ビューワでは、ビューワのサイズが変更されるたびに任意のビューサイズを自動的に再計算します。

通常、ImageViewerコントロールを使って画像を表示する方法は2通りあります。

最初のタイプのアプリケーションでは、任意のサイズモードとズーム値1.0を指定してズームを一度呼び出します。ビューワコントロールサイズが変更するときはいつでも、サイズモードはビューワによって保存されて、適用されます。

2つめのタイプのアプリケーションでは、必要な情報を指定して必要な回数だけズームを呼び出します。これらのアプリケーションは、必要に応じてサイズモードを設定する方法だけでなくズームインアウトボタンを通常持っています。

Zoomメソッドは、更新の問題に対処するだけでなく、ズーム操作の原点も指定できます。DefaultZoomOriginは、ほとんどの場合使用できます。これは、ViewHorizontalAlignmentViewVerticalAlignmentの値によって定義されます。たとえば、ViewHorizontalAlignmentControlAlignment.Nearであるとき、ズーム原点のX値はビューの左端です。ControlAlignment.Centerで、それはビュー幅の中心にあります。ControlAlignment.Nearで最後に、それはビューの右端にあります。ズーム原点は同様にViewVerticalAlignmentで機能し、ビューの上、中央および下端を使います。

ImageViewerPanZoomInteractiveModeImageViewerZoomAtInteractiveModeモードは、行動を実行するために、このメソッドを使います。

詳細は、画像ビューワ外観画像ビューワの変換画像ビューワの境界と変換画像ビューワのレイアウト画像ビューワのレンダリングを参照します。

サンプル

以下のサンプルは、Adobe Acrobat Readerなどの一般的なドキュメントビューワによく似たズーム操作を実装します。

var myImageViewer = this._imageViewer;

// Ratio to use when the user zooms in or out. Change this if another value is needed,
// for example, 2.0 will zoom the viewer in by 200% and out by 50% each time
var _zoomRatio = 1.2;

var updateZoomValueFromView = function () {
   // Get the current scale factor from the viewer and set it in the zoom combo box
   var percentage = myImageViewer.scaleFactor * 100.0;
   var zoomComboBox = document.getElementById("zoomComboBox");
   zoomComboBox.selectedItem = percentage + "%";
};

var initZoom = function (zoomComboBox, zoomInButton, zoomOutButton) {
   // Add support for user typing the zoom value in the combo box directly
   zoomComboBox.onfocusout = function () {
      // When the user moves away from the combo box, make sure it has a valid value
      updateZoomValueFromView();
   };

   zoomComboBox.onkeydown = function (e) {
      // Check if the finished editing by pressing Enter
      if (e.keyCode == 13) {
         // Yes, get the new value
         var value = zoomComboBox.textContent.trim();
         if (value != null && value.length > 0) {
            // Remove the % sign if present
            if (value.endsWith("%"))
               value = value.remove(value.length - 1, 1).Trim();

            // Try to parse the new zoom value
            var percentage = value;
            //if (double.TryParse(value, out percentage)) {
            if (percentage != undefined)
               // Valid value, zoom the viewer
               myImageViewer.zoom(lt.Controls.ControlSizeMode.none, percentage / 100.0, myImageViewer.defaultZoomOrigin);
         }

         // And update the combo box from this value (in case we set a value not in the min/max range)
         updateZoomValueFromView();
      }
   };

   zoomComboBox.addEventListener("change", function () {
      // Get the value from the combo box
      var value = zoomComboBox.value.trim();
      switch (value) {
         case "Actual Size":
            myImageViewer.zoom(lt.Controls.ControlSizeMode.actualSize, 1, myImageViewer.defaultZoomOrigin);
            break;

         case "Fit Page":
            myImageViewer.zoom(lt.Controls.ControlSizeMode.fitAlways, 1, myImageViewer.defaultZoomOrigin);
            break;

         case "Fit Width":
            myImageViewer.zoom(lt.Controls.ControlSizeMode.fitWidth, 1, myImageViewer.defaultZoomOrigin);
            break;

         case "Fit Height":
            myImageViewer.zoom(lt.Controls.ControlSizeMode.fitHeight, 1, myImageViewer.defaultZoomOrigin);
            break;

         default:
            if (value != null && value.length > 0) {
               // A percentage, use it
               var percentage = value.substring(0, value.length - 1);
               myImageViewer.zoom(lt.Controls.ControlSizeMode.none, percentage / 100.0, myImageViewer.defaultZoomOrigin);
            }
            break;
      }
   });

   // For zoom in button, use current ScaleFactor multiplied by the ratio
   zoomInButton.addEventListener("click", function () {
      myImageViewer.zoom(lt.Controls.ControlSizeMode.none, myImageViewer.scaleFactor * _zoomRatio, myImageViewer.defaultZoomOrigin);
   });

   // For zoom out button, use current ScaleFactor divided by the ratio
   zoomOutButton.addEventListener("click", function () {
      myImageViewer.zoom(lt.Controls.ControlSizeMode.none, myImageViewer.scaleFactor / _zoomRatio, myImageViewer.defaultZoomOrigin);
   });

   // Also update the value from the viewer when the transform changed, this happens if the user selects a fit mode,
   // such as fit width or fit page. The viewer will change the scale factor accordingly and we need to update it
   // in our combo box
   // This also takes care of Pan/Zoom interactive mode updating the scale fatcor
   myImageViewer.transformChanged.add(function (sender, e) {
      updateZoomValueFromView();
   });

   // Get the value from the viewer into the combo box
   updateZoomValueFromView();
}

// Create a panel to the top
var panel = document.createElement("div");
panel.style.width = "800";
panel.style.height = "800";
document.body.appendChild(panel);

// Add a combo box for the zoom values
var zoomComboBox = document.createElement("select");
zoomComboBox.id = "zoomComboBox";
zoomComboBox.offsetTop = 8;
zoomComboBox.offsetLeft = 8;

var itemsArray = ["10%", "25%", "50%", "75%", "100%", "125%", "200%", "400%", "800%",
   "1600%", "2400%", "3200%", "6400%", "Actual Size", "Fit Page", "Fit Width", "Fit Height"];

// Add default zoom values
for (var i = 0; i < itemsArray.length; i++) {
   var option = document.createElement("option");
   option.textContent = itemsArray[i];
   zoomComboBox.appendChild(option);
}

panel.appendChild(zoomComboBox);

// Add zoom in and out buttons
var zoomInButton = document.createElement("button");
zoomInButton.textContent = "+";
zoomInButton.offsetTop = zoomComboBox.offsetTop - 1;
zoomInButton.offsetLeft = zoomComboBox.offsetWidth + 8;
panel.appendChild(zoomInButton);

var zoomOutButton = document.createElement("button");
zoomOutButton.textContent = "-";
zoomOutButton.offsetTop = zoomComboBox.offsetTop - 1;
zoomOutButton.offsetLeft = zoomComboBox.offsetWidth + 2;
panel.appendChild(zoomOutButton);

// Set UseDpi to true to view the image at its original resolution
this._imageViewer.useDpi = true;

// Add Pan/Zoom interactive mode
// Click and drag to pan, CTRL-Click and drag to zoom in and out
this._imageViewer.defaultInteractiveMode = new lt.Controls.ImageViewerPanZoomInteractiveMode();

// Initialize the zoom system
initZoom(zoomComboBox, zoomInButton, zoomOutButton);
参照

参照

ImageViewerオブジェクト。
ImageViewerメンバ