Welcome Guest! To enable all features, please Login or Register.



Last Go to last post Unread Go to first unread post
#1 Posted : Wednesday, March 1, 2017 6:36:43 AM(UTC)


Groups: Registered
Posts: 17

Thanks: 1 times


I have a scenario where I have to add a predrawn and filled ellipse on the page with set dimensions on mouse click. The dot needs to appear where the mouse click occurred. Is this possible
If so how can this be accomplished. I am using the HTML5/ javascript library


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 accountor Register a new forum account.

#2 Posted : Wednesday, March 8, 2017 10:52:16 AM(UTC)


Groups: Registered, Tech Support, Administrators
Posts: 71

Was thanked: 4 time(s) in 3 post(s)

You can use the AutomationPointerDown event on the IAnnAutomationControl to capture the mouse click:


This event's AnnPointerEventArgs will return you the location of the mouse click so that you can use that for knowing where to place the annotation:


You will then need to convert that location to container coordinates so the annotation is shown in the ImageViewer in the correct location. You can use the PointToContainerCoordinates function to translate the mouse click point correctly:


Then you would need to create a new AnnEllipseObject, set it's properties that you wish (including size, colors, and location), then add the newly created annotation to the container. I have put together some code that shows exactly how this would be done:


automationControl.automationPointerDown.add(function (sender, e) {
      // Set the size of the ellipse
      var ellipseWidth = 500;
      var ellipseHeight = 500;
      // Get the container to add the annotation to
      var container = automation.container;
      // Convert the mouse click point to container coordinates
      var displayPoint = container.mapper.pointToContainerCoordinates(e.location, lt.Annotations.Core.AnnFixedStateOperations.none);
      // Add a filled ellipse object
      var ellipseObj = new lt.Annotations.Core.AnnEllipseObject();
      // Set the points for the ellipse (I used the center of the ellipse as where to draw the annotation)
      ellipseObj.get_points().add(lt.LeadPointD.create(displayPoint.x - (ellipseWidth / 2), displayPoint.y - (ellipseHeight / 2)));
      ellipseObj.get_points().add(lt.LeadPointD.create(displayPoint.x - (ellipseWidth / 2) + ellipseWidth, displayPoint.y - (ellipseHeight / 2)));
      ellipseObj.get_points().add(lt.LeadPointD.create(displayPoint.x - (ellipseWidth / 2) + ellipseWidth, displayPoint.y - (ellipseHeight / 2) + ellipseHeight));
      ellipseObj.get_points().add(lt.LeadPointD.create(displayPoint.x - (ellipseWidth / 2), displayPoint.y - (ellipseHeight / 2) + ellipseHeight));
      // Set the stroke (border size/color)
      ellipseObj.set_stroke(lt.Annotations.Core.AnnStroke.create(lt.Annotations.Core.AnnSolidColorBrush.create("red"), lt.LeadLengthD.create(3)));
      // Set the fill (color to fill the ellipse with)
      // Add the object to the automation container
      // Force the automation to redraw its content so you can see the new annotation

If you wish to see this in action, I started with my forum post about setting default properties on an annotation (which is just a bare bones project for JS annotations) and added the code above to it:

Aaron Brasington
Developer Support Engineer
LEAD Technologies, Inc.

You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

Powered by YAF.NET | YAF.NET © 2003-2024, Yet Another Forum.NET
This page was generated in 0.066 seconds.