Center a rotated image using GDI+

Question

How do I center a rotated image using GDI+?

I've create a small example here illustrating my problem.

GUI

Blank form with a OpenPictureDialog and a PaintBox, aligned to client. Add a DoubleClick event and a OnPaintEvent to the PaintBox.

Code behind

unit Unit1;

interface

uses

  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
  Dialogs, Vcl.ExtCtrls, Vcl.ExtDlgs, GDIPAPI, GDIPOBJ, GDIPUTIL;

type
  TForm1 = class(TForm)
    PaintBox1: TPaintBox;
    OpenPictureDialog1: TOpenPictureDialog;
    procedure PaintBox1Paint(Sender: TObject);
    procedure PaintBox1DblClick(Sender: TObject);
  private
    { Private declarations }
    FImage: TGPImage;
    procedure DrawImage(aMaxWidth, aMaxHeight: Cardinal); overload;
    procedure DrawImage; overload;
  public
    { Public declarations }
  end;

var
  Form1: TForm1;

implementation


{$R *.dfm}

procedure TForm1.DrawImage(aMaxWidth, aMaxHeight: Cardinal);
var
  Ratio: Double;
  Height, Width, HeightOffset, WidthOffset: Cardinal;
begin
  PaintBox1.Canvas.Brush.Color := clWhite;
  FillRect(PaintBox1.Canvas.Handle, Rect(0, 0, aMaxWidth, aMaxHeight), PaintBox1.Canvas.Brush.Handle);

  if FImage = nil then
    exit;

  Ratio := FImage.GetWidth / FImage.GetHeight;

  Height := FImage.GetHeight;
  Width := FImage.GetWidth;

  if (FImage.GetHeight <= aMaxHeight) and (FImage.GetWidth <= aMaxWidth) then
    { do nothing }; // Width and height allready set

  if (FImage.GetHeight <= aMaxHeight) and (FImage.GetWidth > aMaxWidth) then
    Width := Round(FImage.GetHeight * Ratio);

  if (FImage.GetHeight > aMaxHeight) and (FImage.GetWidth > aMaxWidth) then
    if Ratio > 1 then
    begin
      Height := Round(aMaxWidth / Ratio);
      Width := aMaxWidth;
    end
    else
    begin
      Width := Round(aMaxHeight * Ratio);
      Height := aMaxHeight;
    end;

  HeightOffset := (aMaxHeight - Height) div 2;
  WidthOffset := (aMaxWidth - Width) div 2;

  with TGPGraphics.Create(PaintBox1.Canvas.Handle) do
    try
      // RotateTransform(30);
      DrawImage(FImage, WidthOffset, HeightOffset, Width, Height);
    finally
      Free;
    end;
end;

procedure TForm1.DrawImage;
begin
  DrawImage(PaintBox1.Width, PaintBox1.Height);
end;

procedure TForm1.PaintBox1DblClick(Sender: TObject);
begin
  if not OpenPictureDialog1.Execute then
    exit;
  FImage.Free;
  FImage := TGPImage.Create(OpenPictureDialog1.FileName);
  DrawImage;
end;

procedure TForm1.PaintBox1Paint(Sender: TObject);
begin
  DrawImage;
end;

end.

If I do not rotate my image everythings workes fine, but when I call RotateTransform(30); the image is off-center.

I have tried to move the origin:

  with TGPGraphics.Create(PaintBox1.Canvas.Handle) do
    try
      TranslateTransform(WidthOffset + (Width div 2), HeightOffset + (Height div 2));
      RotateTransform(30);
      DrawImage(FImage, WidthOffset, HeightOffset, Width, Height);
    finally
      Free;
    end;

But then the image is not visible.

The result

Using MBo's answer below I ended up with this:

procedure TForm1.DrawImage(aMaxWidth, aMaxHeight: Cardinal; aRotationAngle: Double);
var
  radAngle, Ratio: Double;
  Height, Width: Cardinal;
  Wanted_CX, Wanted_CY: Integer;
  WCX_InRotated, WCY_InRotated, xr, yr: Single;
begin
  PaintBox1.Canvas.Brush.Color := clWhite;
  FillRect(PaintBox1.Canvas.Handle, Rect(0, 0, aMaxWidth, aMaxHeight), PaintBox1.Canvas.Brush.Handle);

  if FImage = nil then
    exit;

  Ratio := FImage.GetWidth / FImage.GetHeight;

  Height := FImage.GetHeight;
  Width := FImage.GetWidth;

  if (FImage.GetHeight <= aMaxHeight) and (FImage.GetWidth <= aMaxWidth) then
    { do nothing }; // Width and height allready set

  if (FImage.GetHeight <= aMaxHeight) and (FImage.GetWidth > aMaxWidth) then
    Width := Round(FImage.GetHeight * Ratio);

  if (FImage.GetHeight > aMaxHeight) and (FImage.GetWidth > aMaxWidth) then
    if Ratio > 1 then
    begin
      Height := Round(aMaxWidth / Ratio);
      Width := aMaxWidth;
    end
    else
    begin
      Width := Round(aMaxHeight * Ratio);
      Height := aMaxHeight;
    end;

  radAngle := DegToRad(aRotationAngle);
  Wanted_CX := PaintBox1.Width div 2;
  Wanted_CY := PaintBox1.Height div 2;
  xr := 0.5 * (Width * Cos(radAngle) - Height * Sin(radAngle)); // shift of rotated center
  yr := 0.5 * (Width * Sin(radAngle) + Height * Cos(radAngle)); // relative to left top corner

  with TGPGraphics.Create(PaintBox1.Canvas.Handle) do
    try
      RotateTransform(aRotationAngle);
      WCX_InRotated := Cos(radAngle) * (Wanted_CX - xr) + Sin(radAngle) * (Wanted_CY - yr);
      WCY_InRotated := -Sin(radAngle) * (Wanted_CX - xr) + Cos(radAngle) * (Wanted_CY - yr);
      DrawImage(FImage, WCX_InRotated, WCY_InRotated);
    finally
      Free;
    end;
end;

Answer 1

Source of problem: DrawImage work in new (rotated) coordinate system, and it is not so simple to draw a picture in wanted place.

Simple example rotates picture and outputs it centered about given point (shown by yellow circle).

var
  FImage: TGPImage;
  w, h, Wanted_CX, Wanted_CY: Integer;
  WCX_InRotated, WCY_InRotated, xr, yr: Single;
  Fi, FiRad: Double;
begin
  FImage := TGPImage.Create('d:\distr\pics\test.bmp'); //220x250
  Fi := 30;
  FiRad := DegToRad(Fi);
  w := FImage.GetWidth;
  h := FImage.GetHeight;
  Wanted_CX := 200;     //position of rotated image center
  Wanted_CY := 200;
  xr := 0.5 * (w * Cos(FiRad) - h * Sin(FiRad)); //shift of rotated center
  yr := 0.5 * (w * Sin(FiRad) + h * Cos(FiRad)); //relative to left top corner
  with TGPGraphics.Create(Canvas.Handle) do
    try
      RotateTransform(Fi); //rotates about left top corner
      //transform windows coordinates into rotated system
      WCX_InRotated := Cos(FiRad) * (Wanted_CX - xr) + Sin(FiRad) * (Wanted_CY  - yr);
      WCY_InRotated := -Sin(FiRad) * (Wanted_CX - xr) + Cos(FiRad) * (Wanted_CY  - yr);
      DrawImage(FImage, WCX_InRotated, WCY_InRotated);
    finally
      Free;
    end;

  Canvas.Brush.Color := clYellow;
  Canvas.Ellipse(200 - 4, 200 - 4, 200 + 5, 200 + 5);
end;