Need help with doing "free transform" with image

[kiaoyoong]

As the title
I really need help with that. I mean in .ini file to make a skin
for example:
====>

Problems are I want all image (squares,...etc) fit and fully fill a frame (as 2nd picture above)

[MerlinTheRed]

I can help you with that but I need a little more information. I don't really know what you are trying to do right now. Perhaps a more detailed sketch of the intended look of your skin would help.

If you want to transform the complete skin like that it's rather easy. If you want to transform only some images/meters inside the skin it's a little more complicated math-wise but not much.

[kiaoyoong]

I'm trying to make a player skin
you know "AlbumCover" image is usually a square
so I want to transform that (only the album cover) to fit with wallpaper

I used TransformationMatrix but it didn't help :-<

[MerlinTheRed]

I re-checked the documentation and found out that the effect you seek sadly is not possible with today's Rainmeter. TransformationMatrix only supports scaling, rotation, translation and skew at the moment. This is due to the fact that TransformationMatrix doesn't let you specify all 8 elements of a full transformation matrix for homogeneous coordinates. I hope this will be implemented someday.

[kiaoyoong]

:-<
anyway..thanks ^__^
....but..
I wonder this
we can do the "perspective" by do "skew" 2 times :-/
or do "skew" and then do "scale"
Can you show me how to do "skew" and "scale" instead T__T

[MerlinTheRed]

You can't accomplish it by doing two skews. Doing two transformations is the same as doing one that combines both. Since it isn't possible with one transformation it's not possible with any number of combined transformations.

Anyway... If you want to transform your image you have to combine three transformations:

1. Move the meter to the origin
2. Apply the transformation
3. Move it back

Moving the meter can be done with the last two elements of the TransformationMatrix:

Code: Select all

T1 = |1 0 -tx|
     |0 1 -ty|

which is the same as:

TransformationMatrix=1;0;0;1;-tx;-ty

If you want to skew the image relative to it's upper left corner you have to move the upper left corner to X=0,Y=0 first. In this case tx is the x position of the image and ty is the y position of the image.

Next you can skew the image by putting something into the antidiagonal of the matrix:

Code: Select all

T2 = |1 c 0|
     |b 1 0|

which is the same as:

TransformationMatrix=1;b;c;1;0;0

If you want to skew horizontally, you vary c and set b to zero. If you want to skew vertically, vary b and set c to zero. You can also vary both and see what happens.

Last you move your image back to where it belongs by doing the opposite of the first transformation:

Code: Select all

T3 = |1 0 tx|
     |0 1 ty|

which is the same as:

TransformationMatrix=1;0;0;1;tx;ty

Since you can't put multiple TransformationMatrix settings in one meter you need to combine the three transformations by multiplying the matrices. The result is this:

Code: Select all

T = | 1, c, -c*ty|
    | b, 1, -b*tx|

Which is the same as:

TransformationMatrix=1;b;c;1;-c*ty;-b*tx

Note that you have to put in actual numbers and calculate the result. TransformationMatrix doesn't accept math formulas.

If you post the relevant sections of your skin's code here I can modify it to show what it looks like in practice. Here is a small example skin:

Code: Select all

[Rainmeter]
Update=1000
Author=MerlinTheRed
AppVersion=2001000
MiddleMouseUpAction=!Refresh #CURRENTCONFIG#
DynamicWindowSize=1

;A big enough background is needed so Rainmeter doesn't clip the transformed image.
[MeterBackground]
Meter=Image
X=0
Y=0
W=100
H=100
SolidColor=0,0,0,128

;white rectangle: original image
[MeterImageUntransformed]
Meter=Image
X=20
Y=35
W=30
H=40
SolidColor=255,255,255

;red quadrilateral: skewed image
[MeterImageTransformed]
Meter=Image
X=20
Y=35
W=30
H=40
SolidColor=255,0,0,128
TransformationMatrix=1;0.5;0.1;1;-3.5;-10
AntiAlias=1

If you want to know how TransformationMatrix really works I recommend reading this:

http://rainmeter.net/cms/Meters-TransformationMatrix
http://rainmeter.net/forum/viewtopic.php?f=15&t=812

[kiaoyoong]

thank you