Trying to draw Rotated text with CGAffineTransform and MakeRotation appears at wrong location

Question

I'm trying to draw some rotated texts by using the CGAffineTransform.MakeRotation method at specifc location. I also make use of the TranslateCTM, but something must be wrong as rotated texts do not appear aligned and at the correct x, y position where they should appear, here is simple the code I'm using, anyone know where the problem is? :

        public override void Draw (RectangleF rect)
    {
        DrawTextRotated("Hello1",10,100,30);
        DrawTextRotated("Hello2",50,100,60);
        SetNeedsDisplay();          
    }       

    static public float DegreesToRadians(float x) 
    {       
        return (float) (Math.PI * x / 180.0);
    }

    public void DrawTextRotated(string text,int x, int y, int rotDegree)
    {
        CGContext c = UIGraphics.GetCurrentContext();
        c.SaveState();

        c.TextMatrix = CGAffineTransform.MakeRotation((float)DegreesToRadians((float)(-rotDegree)));                        
        c.ConcatCTM(c.TextMatrix); 

        float xxx = ((float)Math.Sin(DegreesToRadians((float)rotDegree))*y);
        float yyy = ((float)Math.Sin(DegreesToRadians((float)rotDegree))*x);

        // Move the context back into the view 
        c.TranslateCTM(-xxx,yyy);

        c.SetTextDrawingMode(CGTextDrawingMode.Fill);
        c.SetShouldSmoothFonts(true);

        MonoTouch.Foundation.NSString str = new MonoTouch.Foundation.NSString(text);            
        SizeF strSize = new SizeF();
        strSize = str.StringSize(UIFont.SystemFontOfSize(12));          

        RectangleF tmpR = new RectangleF(x,y,strSize.Width,strSize.Height);

        str.DrawString(tmpR,UIFont.SystemFontOfSize(12),UILineBreakMode.WordWrap,UITextAlignment.Right);
        c.RestoreState();
    }

Thanks !

Answer 1

Here's some code that will draw text rotated properly about the top-left corner of the text. For the moment, I'm disregarding your use of text alignment.

First, a utility method to draw a marker where we expect the text to show up:

public void DrawMarker(float x, float y)
{
    float SZ = 20;

    CGContext c = UIGraphics.GetCurrentContext();

    c.BeginPath();
    c.AddLines( new [] { new PointF(x-SZ,y), new PointF(x+SZ,y) });
    c.AddLines( new [] { new PointF(x,y-SZ), new PointF(x,y+SZ) });
    c.StrokePath();
}

And the code to draw the text (note I've replaced all int rotations with float, and you may want negate your rotation):

public void DrawTextRotated(string text, float x, float y, float rotDegree)
{
    CGContext c = UIGraphics.GetCurrentContext();
    c.SaveState();

    DrawMarker(x,y);

    // Proper rotation about a point
    var m = CGAffineTransform.MakeTranslation(-x,-y);
    m.Multiply( CGAffineTransform.MakeRotation(DegreesToRadians(rotDegree)));
    m.Multiply( CGAffineTransform.MakeTranslation(x,y));
    c.ConcatCTM( m );

    // Draws text UNDER the point
    // "This point represents the top-left corner of the string’s bounding box."
    //http://developer.apple.com/library/ios/#documentation/UIKit/Reference/NSString_UIKit_Additions/Reference/Reference.html
    NSString ns = new NSString(text);
    UIFont font = UIFont.SystemFontOfSize(12);
    SizeF sz = ns.StringSize(font);
    RectangleF rect = new RectangleF(x,y,sz.Width,sz.Height);
    ns.DrawString( rect, font);

    c.RestoreState();
}

Rotation about a point requires translation of the point to the origin followed by rotation, followed by rotation back to the original point. CGContext.TextMatrix has no effect on NSString.DrawString so you can just use ConcatCTM.

The alignment and line break modes don't have any effect. Since you're using NSString.StringSize, the bounding rectangle fits the entirety of the text, snug up against the left and right edges. If you make the width of the bounding rectangle wider and use UITextAlignment.Right, you'll get proper right alignment, but the text will still rotate around the top left corner of the entire bounding rectangle. Which is not, I'm guessing, what you're expecting.

If you want the text to rotate around the top right corner, let me know and I'll adjust the code accordingly.

Here's the code I used in my test:

DrawTextRotated("Hello 0",100, 50, 0);
DrawTextRotated("Hello 30",100,100,30);
DrawTextRotated("Hello 60",100,150,60);
DrawTextRotated("Hello 90",100,200,90);

Cheers.