iPhone：绘制旋转文本？

Question

我想在旋转 90° 的视图中绘制一些文本。我对 iPhone 开发还很陌生，在网上浏览后发现了许多不同的解决方案。我尝试过一些，但通常都会以文本被剪切而告终。

这是怎么回事？我在一个相当小的空间（表格视图单元格）中绘图，但是必须有一种“正确”的方法来做到这一点......对吧？

---

编辑：这里有几个例子。我试图沿着左侧的黑条显示文本“12345”。

1. 第一次尝试，来自 RJShearman 关于 Apple 讨论

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

   
   _{（来源：deeptechinc.com）}

2. 第二次尝试，来自 zgombosi在 iPhone 开发 SDK 上。相同的结果（此处的字体稍小，因此剪裁较少）。

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

   尝试二。有几乎相同的剪辑 http://dev.deeptechinc.com/sidney/share/iphonerotation/attempt2.png

Answer 1

事实证明，无论行高如何，我的表格单元格总是初始化为 44 像素高，因此我的所有绘图都被从单元格顶部剪切了 44 像素。

要绘制更大的单元格，需要使用

cellContentView.autoresizingMask = UIViewAutoresizingFlexibleHeight;

或

cellContentView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

设置内容视图的 autoresizingMask ，并且以正确的大小调用 drawRect 。在某种程度上，这是有道理的，因为 UITableViewCell 的 initWithStyle:reuseIdentifier: 没有提及单元格的大小，只有表视图实际上知道每个单元格有多大row 将根据其自身的大小及其委托对 tableView:heightForRowAtIndexPath: 的响应。

我阅读了 Quartz 2D 编程指南，直到绘制模型和函数开始有意义，绘制旋转文本的代码变得简单明了：

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);

感谢您的提示，看起来我已经准备好了。

Answer 2

使用 :-

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

其中 label 是 UILabel 的对象。

Answer 3

这是一个提示。我猜你是在drawRect 中做这个绘图的。为什么不在drawRect周围画一个框架来看看矩形有多大，以及是否这就是你被剪裁的原因。

另一种方法是将文本放入 UILabel 中，然后在将单元格放入 cellForRowAtIndexPath 中时将其旋转 90 度。

Answer 4

您了解 UITableViewDelegate 方法 heightForRowAtIndexPath 对吧？

这是有关各种图形级别方法的简单教程。假设您知道有多大您的文字是您应该能够适当地调整表视图行大小。

另外，我会检查以确保任何转换后的边界实际上满足您的期望。 （使用调试器或日志语句来验证这一点）。

Answer 5

对于 @Sidncious 所说的以及我通过堆栈溢出收集到的内容，我想给出一个使用示例 - 附加我的代码以完全在屏幕左侧绘制标尺，并旋转数字：

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);
          }

      }
  }

Answer 6

当我发现我需要将以下内容添加到文件顶部后，我喜欢马特的方法。很简单。

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

马哈布兹的建议可能是您阻力最小的途径。您可以使用以下命令将 UILabel 旋转 90 度： [label setTransform:CGAffineTransformMakeRotation(DegreesToRadians(-90.0f))];您只需根据标签宽度计算单元格高度即可。 -马特 – 马特·朗 11 月 10 日 0:09