LEADTOOLS JavaScript(Leadtools.Annotations.Automation)

AnnAutomationManagerオブジェクト。

フレームを表示
サンプル 
メンバ 
アノテーションアプリケーションの自動モードを管理します。
オブジェクトモデル
構文
function Leadtools.Annotations.Automation.AnnAutomationManager() 
解説

AnnAutomationManagerクラスは、かなりいろいろな他のユーザーインターフェースオプションとして、アプリケーションですべてのAnnAutomationオブジェクトのコレクションを保持します。

オートメーション化したアノテーションアプリケーションは、通常アプリケーションにつき1つのAnnAutomationManagerオブジェクトを作成します。

サンプル

以下のサンプルは、オートメーション化したアノテーションアプリケーションを作成します。以下のサンプルは、行と長方形オブジェクトを使うだけです。サンプルは、imageの上でオブジェクトを描画して、オブジェクトを選択して、移動するか、変更させます。

実行するために、このサンプルは、以下の手順を実行します:

  1. ディスクの上のフォルダにとって、お気に入りのテキストエディターにこのサンプルをコピーして、ペーストして、任意の名前(たとえば、「Default.htm」)によるHTMLファイルとして、それを保存します。
  2. 新しいHTMLファイルを格納しているフォルダの中に、名前「スクリプト」でディレクトリを作成します。
  3. 「スクリプト」に<LEADTOOLS_INSTALLDIR>\Bin\JSからサンプルで必須の.jsファイルをコピーします」。
  4. 最後に、先ほど保存したHTMLファイルを、HTML 5をサポートしている任意のブラウザーで開きます。
<!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: 800px;
         height: 800px;
         background-color: #7F7F7F;
      }
   </style>
   <script type="text/javascript" src="Scripts/Leadtools.js"></script>
   <script type="text/javascript" src="Scripts/Leadtools.Controls.js"></script>
   <script type="text/javascript" src="Scripts/Leadtools.Annotations.Core.js"></script>
   <script type="text/javascript" src="Scripts/Leadtools.Annotations.Rendering.js"></script>
   <script type="text/javascript" src="Scripts/Leadtools.Annotations.Designers.js"></script>
   <script type="text/javascript" src="Scripts/Leadtools.Annotations.Automation.js"></script>
   <script type="text/javascript">
      (function () {
         DefaultPage = function DefaultPage() {
         }

         DefaultPage.prototype = {

            // Automation object
            _automation : null,

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

            run: function SiteLibrary_DefaultPage$run() {
               var _this = this;

               // Create the viewer
               var createOptions = new lt.Controls.ImageViewerCreateOptions("imageViewerDiv", "myViewer");
               var viewer = new lt.Controls.ImageViewer(createOptions);

               // PanZoom interactive mode
               var panZoom = new lt.Controls.ImageViewerPanZoomInteractiveMode();

               // Create an instance of the Automation control object that works with LEADTOOLS ImageViewer
               // This is also an interactive mode that we need to use
               var imageViewerAutomationControl = new lt.Annotations.Automation.ImageViewerAutomationControl(viewer);

               // Set the image URL
               viewer.set_imageUrl("Images/Document.jpg");

               // create and set up the automation manager
               var manager = new lt.Annotations.Automation.AnnAutomationManager();

               // Create only the line and rectangle automation objects
               this.createMyAutomationObjects(manager);

               // You can instruct the manager to create the default (all) automation objects.
               // comment out the call to CreateMyAutomationObjects and call this instead:
               //manager.createDefaultObjects();

               // Add the objects to the objects select element
               var currentObjectIdSelect = document.getElementById("currentObjectIdSelect");
               // Add the PanZoom option
               currentObjectIdSelect.options[currentObjectIdSelect.options.length] = new Option("Pan/Zoom", lt.Annotations.Core.AnnObject.none);

               var automationObjCount = manager.get_objects().get_count();
               for (var i = 0; i < automationObjCount; i++) {
                  // Get the object
                  var automationObj = manager.get_objects().get_item(i);

                  // Add its name to the select element
                  var name = automationObj.get_name();
                  var id = automationObj.get_id();
                  currentObjectIdSelect.options[currentObjectIdSelect.options.length] = new Option(name, id);
               }

               // Hook to its change event
               currentObjectIdSelect.addEventListener("change", function() {
                  // Get the object ID
                  var id = parseInt(currentObjectIdSelect.options[currentObjectIdSelect.selectedIndex].value);

                  // Set it as the current object in the manager
                  manager.set_currentObjectId(id);

                  // If this is the "Pan/Zoom" option, then back to pan zoom, otherwise, set our automation control
                  if (id == lt.Annotations.Core.AnnObject.none) {
                     viewer.set_defaultInteractiveMode(panZoom);
                  }
                  else {
                     viewer.set_defaultInteractiveMode(imageViewerAutomationControl);
                  }
               });

               // When the current object ID changes, we need to update our select
               manager.add_currentObjectIdChanged(function(sender, e) {
                  var currentObjectId = manager.get_currentObjectId();
                  for(var i = 0; i < currentObjectIdSelect.options.length; i++) {
                     var id = parseInt(currentObjectIdSelect.options[i].value);
                     if(id === currentObjectId) {
                        currentObjectIdSelect.selectedIndex = i;
                        break;
                     }
                  }
               });

               // Pan zoom by default
               viewer.set_defaultInteractiveMode(panZoom);

               // set up the automation (will create the container as well)
               this._automation = new lt.Annotations.Automation.AnnAutomation(manager, imageViewerAutomationControl);

               // set up this automation as the active one
               this._automation.set_active(true);

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

            createMyAutomationObjects: function createMyAutomationObjects(manager) {
               // Get the automation objects collection
               var automationObjects = manager.get_objects();

               // Set up the select automation object
               var automationObj = new lt.Annotations.Automation.AnnAutomationObject();
               automationObj.set_id(lt.Annotations.Core.AnnObject.selectObjectId);
               automationObj.set_name("Select");
               automationObj.set_drawDesignerType(lt.Annotations.Designers.AnnRectangleDrawDesigner);
               automationObj.set_editDesignerType(lt.Annotations.Designers.AnnSelectionEditDesigner);
               automationObj.set_runDesignerType(null);

               // Create the object template for it
               var selectObj = new lt.Annotations.Core.AnnSelectionObject();
               selectObj.set_stroke(lt.Annotations.Core.AnnStroke.create(lt.Annotations.Core.AnnSolidColorBrush.create("darkgreen"), lt.LeadLengthD.create(2)));
               automationObj.set_objectTemplate(selectObj);

               // Add it to the automation objects of the manager
               automationObjects.add(automationObj);

               // Set up the line automation object
               automationObj = new lt.Annotations.Automation.AnnAutomationObject();
               automationObj.set_id(lt.Annotations.Core.AnnObject.lineObjectId);
               automationObj.set_name("Line");
               automationObj.set_drawDesignerType(lt.Annotations.Designers.AnnLineDrawDesigner);
               automationObj.set_editDesignerType(lt.Annotations.Designers.AnnPolylineEditDesigner);
               automationObj.set_runDesignerType(lt.Annotations.Designers.AnnRunDesigner);

               // Create the object template for it, use the default stroke
               var lineObj = new lt.Annotations.Core.AnnPolylineObject();
               automationObj.set_objectTemplate(lineObj);

               // Add it to the automation objects of the manager
               automationObjects.add(automationObj);

               // Set up the rectangle automation object
               automationObj = new lt.Annotations.Automation.AnnAutomationObject();
               automationObj.set_id(lt.Annotations.Core.AnnObject.rectangleObjectId);
               automationObj.set_name("Rectangle");
               automationObj.set_drawDesignerType(lt.Annotations.Designers.AnnRectangleDrawDesigner);
               automationObj.set_editDesignerType(lt.Annotations.Designers.AnnRectangleEditDesigner);
               automationObj.set_runDesignerType(lt.Annotations.Designers.AnnRunDesigner);

               // Create the object template for it, use the default stroke and fill
               var rectObj = new lt.Annotations.Core.AnnRectangleObject();
               automationObj.set_objectTemplate(rectObj);

               // Add it to the automation objects of the manager
               automationObjects.add(automationObj);

               automationObj = new lt.Annotations.Automation.AnnAutomationObject();
               automationObj.set_id(lt.Annotations.Core.AnnObject.textObjectId);
               automationObj.set_name("Text");
               automationObj.set_drawDesignerType(lt.Annotations.Designers.AnnRectangleDrawDesigner);
               automationObj.set_editDesignerType(lt.Annotations.Designers.AnnTextEditDesigner);
               automationObj.set_runDesignerType(lt.Annotations.Designers.AnnRunDesigner);

               // Create the object template for it, use the default stroke, fill, text and font
               var textObj = new lt.Annotations.Core.AnnTextObject();
               automationObj.set_objectTemplate(textObj);

               // Add it to the automation objects of the manager
               automationObjects.add(automationObj);
            },

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

         DefaultPage.registerClass("DefaultPage", null, ss.IDisposable);
         var page = null;
         var windowLoad = null;
         var windowUnload = null;
         windowLoad = function (e) {
            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();
         };
         window.addEventListener("load", windowLoad, false);
      })();
   </script>
</head>
<body>
   <p>Either Pan/Zoom or Annotations mode. In annotations mode, draw new objects or edit them.</p>
   <div>
      <select id="currentObjectIdSelect">
      </select>
   </div>
   <div>
      <input type="button" id="exampleButton" value="Example" />
      <label id="exampleLabel" />
   </div>
   <div id="imageViewerDiv" />
</body>
</html>
参照

参照

AnnAutomationManagerメンバ
Leadtools.Annotations.Automation名前空間