如何在圖像上下文中繪製圖像和文本？

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; 

}