New to Telerik UI for WinForms? Download free 30-day trial

How to Get Click Coordinates Relative to the Image

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:

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();
}


Sub New()

    InitializeComponent()

    AddHandler Me.RadImageEditor1.ImageEditorElement.CanvasElement.MouseDown, AddressOf CanvasElement_MouseDown 
End Sub

Private Sub CanvasElement_MouseDown(sender As Object, e As MouseEventArgs)
    Dim m = New RadMatrix(Me.RadImageEditor1.ImageEditorElement.CanvasElement.TotalTransform)
    m.Invert()
    Dim p As Point = Point.Ceiling(m.TransformPoint(e.Location))
    Dim drawSize As Size = TelerikDpiHelper.ScaleSize(Me.RadImageEditor1.ImageEditorElement.CurrentBitmap.Size, _
                                                      Me.RadImageEditor1.ImageEditorElement.ZoomFactor)
    Dim offset As Point = New Point(If((Me.RadImageEditor1.ImageEditorElement.CanvasElement.Size.Width > drawSize.Width), _
                                       -(Me.RadImageEditor1.ImageEditorElement.CanvasElement.Size.Width - drawSize.Width) / 2, 0), _
                                   If((Me.RadImageEditor1.ImageEditorElement.CanvasElement.Size.Height > drawSize.Height), _
                                      -(Me.RadImageEditor1.ImageEditorElement.CanvasElement.Size.Height - drawSize.Height) / 2, 0))
    p.Offset(offset)
    Me.Text = p.ToString()
End Sub


See Also

In this article