how to center an image in relation to a container/shape

[Rafamear]

I have a container with an image inside that only defines the height, and then the width remains proportional, but I want the image to be centered so that, if I use an image of another size or that has the right size for this container, it stay centered in the same way.

In short, if I use an image of the same width and height as the container, it remains centered and in the same way, if I use an image that is larger in terms of width, it also stays centered and is not on the left.

i have to put X=-38 to center an image that is not in the same size


image with 150x225


image with a larger width


what should it be (GameImg with X=-38)

Code: Select all

[GameContainer]
Meter=Shape
Shape=Rectangle 0,0,150,225,8 | StrokeWidth 0
Group=Games
X=-5r
Y=-5r

[GameImg]
Meter=Image
ImageName=#ImageGame1#
ImageTint=none
Antialias=1
UpdateDivider=1
Group=Games
X=-38
Y=0
H=225
Container=GameContainer

[GameImgContainer]
Meter=Image
Antialias=1
UpdateDivider=1
Group=Games
X=0
Y=0
W=150
H=225
Container=GameContainer

[Yincognito]

I have a container with an image inside that only defines the height, and then the width remains proportional, but I want the image to be centered so that, if I use an image of another size or that has the right size for this container, it stay centered in the same way.

In short, if I use an image of the same width and height as the container, it remains centered and in the same way, if I use an image that is larger in terms of width, it also stays centered and is not on the left.

i have to put X=-38 to center an image that is not in the same size


image with 150x225


image with a larger width


what should it be (GameImg with X=-38)

Code: Select all

[GameContainer]
Meter=Shape
Shape=Rectangle 0,0,150,225,8 | StrokeWidth 0
Group=Games
X=-5r
Y=-5r

[GameImg]
Meter=Image
ImageName=#ImageGame1#
ImageTint=none
Antialias=1
UpdateDivider=1
Group=Games
X=-38
Y=0
H=225
Container=GameContainer

[GameImgContainer]
Meter=Image
Antialias=1
UpdateDivider=1
Group=Games
X=0
Y=0
W=150
H=225
Container=GameContainer

Your problem has a simple mathematical solution: to center GameImg in relation to GameContainer, the former's X should be half of the difference between the latter's W and the former's W.

So, making:

Code: Select all

[GameImg]
...
X=(([GameContainer:W]-[GameImg:W])/2)
...
DynamicVariables=1

should do. See:
https://docs.rainmeter.net/manual/variables/section-variables/#MeterParameters
https://docs.rainmeter.net/manual/variables/#DynamicVariables

Also note that since the 1st meter in a container is automatically relative to the container's top left corner (e.g. the r relative positioning), we can skip writing r after the formula (just in this case). Otherwise (i.e. if the meter was independent and not part of a container) we'd have to also add [GameContainer:X] to the above value. If you wonder, it's the same idea when centering things vertically, but obviously the used coordinates would have to be their vertical equivalents.

P.S. Not sure what's the role of your 3rd meter above, it looks kinda pointless or some leftover duplicate...

[Rafamear]

Your problem has a simple mathematical solution: to center GameImg in relation to GameContainer, the former's X should be half of the difference between the latter's W and the former's W.

So, making:

Code: Select all

[GameImg]
...
X=(([GameContainer:W]-[GameImg:W])/2)
...
DynamicVariables=1

should do. See:
https://docs.rainmeter.net/manual/variables/section-variables/#MeterParameters
https://docs.rainmeter.net/manual/variables/#DynamicVariables

Also note that since the 1st meter in a container is automatically relative to the container's top left corner (e.g. the r relative positioning), we can skip writing r after the formula (just in this case). Otherwise (i.e. if the meter was independent and not part of a container) we'd have to also add [GameContainer:X] to the above value. If you wonder, it's the same idea when centering things vertically, but obviously the used coordinates would have to be their vertical equivalents.

P.S. Not sure what's the role of your 3rd meter above, it looks kinda pointless or some leftover duplicate...

worked as expected

[Yincognito]

worked as expected

Excellent!