Presize automation tool in HTML5

#1 Posted : Monday, October 3, 2016 12:20:12 PM(UTC)

lars

Groups: Registered
Posts: 5

I'm using a rectangle automation tool to zoom part of an image into a separate ImageViewer using HTML5.

I need to presize the tool when it's displayed on the image the first time. Then the user only needs to move and size the rectangle, not click and drag it to size the first time. Is there an example of this in the help documentation? Or can you provide some pointers on how to do this?

I also need to constrain the aspect ration of the rectangle to mimic the aspect ration of the ImageViewer displaying the zoomed image. Seems like I saw something to that effect in the help, but can't find it again.

Thanks!
Chris

#2 Posted : Tuesday, October 4, 2016 4:43:43 PM(UTC)

Hadi

Groups: Manager, Tech Support, Administrators
Posts: 218

Was thanked: 12 time(s) in 12 post(s)

Lars,

I created a HTML5/Javascript project that shows you how to achieve this functionality in the LEADTOOLS SDK. I have the project attached to my reply below.

I am using the AnnAutomation's Edit event to do most of the work here. Since you wanted the aspect ratio to be the same as the image viewer I first resize the rectangle to the aspect ratio and then call ZoomToRect on the second image viewer:

Code:

   automation.add_edit(function (sender, e) {
      if (e.object.rect != null) {
         var ratio = document.getElementById("imageViewer2Div").offsetWidth / document.getElementById("imageViewer2Div").offsetHeight;

         rect = e.object.rect;
         if (ratio > 1)
            rect.height = rect.width / ratio;
         else
            rect.width = rect.height * ratio;

         if (e.object.rect != rect) {
            e.object.rect = rect;

            ZoomToRect(e.object.rect);
         }
      }
   });

and here is my ZoomToRect call:

Code:

function ZoomToRect(rect)
{
   var container = automation.container;
   var ogMatrix = container.mapper.transform;
   container.mapper.updateTransform(lt.LeadMatrix.identity);
   var imageRect = container.mapper.rectFromContainerCoordinates(rect, 0);
   container.mapper.updateTransform(ogMatrix);

   imageViewer2.zoom(lt.Controls.ControlSizeMode.actual, 1, imageViewer2.defaultZoomOrigin);
   imageViewer2.scrollOffset = lt.LeadPointD.create(0, 0);
   imageViewer2.zoomToRect(imageRect);
}

The main thing to remember is that Annotations are in annotation coordinates and is explained in the AnnContainerMapper's remarks section:
https://www.leadtools.co....anncontainermapper.html

This is relevant information from that link:

Quote:

AnnContainerMapper is used for converting values between display, annotations and image coordinates.

In LEADTOOLS Annotations, all the values are stored in annotations units (1/720 of an inch)

File Attachment(s):

Presize_Automation_Tool.zip (555kb) downloaded 55 time(s).

Edited by user Thursday, January 28, 2021 7:56:39 AM(UTC) | Reason: Not specified

Hadi Chami
Developer Support Manager
LEAD Technologies, Inc.

#3 Posted : Wednesday, October 5, 2016 3:41:26 PM(UTC)

lars

Groups: Registered
Posts: 5

Thanks Hadi! Looks perfect.

Chris

Notification

Presize automation tool in HTML5 - Presize automation tool HTML5


	Try the latest version of LEADTOOLS for free for 60 days by downloading the evaluation: https://www.leadtools.com/downloads Wanna join the discussion? Login to your LEADTOOLS Support account or Register a new forum account.