iPhone: Zeichne gedrehten Text?

Question

Ich möchte etwas Text in einer um 90 ° gedrehten Ansicht zeichnen. Ich bin ziemlich neu in der iPhone-Entwicklung und stochern im Internet zeigt eine Reihe von verschiedenen Lösungen. Ich habe ein paar ausprobiert und normalerweise endet mein Text abgeschnitten.

Was geht hier vor? I am Zeichnung in einem ziemlich kleinen Raum (eine Tabellenansicht Zelle), aber es muss einen "richtigen" Weg, dies zu tun ... richtig?

---

Edit: Hier sind ein paar Beispiele. Ich versuche, den Text "" entlang der schwarzen Leiste auf der linken Seite anzuzeigen.

1. Erster Versuch, von RJShearman on the Apple Discussions

   CGContextRef context = UIGraphicsGetCurrentContext(); 
   CGContextSelectFont (context, "Helvetica-Bold", 16.0, kCGEncodingMacRoman); 
   CGContextSetTextDrawingMode (context, kCGTextFill); 
   CGContextSetRGBFillColor(context, 1.0, 0.0, 0.0, 1.0); 
   CGContextSetTextMatrix (context, CGAffineTransformRotate(CGAffineTransformScale(CGAffineTransformIdentity, 1.f, -1.f), M_PI/2)); 
   CGContextShowTextAtPoint (context, 21.0, 55.0, [_cell.number cStringUsingEncoding:NSUTF8StringEncoding], [_cell.number length]); 
   CGContextRestoreGState(context); 
   

   Attempt one. The one and part of the two are clipped out. http://dev.deeptechinc.com/sidney/share/iphonerotation/attempt1.png

2. Zweiter Versuch, von zgombosi on iPhone Dev SDK. Identische Ergebnisse (die Schrift war hier etwas kleiner, so dass es weniger Clipping gibt).

   CGContextRef context = UIGraphicsGetCurrentContext(); 
   CGPoint point = CGPointMake(6.0, 50.0); 
   CGContextSaveGState(context); 
   CGContextTranslateCTM(context, point.x, point.y); 
   CGAffineTransform textTransform = CGAffineTransformMakeRotation(-1.57); 
   CGContextConcatCTM(context, textTransform); 
   CGContextTranslateCTM(context, -point.x, -point.y); 
   [[UIColor redColor] set]; 
   [_cell.number drawAtPoint:point withFont:[UIFont fontWithName:@"Helvetica-Bold" size:14.0]]; 
   CGContextRestoreGState(context); 
   

   Attempt two. There is almost identical clipping http://dev.deeptechinc.com/sidney/share/iphonerotation/attempt2.png

Answer 1

Es stellt sich heraus, dass die Zelle meiner Tabelle war immer initialisiert 44px hoch unabhängig von der Zeilenhöhe, so dass alle meine Zeichnung wurde abgeschnitten 44px von der Spitze der Zelle.

Um größere Zellen zu zeichnen war es notwendig, die Inhalte nach Ansicht der autoresizingMask mit

cellContentView.autoresizingMask = UIViewAutoresizingFlexibleHeight; 

oder

cellContentView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; 

... und drawRect eingestellt mit der richtigen Größe genannt wird. In gewisser Weise ist dies sinnvoll, weil initWithStyle:reuseIdentifier: die Größe der Zelle nicht erwähnt, und nur die Tabellenansicht tatsächlich weiß, wie groß jede Zeile sein wird, basierend auf seiner eigenen Größe und seiner Antwort auf tableView:heightForRowAtIndexPath: .

las ich die Quartz 2D Programming Guide, bis die Zeichnung Modell und Funktionen gestartet Sinn zu machen, und der Code meinen gedrehten Text zu zeichnen wurde einfach und offensichtlich:

CGContextRef context = UIGraphicsGetCurrentContext(); 
CGContextSaveGState(context); 
CGContextRotateCTM(context, -(M_PI/2)); 
[_cell.number drawAtPoint:CGPointMake(-57.0, 5.5) withFont:[UIFont fontWithName:@"Helvetica-Bold" size:16.0]]; 
CGContextRestoreGState(context); 

Danke für die Tipps, es sieht aus wie ich bin alles bereit.

Answer 2

Sie die Methode UITableViewDelegate kennen heightForRowAtIndexPath richtig?

Hier ist ein simple tutorial on various graphics level methods. Vorausgesetzt, Sie wissen, wie groß Ihr Text ist, sollten Sie in der Lage sein, Ihre Tabellenansicht Zeilengröße entsprechend zu bemessen.

Auch würde ich überprüfen, um sicherzustellen, dass die Grenzen nach jeder Transformation tatsächlich Ihren Erwartungen entsprechen. (Verwenden Sie entweder einen Debugger oder eine Log-Anweisung, um dies zu überprüfen).

Answer 3

Hier ist ein Tipp. Ich nehme an, du machst diese Zeichnung in drawRect. Warum zeichnest du nicht einen Rahmen um drawRect, um zu sehen, wie groß der Rect ist und ob du deswegen Clipping bekommst.

Eine Alternative ist, Ihren Text in ein UILabel zu setzen und dann um 90 Grad zu drehen, wenn Sie Ihre Zellen in CellForRowAtIndexPath erstellen.

Answer 4

Nachdem ich entdeckt hatte, dass ich das Folgende an den Anfang meiner Datei hinzufügen musste, mochte ich Matts Ansatz. Sehr einfach.

#define degreesToRadian(x) (M_PI * (x)/180.0) 

mahboudz Vorschlag wird wahrscheinlich Ihr Weg des geringsten Widerstandes sein. Sie können das UILabel 90deg mit diesem drehen: [label setTransform: CGAffineTransformMakeRotation (DegreesToRadians (-90.0f))]; Sie müssen nur Ihre Zellenhöhe basierend auf der Etikettenbreite berechnen. -Matt - Matt Long 10. November bei 0:09

Answer 5

Verwendung: -

label.transform = CGAffineTransformMakeRotation(- 90.0f * M_PI/180.0f); 

wo Etikett das Objekt der UILabel ist.

Answer 6

zu dem, was @Sidnicious sagte, und was ich Stack-Überlauf gesammelt durch aus, ich möchte ein Anwendungsbeispiel geben - angehängt meinen Code vollständig ein Lineal auf der linken Bildschirmseite zu ziehen, mit Zahlen gedreht:

RulerView : UIView 


    // simple testing for iPhones (check for device descriptions to get all iPhones + iPads) 
    - (float)getPPI 
    { 
     switch ((int)[UIScreen mainScreen].bounds.size.height) { 
      case 568: // iPhone 5* 
      case 667: // iPhone 6 
       return 163.0; 
       break; 

      case 736: // iPhone 6+ 
       return 154.0; 
       break; 

      default: 
       return -1.0; 
       break; 
     } 
    } 

    - (void)drawRect:(CGRect)rect 
    { 
     [[UIColor blackColor] setFill]; 


     float ppi = [self getPPI]; 

     if (ppi == -1.0) // unable to draw, maybe an ipad. 
      return; 

     float linesDist = ppi/25.4; // ppi/mm per inch (regular size iPad would be 132.0, iPhone6+ 154.0) 

     float linesWidthShort = 15.0; 
     float linesWidthMid = 20.0; 
     float linesWidthLong = 25.0; 

     for (float i = 0, c = 0; i <= self.bounds.size.height; i = i + linesDist, c = c +1.0) 
     { 
      bool isMid = (int)c % 5 == 0; 
      bool isLong = (int)c % 10 == 0; 

      float linesWidth = isLong ? linesWidthLong : isMid ? linesWidthMid : linesWidthShort; 
      UIRectFillUsingBlendMode((CGRect){0, i, linesWidth, .5} , kCGBlendModeNormal); 



      /* FONT: Numbers without rotation (yes, is short) 
      if (isLong && i > 0 && (int)c % 10 == 0) 
       [[NSString stringWithFormat:@"%d", (int)(c/10)] drawAtPoint:(CGPoint){linesWidthLong +2, i -5} withAttributes:@{ 
                                   NSFontAttributeName: [UIFont systemFontOfSize:9], 
                                   NSBaselineOffsetAttributeName: [NSNumber numberWithFloat:1.0] 
                                   }]; 
      */ 


      // FONT: Numbers with rotation (yes, requires more effort) 
      if (isLong && i > 0 && (int)c % 10 == 0) 
      { 
       NSString *str = [NSString stringWithFormat:@"%d", (int)(c/10)]; 
       NSDictionary *attrs = @{ 
             NSFontAttributeName: [UIFont systemFontOfSize:9], 
             NSBaselineOffsetAttributeName: [NSNumber numberWithFloat:0.0] 
             }; 
       CGSize textSize = [str sizeWithAttributes:attrs]; 


       CGContextRef context = UIGraphicsGetCurrentContext(); 
       CGContextSaveGState(context); 

       CGContextRotateCTM(context, +(M_PI/2)); 
       [str drawAtPoint:(CGPoint){i - (textSize.width/2), -(linesWidthLong + textSize.height +2)} withAttributes:attrs]; 

       CGContextRestoreGState(context); 
      } 

     } 
    }