New to Telerik UI for WinForms? Start a free 30-day trial
How to Get Click Coordinates Relative to the Image
Updated over 6 months ago
Environment
| Product Version | Product | Author |
|---|---|---|
| 2021.1.223 | RadImageEditor for WinForms | Desislava Yordanova |
Description
When the user clicks over the image in RadImageEditor, we want to get the related image (x,y) coordinates. Now, we get the coordinates relative to the control. But if the user scrolls the image, or if the image zoom value is not 100%, then the mouse click position (x,y) and the related image(x,y) coordinates are different.
This tutorial demonstrates how to get the clicked location relative to the image considering the zoom factor and scroll position:

Solution
It is necessary to subscribe to the ImageEditorElement.CanvasElement.MouseDown event and transform the point in the MouseEventArgs according to the image canvas:
C#
public Form1()
{
InitializeComponent();
this.radImageEditor1.ImageEditorElement.CanvasElement.MouseDown += CanvasElement_MouseDown;
}
private void CanvasElement_MouseDown(object sender, MouseEventArgs e)
{
var m = new RadMatrix(this.radImageEditor1.ImageEditorElement.CanvasElement.TotalTransform);
m.Invert();
Point p = Point.Ceiling(m.TransformPoint(e.Location));
Size drawSize = TelerikDpiHelper.ScaleSize(this.radImageEditor1.ImageEditorElement.CurrentBitmap.Size,
this.radImageEditor1.ImageEditorElement.ZoomFactor);
Point offset = new Point(
(this.radImageEditor1.ImageEditorElement.CanvasElement.Size.Width > drawSize.Width) ?
-(this.radImageEditor1.ImageEditorElement.CanvasElement.Size.Width - drawSize.Width) / 2 : 0,
(this.radImageEditor1.ImageEditorElement.CanvasElement.Size.Height > drawSize.Height) ?
-(this.radImageEditor1.ImageEditorElement.CanvasElement.Size.Height - drawSize.Height) / 2 : 0);
p.Offset(offset);
this.Text = p.ToString();
}