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

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

那么你所有的东西都会像轴原点在左上角一样布局。

如果你必须用 Core Text 来写整个句子，而不仅仅是单词，看看这篇博文

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;

}