LEADTOOLS JavaScript(Leadtools.Controls)

ImageViewerオブジェクト。

フレームを表示
サンプル 
メンバ 
オプションのインタラクティブUI操作で一つ以上のラスターまたはSVGイメージを示すスクロール可能なコントロールを表します。
オブジェクトモデル
構文
function Leadtools.Controls.ImageViewer() 
解説

LEADTOOLS ImageViewerクラスは、オプションのインタラクティブUI操作で一つ以上のイメージを示すコントロールを表します。それは、Adobe AcrobatなどのMS-ペイントまたは複数の項目アプリケーションなどの単一の項目アプリケーションをサポートします。

  1. LEADTOOLS主なデモは、主なimageを表示するために、単一のレイアウトモードで画像ビューワインスタンスを使います

  2. LEADTOOLSドキュメントビューワは、ページのサムネイルを表示するために、垂直方向のレイアウトで画像ビューワインスタンスを使います

  3. そして、主なコンテンツを表示する二重のレイアウトでによるもう一つの画像ビューワインスタンス

ImageViewerは、以下の機能をサポートします

機能性の各々のグループに関するより徹底的な情報のための以下のトピックを参照してください

サンプル

このサンプルはImageViewerを作成して、対話モードをパン/ズームに設定して、それにimageを追加します。

<!DOCTYPE html>
<html>
<head>
   <title>Leadtools Examples</title>
   <meta http-equiv="X-UA-Compatible" content="IE=9" />
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
   <style>
      #imageViewerDiv
      {
         border: 1px solid #000000;
         width: 400px;
         height: 400px;
         background-color: #7F7F7F;
      }
   </style>
   <script type="text/javascript" src="Script/mscorlib.debug.js"></script>
   <script type="text/javascript" src="Script/Leadtools.js"></script>
   <script type="text/javascript" src="Script/Leadtools.Controls.js"></script>
   <script type="text/javascript">
       alert("testing");
       (function () {
           alert("testing2");

         DefaultPage = function DefaultPage() {
         }

         DefaultPage.prototype = {

            example: function SiteLibrary_DefaultPage$example(viewer) {
               // TODO: add example code here
               alert("example code goes here");
            },

            run: function SiteLibrary_DefaultPage$run() {
               // Create the viewer
               var div = document.getElementById("imageViewerDiv");
               var createOptions = new lt.Controls.ImageViewerCreateOptions(div);
               //var createOptions = new lt.Controls.ImageViewerCreateOptions("imageViewerDiv", "myViewer");
               var viewer = new lt.Controls.ImageViewer(createOptions);

               // Set the interactive mode to PanZoom
               var interactiveMode = new lt.Controls.ImageViewerPanZoomInteractiveMode();
               viewer.defaultInteractiveMode = interactiveMode;

                // Set the image URL
               viewer.imageSize = lt.LeadSizeD.create(200, 250);
               viewer.imageUrl = "https://www.leadtools.com/images/boxshots/leadtools-200x250.jpg";

               var exampleButton = document.getElementById("exampleButton");
               var _this = this;
               exampleButton.addEventListener("click", function(e) {
                  _this.example(viewer);
               }, false);
            },

            dispose: function SiteLibrary_DefaultPage$dispose() {
            },
         }

         //DefaultPage.registerClass("DefaultPage", null, ss.IDisposable);
         var page = null;
         var windowLoad = null;
         var windowUnload = null;
         windowLoad = function (e) {
             alert("testing");
            window.removeEventListener("load", windowLoad, false);
            page = new DefaultPage();
            page.run();
            window.addEventListener("unload", windowUnload, false);
         };
         windowUnload = function (e) {
            window.removeEventListener("unload", windowUnload, false);
            page.dispose();
         };
         alert("testing");
         window.addEventListener("load", windowLoad, false);
      })();
   </script>
</head>
<body>
   <p>Press and drag on the image to pan</p>
   <p>Hold down the control key and press and drag on the image or pinch with two fingers to zoom in and out</p>
   <div>
      <input type="button" id="exampleButton" value="Example" />
      <label id="exampleLabel" />
   </div>
   <div id="imageViewerDiv" />
</body>
</html>
参照

参照

ImageViewerメンバ
Leadtools.Controls名前空間