将文本放在 UIImage 和文本上是模糊的? [英] Putting text over UIImage and text is blurry?

问题描述

我正在使用 this 答案将文本放在我的 UIImage 上(方法 2).问题是，文本出来的时候非常模糊，而且也不是水平和垂直居中.这是行为的屏幕截图:

I'm using this answer to put text over my UIImage (method 2). The problem is, the text comes out incredibly blurry, and also is not horizontally and vertically centered. Here is a screenshot of the behavior:

我该如何解决这个问题?

How could I fix this?

我添加文本的代码是这样的:

My code to add the text in is this:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"MainCell"];

    if(cell == nil){
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"MainCell"];
    }

    NSString *metaScore =  _getString([[news objectAtIndex:indexPath.row] objectForKey:@"metaScore"]);
    NSString *title = _getString([[news objectAtIndex:indexPath.row] objectForKey:@"title"]);
    NSString *releaseDate =  _getString([[news objectAtIndex:indexPath.row] objectForKey:@"releaseDate"]);
    NSString *type =  _getString([[news objectAtIndex:indexPath.row] objectForKey:@"type"]);
    NSString *rating =  _getString([[news objectAtIndex:indexPath.row] objectForKey:@"rating"]);

    [cell.textLabel setLineBreakMode:NSLineBreakByWordWrapping];
    cell.textLabel.text = title;
    cell.detailTextLabel.numberOfLines = 4;
    cell.detailTextLabel.text = [NSString stringWithFormat:@"%@\n%@\n%@", releaseDate, type, rating];

    UIImageView *imageView = [[UIImageView alloc] init];
    imageView.frame = CGRectMake(0, 0, 50, 50);

    imageView.image = [self addText:[UIImage imageNamed:@"green.png"] text:metaScore];
    cell.image = imageView.image;

    [cell setAccessoryType:UITableViewCellAccessoryDisclosureIndicator];

    return cell;
}

-(UIImage *)addText:(UIImage *)img text:(NSString *)text1{
    int w = img.size.width;
    int h = img.size.height;
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef context = CGBitmapContextCreate(NULL, w, h, 8, 4 * w, colorSpace, kCGImageAlphaPremultipliedFirst);
    CGContextDrawImage(context, CGRectMake(0, 0, w, h), img.CGImage);

    char* text= (char *)[text1 cStringUsingEncoding:NSASCIIStringEncoding];
    CGContextSelectFont(context, "Arial", 20, kCGEncodingMacRoman);
    CGContextSetTextDrawingMode(context, kCGTextFill);
    CGContextSetRGBFillColor(context, 256, 256, 256, 1);
    CGContextShowTextAtPoint(context, 20, 20, text, strlen(text));
    CGImageRef imgCombined = CGBitmapContextCreateImage(context);

    CGContextRelease(context);
    CGColorSpaceRelease(colorSpace);

    UIImage *retImage = [UIImage imageWithCGImage:imgCombined];
    CGImageRelease(imgCombined);

    return retImage;
}

推荐答案

您可能没有在像素对齐的边界上绘制文本.

It's possible you're not drawing your text on pixel-aligned boundaries.

例如，如果您将文本定位在 x:12.4, y:18.7，那么文本将不会呈现清晰，因为它们未与屏幕上的像素对齐.对于标准显示，您需要位置和大小是整数(它们不能是分数).对于 Retina 显示器，您可以通过使用半点来摆脱困境，但将它们保留为整数通常也更容易.

For example, if you position your text at x:12.4, y:18.7, then the text won't render crisp, as they're not aligned to the pixels on screen. For a standard display, you need positions and sizes to be whole numbers (they can't be fractions). For retina displays, you can get away by having half points, but it's usually easier to keep them as whole numbers too.

如果您使用 CGRect 来确定文本的位置，您可以使用 CGRectIntegral() 为您对齐它们.这将限制职位，并限制规模.例如:

If you're using CGRect to determine the position of the text, you can use CGRectIntegral() to align them for you. This will floor the positions, and ceiling the sizes. For example:

CGRect position = CGRectMake(12.2, 17.8, 44.7, 49.2);
position = CGRectIntegral(position);
/* Position is now
   x: 12, y: 17
   w: 45, h: 50
*/

如果你没有 CGRect，你可以使用 floor/floorf 和 ceil/ceilf(使用 f 变体，如果你正在使用 CGFloats)

If you're doing it without a CGRect, you can use floor/floorf and ceil/ceilf (using the f variant if you're using CGFloats)

请记住，CoreGraphics 使用像素而不是点，因此您需要在任何计算中考虑比例因子.值得庆幸的是，CoreGraphics 使这比您想象的要容易一些.只需在创建上下文后立即插入即可.这将为该上下文中的任何未来计算设置正确的比例.

Remember CoreGraphics works with pixels and not points, as such you need to take into account the scale factor in any of your calculations. Thankfully, CoreGraphics makes that a bit easier than you'd think. Simply insert this straight after you've created your context. This will set the correct scale for any future calculations within that context.

CGFloat scale = [[UIScreen mainScreen] scale];
CGContextScaleCTM(context, scale, scale);

至于文本对齐，这并不容易.您手动将其设置为 (20,20)，这将设置第一个字符左上角的位置.这不太可能使您的文本居中.由于您不知道文本的渲染宽度和高度，因此您无法补偿左上角的位置以使文本居中.你会在这里挣扎，但是一旦你能找出文本的渲染宽度和高度，你就可以使用它和图像的宽度/高度来计算正确的位置.

As for the alignment of text, this won't be easy. You're manually setting it to (20,20), which will set the position of the top left corner of the first character. This is unlikely to center your text. As you don't know the rendered width and height of the text though, you can't compensate for the position of the top left corner to make the text centered. You'll struggle here, but once you can find out the rendered width and height of the text, you can calculate the correct position using this and the width/height of the image.

这篇关于将文本放在 UIImage 和文本上是模糊的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！