使用 Quartz 2D 在上下文中垂直居中文本

Question

我有一种方法可以为表格视图创建一个空白缩略图，我试图在其中将一些文本居中。

通过绘制不可见的文本来水平居中很容易，但似乎没有人说明如何将文本垂直居中。我尝试了一些不同的方法，但没有提供真正居中的文本。

如何计算CGContextShowTextAtPoint() 的“y”原点，这将导致输出文本垂直居中？

见下图示例，方法代码：

- (UIImage *)blankThumbnail
{
    // Check to see if Blank Thumbnail has already been initialized
    if (_blankThumbnail != nil) {
        return _blankThumbnail;
    }

    // Get Device Scale
    CGFloat scale = [[UIScreen mainScreen] scale];

    // Setup color space
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

    // Create a CGBitmapContext to draw an image into
    NSUInteger width = 66 * scale;
    NSUInteger height = 44 * scale;
    NSUInteger bytesPerPixel = 4;
    NSUInteger bytesPerRow = bytesPerPixel * width;
    NSUInteger bitsPerComponent = 8;
    CGContextRef context = CGBitmapContextCreate(NULL,
                                                 width,
                                                 height,
                                                 bitsPerComponent,
                                                 bytesPerRow,
                                                 colorSpace,
                                                 kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);

    // Release colorspace
    CGColorSpaceRelease(colorSpace);


    // Set the Fill Area to the full size of context
    CGRect fillArea = CGRectMake(0, 0, width, height);

    // Set Fill Color and Fill Context
    CGContextSetRGBFillColor(context, 200.0f/255.0f, 200.0f/255.0f, 200.0f/255.0f, 1.0f);
    CGContextFillRect(context, fillArea);


    // Set Text String and Size
    NSString *string = @"No Image";
    CGFloat size = 12 * scale;

    // Set up Font
    CGContextSelectFont(context,
                        "Helvetica",
                        size,
                        kCGEncodingMacRoman);

    // Set Fill and Stroke Colors
    CGContextSetRGBFillColor(context, 0, 0, 0, 0.4);
    CGContextSetRGBStrokeColor(context, 0, 0, 0, 0.4);


    // Set Drawing Mode to Invisible
    CGContextSetTextDrawingMode(context, kCGTextInvisible);

    // Get initial and final positions
    CGPoint initPos = CGContextGetTextPosition(context);
    CGContextShowTextAtPoint (context, initPos.x, initPos.y, string.UTF8String, string.length);
    CGPoint finalPos = CGContextGetTextPosition(context);

    // Calculate height & width, and center text in context
    CGFloat x = (width / 2) - ((finalPos.x - initPos.x) / 2);
    CGFloat y = (height / 2) - (size / 2);


    // Set Drawing Mode to Fill Stroke
    CGContextSetTextDrawingMode (context, kCGTextFillStroke);

    // Draw Text
    CGContextShowTextAtPoint (context, x, y, string.UTF8String, string.length);


    // Get CGImage and set to UIImage
    CGImageRef imageRef = CGBitmapContextCreateImage(context);

    // Release context
    CGContextRelease(context);

    // Set CGImage to UIImage
    _blankThumbnail = [UIImage imageWithCGImage:imageRef];

    // Release Image Ref
    CGImageRelease(imageRef);


    return _blankThumbnail;
}

谢谢。如果您发现该方法有任何其他问题，请告诉我。

Answer 1

我修改了你的方法并制作了 66 x 100 的图像大小，我还删除了不可见选项。

现在您将看到图像文本垂直居中。 给你：

- (UIImage *)blankThumbnail
{
// Check to see if Blank Thumbnail has already been initialized
if (_blankThumbnail != nil) {
    return _blankThumbnail;
}

// Get Device Scale
CGFloat scale = [[UIScreen mainScreen] scale];

// Setup color space
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

// Create a CGBitmapContext to draw an image into
NSUInteger width = 66 * scale;
NSUInteger height = 100 * scale;
NSUInteger bytesPerPixel = 4;
NSUInteger bytesPerRow = bytesPerPixel * width;
NSUInteger bitsPerComponent = 8;
CGContextRef context = CGBitmapContextCreate(NULL,
                                             width,
                                             height,
                                             bitsPerComponent,
                                             bytesPerRow,
                                             colorSpace,
                                             kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);

// Release colorspace
CGColorSpaceRelease(colorSpace);


// Set the Fill Area to the full size of context
CGRect fillArea = CGRectMake(0, 0, width, height);

// Set Fill Color and Fill Context
CGContextSetRGBFillColor(context, 200.0f/255.0f, 200.0f/255.0f, 200.0f/255.0f, 1.0f);
CGContextFillRect(context, fillArea);


// Set Text String and Size
NSString *string = @"No Image";

CGFloat size = 12 * scale;

// Set up Font
CGContextSelectFont(context,
                    "Helvetica",
                    size,
                    kCGEncodingMacRoman);

// Set Fill and Stroke Colors
CGContextSetRGBFillColor(context, 0, 0, 0, 0.4);
CGContextSetRGBStrokeColor(context, 0, 0, 0, 0.4);

for (int i = 0;i < string.length; i++)
{
    NSInteger inc = string.length - i - 1;
    NSRange range;
    range.length = 1;
    range.location = inc;
    NSString *si = [string substringWithRange:range];
    CGSize letterSize = [si sizeWithFont:[UIFont fontWithName:@"Helvetica" size:size]];
    // Calculate height & width, and center text in context
    CGFloat x = (width / 2) - letterSize.width / 2;
    CGFloat y = i * size;


    // Set Drawing Mode to Fill Stroke
    CGContextSetTextDrawingMode (context, kCGTextFillStroke);

    // Draw Text
    CGContextShowTextAtPoint (context, x, y, si.UTF8String, si.length);

}
// Set Drawing Mode to Invisible


// Get initial and final positions


// Get CGImage and set to UIImage
CGImageRef imageRef = CGBitmapContextCreateImage(context);

// Release context
CGContextRelease(context);

// Set CGImage to UIImage
_blankThumbnail = [UIImage imageWithCGImage:imageRef];

// Release Image Ref
CGImageRelease(imageRef);


return _blankThumbnail;
}