Draw Rotated Text around it's center with RotateTransform

Question

I have this code in C# to draw the rotated text

        Font font = new Font("Arial", 80, FontStyle.Bold);
        int nWidth = pictureBox1.Image.Width;
        int nHeight = pictureBox1.Image.Height;

        Graphics g = Graphics.FromImage(pictureBox1.Image);

        float w = nWidth / 2;
        float h = nHeight / 2;

        g.TranslateTransform(w, h);
        g.RotateTransform(90);

        PointF drawPoint = new PointF(w, h);
        g.DrawString("Hello world", font, Brushes.White, drawPoint);

        Image myImage=new Bitmap(pictureBox1.Image); 

        g.DrawImage(myImage, new Point(0, 0));

        pictureBox1.Image = myImage;
        pictureBox1.Refresh();

without rotate the text is drawn on the center of image, but with RotateTransform it goes half out of the image and the rotation center is way off.

How can I rotate the text only arount it's center ? without affecting the text position on the image.

Take a look at this answer : http://stackoverflow.com/questions/4421381/how-to-rotate-text-in-gdi — aybe, Sep 10 '13 at 19:03
Thanks, but that does not work for me, since I place the text on a large image. So the image is much larger than the text. — Mario, Sep 10 '13 at 20:12

Michael Liu · Accepted Answer · 2013-09-14T03:48:40.083

If you want to draw rotated text at the center of the image, then offset the location of the text by half the measured size of the text:

using (Font font = new Font("Arial", 80, FontStyle.Bold))
using (Graphics g = Graphics.FromImage(pictureBox1.Image))
{
    float w = pictureBox1.Image.Width / 2f;
    float h = pictureBox1.Image.Height / 2f;

    g.TranslateTransform(w, h);
    g.RotateTransform(90);

    SizeF size = g.MeasureString("Hello world", font);
    PointF drawPoint = new PointF(-size.Width / 2f, -size.Height / 2f);
    g.DrawString("Hello world", font, Brushes.White, drawPoint);
}

pictureBox1.Refresh();

(It's a good idea to dispose of Font and Graphics objects when you're done with them, so I've added a couple using statements.)

Variation #1: This snippet positions the upper-left corner of the text at (400, 200) and then rotates the text around that point:

g.TranslateTransform(400, 200);
g.RotateTransform(90);
PointF drawPoint = new PointF(0, 0);
g.DrawString("Hello world", font, Brushes.White, drawPoint);

Variation #2: This snippet positions the upper-left corner of the text at (400, 200) and then rotates the text around the center of the text:

SizeF size = g.MeasureString("Hello world", font);
g.TranslateTransform(400 + size.Width / 2, 200 + size.Height / 2);
g.RotateTransform(90);
PointF drawPoint = new PointF(-size.Width / 2, -size.Height / 2);
g.DrawString("Hello world", font, Brushes.White, drawPoint);

this seems to work if the text is positioned exactly in the center, but what I do if the text will be positioned by the user at a custom position in the image? how can I calculate then the rotation? Let's say at x=400 and y=200 — Mario, Sep 14 '13 at 01:22
@MarioM: Do you mean that you want the top-left corner of the text to stay fixed at x=400, y=200 while the text is rotated? (If not the top-left corner, then about which point should the text be rotated around?) — Michael Liu, Sep 14 '13 at 02:30
Maybe you can sketch a drawing that shows the boundary of the background image, the point at (400, 200), and the position and orientation of "Hello world" relative to that point. — Michael Liu, Sep 14 '13 at 02:41

score 1 · Answer 2 · answered Sep 13 '13 at 01:09

1

When you do the translate, you are already at the center, so you should not draw your text at an offset of that location.

float w = ClientRectangle.Width / 2-50;
float h = ClientRectangle.Height / 2-50;
g.TranslateTransform(w, h);
g.RotateTransform(angle);
PointF drawPoint = new PointF(0, 0);
g.DrawString("Hello world", font, brush, drawPoint);

answered Sep 13 '13 at 01:09

Torgrim Brochmann

269
1
2

your code does not work, I have updated the question, to be much easier. – Mario Sep 13 '13 at 01:48
Code works fine, it is just the relevant portion of it. Try changing PointF drawPoint = new PointF(w, h); to PointF drawPoint = new PointF(0, 0); and rerun. At least on my machine the code you posted above then gives the text starting from the middle and running down the image. I posted a screenshot at this [link](http://tinypic.com/r/65ww/5) – Torgrim Brochmann Sep 13 '13 at 14:21
no, the text should not start from middle and then go down, it should be rotated around it's center, like a propeller – Mario Sep 14 '13 at 01:20

score 0 · Answer 3 · edited May 23 '17 at 11:58

0

How to rotate Text in GDI+? works, but you need to rotate the text block on a coordinate plane whose width and height are both equal to the longest dimension of the block of text. The coordinate plane should be centered on the middle of the text box.

It doesn't work if your coordinate plane is the background image. Notice I changed the values of PointF:

grPhoto.DrawString(m_Copyright,                 //string of text
                crFont,                         //font
                myBrush,                        //Brush
                new PointF(xCenterOfText, yPosFromBottomOfText),  //Position
                StrFormat);                               //Text alignment

Rotating an image is the same thing as rotating a matrix:

http://en.wikipedia.org/wiki/Rotation_matrix

edited May 23 '17 at 11:58

Community

1
1

answered Sep 13 '13 at 00:27

JaneGoodall

1,478
2
15
22

Keeping the text block's center while rotating the block is impossible if the text is close to the edge of the image. If your text block is 100 px wide and 30 px away from the edge, when you rotate it π/2 radians then 20 px will be outside the image. You have no choice but to recenter it. – JaneGoodall Sep 13 '13 at 02:13
well, then it seems that I need that re-center calculation method. – Mario Sep 14 '13 at 01:16

Draw Rotated Text around it's center with RotateTransform

3 Answers3