Need help for image drawing procedure. Incorrect Vector.Rotate transform

How-to Discussions
1

I’m trying to extend some features of standard <Image> element and reimplement OnDraw method. I found SizingContainer on the forum and it has really simplified life. So, my goal is to make transform of texture coordinates possible. At this stage, I simply rotated the tex coordinates by 45 degrees around center but something wrong.

*** Code ***

protected void Draw(DrawContext dc, float2 pos, float2 size, float2 uvPosition, float2 uvSize, texture2D tex) {
    float2 offset = float2(this.LocalTransform.M41 - this.WorldTransform.M41,
                           this.LocalTransform.M42 - this.WorldTransform.M42) / size;

    draw {
        apply Fuse.Drawing.Planar.Rectangle;
        DrawContext: dc;
        Visual: this;
        Position: pos;
        Size: size;
        TexCoord: Vector.Rotate((VertexData.XY - 0.5f), Math.DegreesToRadians(45f)) * uvSize + uvPosition + 0.5f * uvSize;
        ClipPosition: float4(VertexData.X + offset.X, 1f - VertexData.Y + offset.Y, 0f, 1f);
        PixelColor: sample(tex, TexCoord);
    };
}

*** Result ***

Screenshot

Why image skewed after transform?

PS It seems height of “size” or “uvSize” compute not perfectly. Dimention along y-axis slightly stretched compared to the original

2

Hi,

Simply rotating the texture coordinates will not guarantee a uniform stretch. For this to work you have to work out the math to get it to take the aspect (size.X/size.Y) of the rectangle into account. Divide out the aspect, do rotation in linear space, then factor aspect back in.

3

Thanks Anders, it’s work!