如何在图像上下文中绘制图像和文本？

Question

我试图在图像上绘制文本。当我不应用变换时，图像在左下角绘制，图像和文本都很好（图2），但我希望图像位于顶部视图左侧。

下面是我的drawRect实现。

如何翻转图像以便文本和图像正确对齐？

或

如何将图像移动到视图的左上角？

如果我不使用下面的函数图像被在所述视图的底部创建呼叫。（图2）

CGContextTranslateCTM(UIGraphicsGetCurrentContext(), 0.0, self.bounds.size.height); 
CGContextScaleCTM(UIGraphicsGetCurrentContext(), 1.0, -1.0); 




- (void)drawRect:(CGRect)rect 
    { 

     UIGraphicsBeginImageContext(self.bounds.size); 

     // Fig 2 comment these lines to have Fig 2 
     CGContextTranslateCTM(UIGraphicsGetCurrentContext(), 0.0, self.bounds.size.height); 
     CGContextScaleCTM(UIGraphicsGetCurrentContext(), 1.0, -1.0); 
     // Fig 2 Applying the above transformations results in Fig 1 

     UIImage *natureImage = [UIImage imageNamed:@"Nature"]; 
     CGRect natureImageRect = CGRectMake(130, 380, 50, 50); 
     [natureImage drawInRect:natureImageRect]; 


     UIFont *numberFont = [UIFont systemFontOfSize:28.0]; 
     NSFileManager *fm = [NSFileManager defaultManager]; 
     NSString * aNumber = @"111"; 
     [aNumber drawAtPoint:CGPointMake(100, 335) withFont:numberFont];  

     UIFont *textFont = [UIFont systemFontOfSize:22.0]; 
     NSString * aText = @"Hello"; 
     [aText drawAtPoint:CGPointMake(220, 370) withFont: textFont]; 
     self.image = UIGraphicsGetImageFromCurrentImageContext(); 
     UIGraphicsEndImageContext(); 

     NSData * imageData = UIImagePNGRepresentation(self.image); 
     NSArray * paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask,YES); 
     NSString *documentsDirectory = [paths objectAtIndex:0]; 
     NSString *filePath = [documentsDirectory stringByAppendingPathComponent:@"Image.png"]; 
     NSLog(@"filePath :%@", filePath); 

     BOOL isFileCreated = [fm createFileAtPath:filePath contents:imageData attributes:nil]; 

     if(isFileCreated) 
     { 
      NSLog(@"File created at Path %@",filePath); 
     } 

    } 

Answer 1

下面是代码我用于绘制相同的图像（除了我没有使用自然图像）。它不在绘制矩形中，但取决于您的最终目标，最好在自定义方法的绘制矩形之外执行此操作，并将self.image设置为 - （UIImage *）imageToDraw的结果。它输出这样的：

下面是代码：

- (UIImage *)imageToDraw 
{ 
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(320, 480), NO, [UIScreen mainScreen].scale); 
    UIImage *natureImage = [UIImage imageNamed:@"testImage.png"]; 
    [natureImage drawInRect:CGRectMake(130, 380, 50, 50)]; 

    UIFont *numberFont = [UIFont systemFontOfSize:28.0]; 
    NSString * aNumber = @"111"; 
    [aNumber drawAtPoint:CGPointMake(100, 335) withFont:numberFont]; 

    UIFont *textFont = [UIFont systemFontOfSize:22.0]; 
    NSString * aText = @"Hello"; 
    [aText drawAtPoint:CGPointMake(220, 370) withFont:textFont]; 

    UIImage *resultingImage = UIGraphicsGetImageFromCurrentImageContext(); 
    UIGraphicsEndImageContext(); 
    return resultingImage; 
} 

- (NSString *)filePath 
{ 
    NSArray * paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask,YES); 
    NSString *documentsDirectory = [paths objectAtIndex:0]; 
    return [documentsDirectory stringByAppendingPathComponent:@"Image.png"]; 
} 

- (void)testImageWrite 
{ 
    NSData *imageData = UIImagePNGRepresentation([self imageToDraw]); 
    NSError *writeError = nil; 
    BOOL success = [imageData writeToFile:[self filePath] options:0 error:&writeError]; 
    if (!success || writeError != nil) 
    { 
     NSLog(@"Error Writing: %@",writeError.description); 
    } 
} 

反正 - 希望这有助于

Answer 2

的参考你的画面为参考标准的iOS框架：原产地是在左上角。相反，您使用Core Text绘制的文本具有旧的参考框架，原点位于左下角。只是采用像这样的文字（图形上下文）的变换：

CGContextSetTextMatrix(context, CGAffineTransformMakeScale(1.0f, -1.0f)); 

那么你所有的东西将是布局，如果轴原点是在左上角。

如果你有写整个句子的核心文本，而不是空谈看看this blog post

Answer 3

我想说的drawRect方法是在一个视图不创建一个图像绘制。性能问题，drawInRect被称为很多。有了这个意图是更好的viewDidLoad或一些自定义方法。

我做了一个例子您的要求：

- (void)viewDidLoad { 
[super viewDidLoad]; 
// Do any additional setup after loading the view, typically from a nib. 

UIGraphicsBeginImageContext(self.view.bounds.size); 
CGContextRef context = UIGraphicsGetCurrentContext(); 

CGFloat margin = 10; 

CGFloat y = self.view.bounds.size.height * 0.5; 
CGFloat x = margin; 
UIImage *natureImage = [UIImage imageNamed:@"image"]; 

CGRect natureImageRect = CGRectMake(x, y - 20, 40, 40); 
[natureImage drawInRect:natureImageRect]; 
x += 40 + margin; 

UIFont *textFont = [UIFont systemFontOfSize:22.0]; 
NSString * aText = @"Hello"; 

NSMutableParagraphStyle *style = [[NSParagraphStyle defaultParagraphStyle] mutableCopy]; 
style.alignment = NSTextAlignmentCenter; 
NSDictionary *attr = @{NSParagraphStyleAttributeName: style, 
         NSFontAttributeName: textFont}; 

CGSize size = [aText sizeWithAttributes:attr]; 
[aText drawInRect: CGRectMake(x, y - size.height * 0.5, 100, 40) 
     withFont: textFont 
    lineBreakMode: UILineBreakModeClip 
     alignment: UITextAlignmentLeft]; 

self.image = UIGraphicsGetImageFromCurrentImageContext(); 
UIGraphicsEndImageContext(); 

self.imageView.image = self.image; 

}