LEADTOOLS JavaScript (Leadtools.Controls)
LEAD Technologies, Inc

Transform Property

Example 

Gets the current transformation matrix used for displaying the image.
Syntax
  get_transform();  
!MISSING Scrap '_RTJavaScript_PROPERTY_SYNTAX'!

Property Value

TypeDescription
LeadMatrixThe current transformation matrix.
Remarks

The image viewer will use Transform when drawing the background on top of the foreground canvas. The value of this matrix is re-calculated and maintained whenever the TransformChanged event occur.

Setting a new image, zooming in and applying an effect are all actions that will cause the viewer re-calculate the transformation matrix (Transform) and call OnTransformChanged. This method will call Invalidate and cause the viewer to transition to an invalid state and will require rendering. Invalidate can also be called manually by the user to trigger the viewer to render.

Transform is calculated so as drawing the background canvas does not involve more than:

    
            // context is the foreground canvas
            var matrix = viewer.get_transform();
            context.transform(matrix.get_m11(), matrix.get_m12(), matrix.get_m21(), matrix.get_m22(), matrix.get_offsetX(), matrix.get_offsetY());
            context.drawImage(theBackCanvas, 0, 0, viewer.get_imageSize().get_width(), viewer.get_imageSize().get_height());
            

  
Example

Start with the ImageViewer example, remove all the code inside the example function (search for the // TODO: add example code here comment) and insert the following code:

Open the HTML page in your browser, now when you click the Example button, a blue and red rectangle are drawn on top of the viewer, the blue will have a fixed location and size while the red rectangle will scroll and zoom with the viewer.

  • JavaScript
  •   
     
    example: function SiteLibrary_DefaultPage$example(viewer) {
       // Subscribe to the PostRenderEvent
       viewer.add_postRenderImage(function(sender, e) {
          // Get the context
          var context = e.get_context();
    
          // Draw the fixed blue rectangle at 50, 50 (do not use the viewer transform)
          context.fillStyle = "blue";
          context.fillRect(50, 50, 20, 20);
    
          // Draw the red rectangle. This will be at 50, 50 as well, but will scroll and zoom
          // with the viewer
          var matrix = viewer.get_transform();
          context.save();
          context.transform(matrix.get_m11(), matrix.get_m12(), matrix.get_m21(), matrix.get_m22(), matrix.get_offsetX(), matrix.get_offsetY());
          context.fillStyle = "red";
          context.fillRect(50, 50, 20, 20);
          context.restore();
       });
    
       // Trigger an invalidate
       viewer.invalidate();
    
       var exampleLabel = document.getElementById("exampleLabel");
       exampleLabel.textContent = "Pan and zoom the viewer, blue rectangle is fixed, red rectangle pans and zooms with the viewer";
    },
See Also

Reference

ImageViewer Object
ImageViewer Members

 

 


Products | Support | Contact Us | Copyright Notices

© 2006-2012 All Rights Reserved. LEAD Technologies, Inc.