LEADTOOLS Support
Document
Document SDK Questions
Automatically drawing shapes on button click
#1
Posted
:
Wednesday, March 1, 2017 6:36:43 AM(UTC)
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)
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.htmlThis 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.htmlYou 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.htmlThen 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-JavascriptAaron Brasington
Developer Support Engineer
LEAD Technologies, Inc.
![LEAD Logo LEAD Logo](https://www.leadtools.com/images/new-site-images/leadtools-logo-header.png)
LEADTOOLS Support
Document
Document SDK Questions
Automatically drawing shapes on button click
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.