Center a canvas?

Targets macOS
1

Hi,
Can someone please tell me the best way to keep an image horizontally and vertically centered in the window, no matter what dimension the window is resized to (without the image changing size)?

I have been thinking about this for hours, and cannot work out how to achieve this :frowning:

If I load the image in the canvas.paint event - as soon as the canvas gets stretched due to the user resizing the window, my image will no longer fill up the entire canvas.

Example:
I have a 500 x 500 window, and I need a 200 x 200 image to remain horizontally and vertically centered - even when the window is resized.

Thank you all in advance.

2

Should the canvas resize with the window, but not the image drawn in canvas? Or should the canvas and its image not resize?

3

Eli,
As long as my image remains totally centered in the window when the window is resized - I do not mind how it is done :slight_smile:

4

keep an image horizontally and vertically centered
without the image changing size

… no problem

my image will no longer fill up the entire canvas.

but you said you didnt want the size to change?

Keep an image the same size and centred: (assumes the window is always bigger than the image)

In the window’s paint event (you dont need a canvas)

g.drawpicture thepicture,(self.width - thepicture.width)/2,(self.height - thepicture.height)/2,thepicture.width,thepicture.height,0,0,thepicture.width,thepicture.height

5

Load the image once in open event of the window.
Draw it centered in the window’s paint event.

6

Jeff / Eli,
I can’t do that as there will be other controls in the window.

Basically, my canvas will act as a cover (hiding the window content).
Depending on the user’s action - I will then hide the canvas - revealing the window content underneath.

7

You should be able to keep the canvas 200x200, same size as your image. In the “Resized” and “Resizing” event handlers of your window, add code to set the top and left properties of your canvas.

8

OK, use the same code to centre the canvas, however big you make it.

Once the canvas appears where it should, look at the code which paints the picture inside the canvas.

9

Oh dear - now I’m totally lost :frowning:
The canvas has to be locked to one side, so this makes no sense to my peanut brain :frowning:

10

If the user is resizing the window, how is your window content staying centered, to remain under your centered canvas?

11

Add a property to the window:

Property Window1.ThePicture As Picture

Window1. Resizing event:

Canvas1.Left = (Width - Canvas1.Width) \\ 2 Canvas1.Top = (Height - Canvas1.Height) \\ 2
Canvas1.Open event:

Me.LockLeft = False Me.LockTop = False Me.LockRight = False Me.LockBottom = False ThePicture = ... // Load picture once here
Canvas1.Paint event:

g.DrawPicture(ThePicture, 0, 0, g.Width, g.Height)   // assuming ThePicture has the same size as the canvas
12

Thank you all for the help, but I think I will have to forget this idea, as Retina Kit also comes into the equation, therefore I can only define the image name in the canvas.paint event, as far as I can tell.

The only way I can see this being practical, is if it’s possible to draw an image into the absolute centre of a canvas - that way it doesn’t matter if the canvas gets resized.

My head hurts.
Thank you all anyways. (is anyways a word?) :slight_smile:

13

See Pet Peeves thread.
Or maybe not, unless you have a few hours to waste

14

In the canvas paint event

g.drawpicture thepicture,(me.width - thepicture.width)/2,(me.height - thepicture.height)/2,thepicture.width,thepicture.height,0,0,thepicture.width,thepicture.height
15

Thanks Jeff - that looks more promising.
I will try that now.

Thank you (everyone).

16

Jeff - YOU DA MAN !!!
Works just dandy.
Thank you.

Scott / Eli,
thank you both also - very much appreciated.

17

If you want to align the image for all the alignments and not only center the rule is simple:
0.0 - for top or left
0.5 - for center
1.0 - for bottom or right

so, for example if you want to keep your image linked to the bottom - center:
g.drawpicture thepicture,(me.width - thepicture.width)0.5, (me.height - hepicture.height) 1.0 ,thepicture.width ,thepicture.height ,0 ,0 ,thepicture.width ,thepicture.height