BisonCreative & development notes

UIKit & graphicsHistorical technical note

Creating long-form Weibo images in an iOS app

Turns a long passage of text into an image for a long-form Weibo post. The code works through text width, font size, required height and image drawing, demonstrating an early UIKit approach to generating a tall image at a fixed width.

Author：

Originally credited to Bison. Content is retained as published.

English translation of the Chinese original, translated on . The article body uses automated translation; app descriptions, historical reading notes and video subtitles receive separate editorial checks. Original publication dates, attribution, code and version notes are retained.

“iOS development is like moving things around; once you become skilled enough, you can start taking shortcuts.” Bison

How can we implement long Weibo posts in iOS development?
Put simply, convert the text into an image for display too.
See the code below.

#define CONTENT_MAX_WIDTH   300.0f

+(UIImage *)imageFromText:(NSArray*)arrContent withFont:(CGFloat)fontSize withTextColor:(UIColor *)textColor withBgImage:(UIImage *)bgImage withBgColor:(UIColor *)bgColor
{
// 设置字体类型和大小

    UIFont *font = [UIFont fontWithName:@"Heiti SC" size:fontSize];
    NSMutableArray *arrHeight = [[NSMutableArray alloc] initWithCapacity:arrContent.count];

    CGFloat fHeight = 0.0f;
    for (NSString *sContent in arrContent) {
        CGSize stringSize = [sContent sizeWithFont:font constrainedToSize:CGSizeMake(CONTENT_MAX_WIDTH, 10000) lineBreakMode:NSLineBreakByWordWrapping];
        [arrHeight addObject:[NSNumber numberWithFloat:stringSize.height]];

        fHeight += stringSize.height;
    }

    CGSize newSize = CGSizeMake(CONTENT_MAX_WIDTH+20, fHeight+50);


    // 创建一个可拉伸的图像的背景上画
    UIGraphicsBeginImageContextWithOptions(newSize,NO,0.0);
    CGContextRef ctx = UIGraphicsGetCurrentContext();


    //如果设置了背景图片
    if(bgImage){
        UIImage* stretchedTopImage = [bgImage stretchableImageWithLeftCapWidth:0 topCapHeight:0];
        [stretchedTopImage drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];
    }else{
        if(bgColor){
            //填充背景颜色
            [bgColor set];
            UIRectFill(CGRectMake(0, 0, newSize.width, newSize.height));
        }
    }

        CGContextSetCharacterSpacing(ctx, 10);
        CGContextSetTextDrawingMode (ctx, kCGTextFill);
        [textColor set];


        int nIndex = 0;
        CGFloat fPosY = 20.0f;
        for (NSString *sContent in arrContent) {
        NSNumber *numHeight = [arrHeight objectAtIndex:nIndex];
        CGRect rect = CGRectMake(10, fPosY, CONTENT_MAX_WIDTH , [numHeight floatValue]);


        [sContent drawInRect:rect withFont:font lineBreakMode:NSLineBreakByWordWrapping alignment:NSTextAlignmentLeft];

        fPosY += [numHeight floatValue];
        nIndex++;
    }

    // 传递图像
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;

}