Transform Property

get_transform();
Object.defineProperty('transform');

Property Value

The image viewer will use Transform when drawing the background image or canvas 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 image or 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(theBackImageOrCanvas, 0, 0, viewer.get_imageSize().get_width(), viewer.get_imageSize().get_height());
            

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.

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";
},