Как я могу нарисовать изображение с переносом текста на iOS?

Я хочу рисовать текст в следующем стиле: изображение всегда находится в правом верхнем углу, а текст вокруг изображения.

введите здесь описание изображения

Может ли кто-нибудь сказать мне, как реализовать это на iOS? Нужно ли использовать основной текст?

Заранее спасибо!


person nonamelive    schedule 12.03.2011    source источник


Ответы (3)


Да, CoreText — лучший способ сделать это. Код для этого немного длинный, чтобы размещать его здесь. Некоторый код, который может указать вам правильное направление, находится в статье "Clipping CGRect to CGPath." Если процесс его выполнения все еще сбивает с толку, отправьте мне сообщение, и я, наконец, напишу сообщение в блоге, которое я собирался написать на эту тему.

person Rob Napier    schedule 12.03.2011
comment
Думаю, мне нужна твоя помощь. Я не совсем понимаю код в вашем сообщении в блоге. Не могли бы вы написать статью на эту тему? Спасибо! - person nonamelive; 13.03.2011
comment
Не забыли об этом; это просто заняло немного, чтобы собрать это вместе. - person Rob Napier; 25.03.2011
comment
Это немного грубо, но, надеюсь, это поможет вам двигаться в правильном направлении. robnapier.net/blog/wrapping-text-around-shape- с-coretext-540 - person Rob Napier; 25.03.2011

Шаг 1: Создайте объект, унаследованный от UIView.

Шаг 2: Переопределить - метод (void)drawRect:(CGRect)rect

Шаг 3: Добавьте следующий код в этот метод

/* Define some defaults */
float padding = 10.0f;

/* Get the graphics context for drawing */
CGContextRef ctx = UIGraphicsGetCurrentContext();

/* Core Text Coordinate System is OSX style */
CGContextSetTextMatrix(ctx, CGAffineTransformIdentity);
CGContextTranslateCTM(ctx, 0, self.bounds.size.height);
CGContextScaleCTM(ctx, 1.0, -1.0);
CGRect textRect = CGRectMake(padding, padding, self.frame.size.width - padding*2, self.frame.size.height - padding*2);

/* Create a path to draw in and add our text path */
CGMutablePathRef pathToRenderIn = CGPathCreateMutable();
CGPathAddRect(pathToRenderIn, NULL, textRect);

/* Add a image path to clip around, region where you want to place image */ 
CGRect clipRect = CGRectMake(padding,  self.frame.size.height-50, 50, 40);
CGPathAddRect(pathToRenderIn, NULL, clipRect);

/* Build up an attributed string with the correct font */
NSMutableAttributedString *attrString = [[NSMutableAttributedString alloc] initWithString:self.Text];

//setFont
 CTFontRef font = CTFontCreateWithName((CFStringRef) [UIFont systemFontOfSize:10].fontName, [UIFont systemFontOfSize:10].lineHeight, NULL);
CFAttributedStringSetAttribute(( CFMutableAttributedStringRef) attrString, CFRangeMake(0, attrString.length), kCTFontAttributeName,font);

//set text color
 CGColorRef _white=[UIColor whiteColor].CGColor;
CFAttributedStringSetAttribute(( CFMutableAttributedStringRef)(attrString), CFRangeMake(0, attrString.length),kCTForegroundColorAttributeName, _white);

/* Get a framesetter to draw the actual text */
CTFramesetterRef fs = CTFramesetterCreateWithAttributedString(( CFAttributedStringRef) attrString);
CTFrameRef frame = CTFramesetterCreateFrame(fs, CFRangeMake(0, attrString.length), pathToRenderIn, NULL);

/* Draw the text */
CTFrameDraw(frame, ctx);

/* Release the stuff we used */
CFRelease(frame);
CFRelease(pathToRenderIn);
CFRelease(fs);

Шаг 4: Используйте следующим образом;

TextLayoutView *TextWrappingImage=[[TextLayoutView alloc] init...your own constructor...];

 TextWrappingImage.backgroundColor=[UIColor clearColor];

 [cell addSubview:TextWrappingImage]; //Add as subview where you want
person asetil    schedule 01.07.2013

Аналогичная проблема. Я решил эту проблему, создав свой текстовый документ с графикой в ​​HTML с использованием стандартных тегов разметки, добавив html и png в свой проект и отобразив его с помощью UIWebView. :-)

person software evolved    schedule 22.06.2014
comment
+1. Это может быть не самое элегантное решение, однако я использовал этот метод, и это одна строка кода для обработки этого и просто простой CSS для элемента div. width:95px; height:95px; margin:5px 5px 5px 0px; border:1px solid #eee; float:left; background:url(%@) center center; background-repeat:no-repeat; background-size: contain; Гораздо меньше и проще в реализации, на мой взгляд. Спасибо - person thefoyer; 29.07.2014