LEADTOOLS JavaScript(Leadtools.Annotations.Core)

フレームを表示

LEADTOOLSアノテーションフレームワークで独自のアノテーションオブジェクトを簡単に作成できます。このチュートリアルは、2つの新しいアノテーションオブジェクトを作成する方法とこれらのオブジェクトをLEADTOOLSアノテーションオートメーションフレームワークに接続するために必須のデザイナーを書き込む方法を示します。

以下のマークアップで新しいHTMLファイルを作成することによって、開始します:


                  <!DOCTYPE html>
                  <html xmlns="http://www.w3.org/1999/xhtml">
                  <head>
                     <title>Demo</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" />
                  <style> #imageViewerDiv { border: 1px solid #000000; width: 400px; height: 400px; background-color: #7F7F7F; } </style>
                  </head>
                  <body onload="pageLoad()">
                     <div id="imageViewerDiv"></div>
                  </body>
                  </html>
               

LEADTOOLS JavaScriptライブラリのために、ページの頭部タグの中に、addはタグのスクリプトを書きます。注意:この例では、LEADTOOLS .jsファイルは、サブフォルダにScriptsあります:


                  <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.Automation.js"></script>
                  <script type="text/javascript" src="Scripts/Leadtools.Annotations.Designers.js"></script>
                  <script type="text/javascript" src="Scripts/Leadtools.Annotations.Rendering.JavaScript.js"></script>
                  <script type="text/javascript" src="Scripts/Leadtools.Annotations.JavaScript.js"></script>
               

作成されているオブジェクトは、単純なオブジェクト(三角形)です。このオブジェクトは三角形の終点のために3ポイントを持っています、そして、それは内部のために三角形エッジと塗りつぶしのためにストロークを使います。

カスタムアノテーションオブジェクトタイプを作成する必要があります。三角形は3つの頂点を持つ多角形なので、AnnPolylineObjectクラスから派生できます。スクリプトタグに以下を追加します:


               ////////////////////////////////////////////////////////////////////////////////
               // AnnTriangleObject
               AnnTriangleObject = function AnnTriangleObject() {
                  AnnTriangleObject.initializeBase(this);
                  this.set_isClosed(true); // triangle is a closed figure
                  this.setId(-99); // set the object id
                  this.set_tag(null);
               }
               AnnTriangleObject.prototype = {
                  create: function AnnTriangleObject$create() {
                     // define the custom annotation object (the triangle is a polyline with only 3 points)
                     return new AnnTriangleObject();
                  }
               }
               AnnTriangleObject.registerClass('AnnTriangleObject', lt.Annotations.Core.AnnPolylineObject);
               

AnnTriangleObjectで使用できる既存の描画や編集のデザイナがないため、独自に作成する必要があります。1番目に、描画デザイナクラス(AnnDrawDesignerに由来する)を作成します。AnnTriangleObjectが:をコード化したあと、スクリプトタグに以下を追加します


               ////////////////////////////////////////////////////////////////////////////////
               // AnnTriangleDrawDesigner
               AnnTriangleDrawDesigner = function AnnTriangleDrawDesigner(automationControl, container, annPolyineObject) {
                  AnnTriangleDrawDesigner.initializeBase(this, [automationControl, container, annPolyineObject]);
               }
               AnnTriangleDrawDesigner.prototype = {
                  // override the onPointerDown method and add 3 points for our triangle
                  onPointerDown: function AnnTriangleDrawDesigner$onPointerDown(sender, e) {
                     var handled = AnnTriangleDrawDesigner.callBaseMethod(this, 'onPointerDown', [sender, e]);
                     if (this.get_targetObject().get_points().get_count() < 3) {
                        this.get_targetObject().set_tag('drawing');
                        if (e.get_button() === lt.Annotations.Core.AnnMouseButton.left) {
                           if (this.startWorking()) {
                              this.get_targetObject().get_points().add(e.get_location());
                           }
                           handled = true;
                        }
                     }
                     return handled;
                  },
               
                  // override the onPointerUp method and end the drawing when we have our 3 points
                  onPointerUp: function AnnTriangleDrawDesigner$onPointerUp(sender, e) {
                     var handled = AnnTriangleDrawDesigner.callBaseMethod(this, 'onPointerUp', [sender, e]);
                     handled = true;
                     if (this.get_targetObject().get_points().get_count() >= 3) {
                        this.get_targetObject().set_tag(null);
                        this.endWorking();
                     }
                     
                     this.invalidate(lt.LeadRectD.empty);
                     return handled;
                  }
               }
               AnnTriangleDrawDesigner.registerClass('AnnTriangleDrawDesigner', lt.Annotations.Designers.AnnDrawDesigner);
               

次に、AnnPolylineEditDesignerクラスから派生した編集デザイナクラスを作成します。AnnTriangleDrawDesignerが:をコード化したあと、スクリプトに以下のcodeを追加します


               ////////////////////////////////////////////////////////////////////////////////
               // AnnTriangleEditDesigner
               // We won't actually need to do any customization of this class.
               AnnTriangleEditDesigner = function AnnTriangleEditDesigner(automationControl, container, annPolylineObject) {
                  AnnTriangleEditDesigner.initializeBase(this, [automationControl, container, annPolylineObject]);
               }
               AnnTriangleEditDesigner.registerClass('AnnTriangleEditDesigner', lt.Annotations.Designers.AnnPolylineEditDesigner);
               

ここで、AnnTriangleObjectのためにカスタムレンダラーを作成することができます。そして、AnnPolylineEditDesignerに由来します」クラス。AnnTriangleDrawDesignerが:をコード化したあと、スクリプトに以下のcodeを追加します


               ////////////////////////////////////////////////////////////////////////////////
               // AnnTriangleRenderer
               AnnTriangleRenderer = function AnnTriangleRenderer() {
                  AnnTriangleRenderer.initializeBase(this);
               }
               AnnTriangleRenderer.prototype = {
               
                  // Override the Render method in order to draw the 3 points as the user creates them.    
                  render: function AnnTriangleRenderer$render(mapper, annObject) {
                     AnnTriangleRenderer.callBaseMethod(this, 'render', [mapper, annObject]);
                     // if we are finished 'drawing', allow the base class AnnPolylineObjectRenderer to handle the job
                     if (annObject.get_tag() !== 'drawing') {
                        return;
                     }
                     var engine = Type.safeCast(this.get_renderingEngine(), lt.Annotations.Rendering.AnnHtml5RenderingEngine);
                     if (engine != null) {
                        var context = engine.get_context();
                        if (context != null) {
                           context.save();
                           var points = mapper.pointsFromContainerCoordinates(annObject.get_points().toArray(), annObject.get_fixedStateOperations());
                           lt.Annotations.Rendering.AnnHtml5RenderingEngine.setStroke(context, lt.Annotations.Core.AnnStroke.create(lt.Annotations.Core.AnnSolidColorBrush.create('green'), lt.LeadLengthD.create(1)));
                           context.beginPath();
                           for (var x = 0; x < points.length; x++) {
                              var point = points[x];
                              if (!point.get_isEmpty()) {
                                 var rect = lt.LeadRectD.create(point.get_x() - 10, point.get_y() - 10, 20, 20);
                                 lt.Annotations.Rendering.AnnHtml5RenderingEngine.drawEllipse(context, rect);
                              }
                           }
                           context.closePath();
                           context.stroke();
                           context.restore();
                        }
                     }
                  }
               }
               AnnTriangleRenderer.registerClass('AnnTriangleRenderer', lt.Annotations.Rendering.AnnPolylineObjectRenderer);
               

最終的な手順は、LEADTOOLS ImageViewerとオートメーション化したアノテーションオブジェクトを接着するcodeを書き込むことです。


                  // Create the custom automation object and hook the designers
                  function createTriangleAutomationObject(annObject) {
                     var automationObj = new lt.Annotations.Automation.AnnAutomationObject();
                     automationObj.set_id(annObject.get_id());
                     automationObj.set_name("Triangle");
                     automationObj.set_drawDesignerType(AnnTriangleDrawDesigner); // hook the custom draw designer
                     automationObj.set_editDesignerType(AnnTriangleEditDesigner); // hook the custom edit designer
                     automationObj.set_runDesignerType(lt.Annotations.Designers.AnnRunDesigner);
                     
                     // set up the thumbs
                     var annTriangleRenderer = new AnnTriangleRenderer();
                     var annPolylineRenderer = this._renderingEngine.get_renderers()[lt.Annotations.Core.AnnObject.polylineObjectId];
                     annTriangleRenderer.set_locationsThumbStyle(annPolylineRenderer.get_locationsThumbStyle());
                     annTriangleRenderer.set_rotateCenterThumbStyle(annPolylineRenderer.get_rotateCenterThumbStyle());
                     annTriangleRenderer.set_rotateGripperThumbStyle(annPolylineRenderer.get_rotateGripperThumbStyle());
                     
                     this._renderingEngine.get_renderers()[annObject.get_id()] = annTriangleRenderer;   // hook the custom renderer
                     automationObj.set_objectTemplate(annObject);
                     return automationObj;
                  }
                  
                  function newTriangle() {
                     // Create the triangle object
                     var triangle = new AnnTriangleObject();
                     var brush = new lt.Annotations.Core.AnnSolidColorBrush();
                     brush.set_color("blue");
                     triangle.set_fill(brush);
                     // Create a user defined automation object
                     var automation = createTriangleAutomationObject(triangle);
                     this._manager.get_objects().add(automation);
                  }
                  
                  function pageLoad() {
                     // Create the viewer
                     var createOptions = new lt.Controls.ImageViewerCreateOptions(document.getElementById('imageViewerDiv'));
                     this._viewer = new lt.Controls.ImageViewer(createOptions);
            
                     // Watch item changed event to set container size and the current object id when the image get loaded
                     _viewer.add_itemChanged(automationControl_ItemChanged);
            
                     // Set the image URL - load using browser support
                     this._viewer.set_imageUrl("http://demo.leadtools.com/images/jpeg/cactus.jpg");
                     // Set viewer image resolution
                     var resolution = lt.LeadSizeD.create(72, 72);
                     _viewer.set_imageResolution(resolution);
            
                     // Create the annotation automation control and attach image viewer to it
                     this._imageViewerAutomationControl = new lt.Annotations.JavaScript.ImageViewerAutomationControl();
                     this._imageViewerAutomationControl.imageViewer = _viewer;
            
                     // Create the automation manager, and default objects
                     this._manager = new lt.Annotations.Automation.AnnAutomationManager();
                     this._manager.createDefaultObjects();
            
                     // Create Html5 rendering engine and bind it to the automation manager
                     this._renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine();
                     this._manager.set_renderingEngine(this._renderingEngine);
            
                     // Create Automation interactive mode instance and bind automation control to it
                     this._automationInteractiveMode = new lt.Annotations.JavaScript.AutomationInteractiveMode();
                     this._automationInteractiveMode.automationControl = _imageViewerAutomationControl;
            
                     // Add automation interactive mode to the viewer interactive modes list and enable it
                     _viewer.get_interactiveModes().beginUpdate();
                     _viewer.get_interactiveModes().add(_automationInteractiveMode);
                     _automationInteractiveMode.set_isEnabled(true);
                     _viewer.get_interactiveModes().endUpdate();
            
                     // Create the annotation automation object and set it to active
                     this._automation = new lt.Annotations.Automation.AnnAutomation(this._manager, _imageViewerAutomationControl);
                     this._automation.set_active(true);
            
                     newTriangle();
                  }
                  
                  function automationControl_ItemChanged(sender, e) {
                     if (e.reason == lt.Controls.ImageViewerItemChangedReason.url) {
            
                     // Get loaded image size
                     var imageSize = this._viewer.get_activeItem().get_imageSize();
            
                     // Set container size with loaded image size
                     var container = this._automation.get_container();
                     container.set_size(container.get_mapper().sizeToContainerCoordinates(lt.LeadSizeD.create(imageSize.get_width(), imageSize.get_height())));
                     
                     // Set traingle object id to the current object id
                     this._manager.set_currentObjectId(-99);
                   }
                  }
               

HTMLファイルを保存して、お気に入りのブラウザでそれをロードします。その後、AnnTriangleObjectを描画するために、ビューワコントロールの中に3つの別々のポイントをクリックして/タップします。

© 1991-2015のLEAD Technologies, Inc. All Rights Reserved.