Automatically drawing shapes on button click

#1 Posted : Wednesday, March 1, 2017 6:36:43 AM(UTC)

maneka

Groups: Registered
Posts: 17

Thanks: 1 times

Hi

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

Thanks
Maneka

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

Aaron

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:

https://www.leadtools.co...ationpointerdown_ev.html

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:

https://www.leadtools.co...reventargs~location.html

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:

https://www.leadtools.co...ontainercoordinates.html

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:

Code:


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)
      ellipseObj.set_fill(lt.Annotations.Core.AnnSolidColorBrush.create("green"));
      // Add the object to the automation container
      container.get_children().add(ellipseObj);
      // Force the automation to redraw its content so you can see the new annotation
      automation.invalidate(lt.LeadRectD.empty);
   });

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:

https://www.leadtools.co...-AnnObject-in-Javascript

Aaron Brasington
Developer Support Engineer
LEAD Technologies, Inc.


	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.

Notification

Automatically drawing shapes on button click