Use mouse to drag draw a selection rectangle on canvas

Hi
I am looking to create a simple image cropping tool for pictures loaded into a canvas.
I can do the crop no problem by using fixed coordinates in the code.

What I am struggling with is how to draw an outline rectangle over the canvas picture and then get the coordinates of that rectangle to do the crop.

Something like this (screenshot from another app that does what I am looking to do)
Screenshot 2020-10-06 at 16.05.54

Can anybody help me out pls?

Thanks
Mark

In short:
In your canvas, you have a Paint event (you can add it if not already present).
You’d then put code like this:

g.ForeColor=RGB(0,255,0) 'Green
g.DrawRectangle SelectionX,SelectionY,SelectionWidth,SelectionHeight

(define the 4 “selection” values as properties of the window)

Use the MouseDown and MouseDrag events to handle the rectangle (in MouseDown, you set SelectionX and SelectionY, invalidate the canvas (Canvas.Invalidate) and finally put “Return True”, to allow the MouseDrag to execute; In MouseDrag, you set SelectionWidth and SelectionHeight by calculating between current mouse position and SelectionX/SelectionY and again Canvas.Invalidate).
Canvas.Invalidate tells the canvas to refresh so the Paint event executes and (re)draw the rectangle.

I found some code in one of my projects, to draw a selection rectangle with or without background color. I put it in a sample project. Maybe this helps a bit?

http://osswald.com/xojo/samples/selectionrect.zip

3 Likes