使用Objective-C的iOS SDK中的语音泡泡

我正在做一个儿童书应用程序，并希望dynamic地填充对话框中的对话框，如附图所示。 截图来自Cinderella应用程序，我使用Cocos2D（或3D）开发。 不过，我想用objective-c和iOS sdk来实现这个function。

一种方法是：

计算给定字体和大小的文本的大小（使用NSString方法sizeWithFont：constrainedToSize :)，然后绘制一个圆angular矩形（使用CALayer）来包围该大小。

对于绘制圆angular矩形，使用背景颜色，边框宽度以及边框颜色和颜色半径来设置CALayer，并将其添加到UIView对象。 那会非常容易地产生讲话泡泡效应。

现在，我将如何获得指向angular色嘴angular的angular落？ 如何从angular色的嘴里popup并popupCALayer，我将如何实现这个animation？ 我的主要场景（插图）将是一个UIImageview，这个对话popup窗口应该以animation方式从angular色的嘴里出现，几秒钟之后，它就会消失，好像它回到了angular色的嘴里。 你的build议将不胜感激。

如果你知道一些示例代码/文章的某个地方，请相应地路由我。

这里是应用程序的video链接，显示如何作为对话泡泡进出字符对话框： http : //www.youtube.com/watch?v=umfNJLyrrNg

Answer 1

另一种方式是通过使用带有图案的图像。 看看UIImage方法：

resizableImageWithCapInsets：

基本上你可以创build一个最小尺寸的泡泡的图像，并保持“泡泡”边框的外观，使其无限延展。

下面的代码指定了在对图像进行拉伸/resize时，顶部，左侧，底部和右侧的12像素被保留的图像：

UIImage *bubble = [[UIImage imageNamed:@"bubble.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(12, 12, 12, 12)]; UIImageView *imgView = [[[UIImageView alloc] initWithImage:bubble] autorelease]; imgView.frame = CGRectZero; 

animationUIImageView的大小更改是免费的：

 [UIView animateWithDuration:0.3 animations:^(void) { imgView.frame = CGRectMake(50, 50, 200, 100); } completion:^(BOOL finished) { }]; 

Answer 2

这里是我通过修改这个苹果教程的实现：

https://developer.apple.com/library/ios/samplecode/quartzdemo/Listings/QuartzDemo_QuartzCurves_m.html

 - (void)drawRect:(CGRect)rect { CGContextRef context=UIGraphicsGetCurrentContext(); CGContextSetLineWidth(context, .5f); CGContextSetStrokeColorWithColor(context, [UIColor lightGrayColor].CGColor); CGContextSetRGBFillColor(context, 1, 1, 1, 1); rect.origin.y++; CGFloat radius = cornerRadius; CGFloat minx = CGRectGetMinX(rect), midx = CGRectGetMidX(rect), maxx = CGRectGetMaxX(rect); CGFloat miny = CGRectGetMinY(rect), midy = CGRectGetMidY(rect), maxy = CGRectGetMaxY(rect); CGMutablePathRef outlinePath = CGPathCreateMutable(); if (![User isCurrentUser:message.user]) { minx += 5; CGPathMoveToPoint(outlinePath, nil, midx, miny); CGPathAddArcToPoint(outlinePath, nil, maxx, miny, maxx, midy, radius); CGPathAddArcToPoint(outlinePath, nil, maxx, maxy, midx, maxy, radius); CGPathAddArcToPoint(outlinePath, nil, minx, maxy, minx, midy, radius); CGPathAddLineToPoint(outlinePath, nil, minx, miny + 20); CGPathAddLineToPoint(outlinePath, nil, minx - 5, miny + 15); CGPathAddLineToPoint(outlinePath, nil, minx, miny + 10); CGPathAddArcToPoint(outlinePath, nil, minx, miny, midx, miny, radius); CGPathCloseSubpath(outlinePath); CGContextSetShadowWithColor(context, CGSizeMake(0,1), 1, [UIColor lightGrayColor].CGColor); CGContextAddPath(context, outlinePath); CGContextFillPath(context); CGContextAddPath(context, outlinePath); CGContextClip(context); CGPoint start = CGPointMake(rect.origin.x, rect.origin.y); CGPoint end = CGPointMake(rect.origin.x, rect.size.height); CGContextDrawLinearGradient(context, [self normalGradient], start, end, 0); } else { maxx-=5; CGPathMoveToPoint(outlinePath, nil, midx, miny); CGPathAddArcToPoint(outlinePath, nil, minx, miny, minx, midy, radius); CGPathAddArcToPoint(outlinePath, nil, minx, maxy, midx, maxy, radius); CGPathAddArcToPoint(outlinePath, nil, maxx, maxy, maxx, midy, radius); CGPathAddLineToPoint(outlinePath, nil, maxx, miny + 20); CGPathAddLineToPoint(outlinePath, nil, maxx + 5, miny + 15); CGPathAddLineToPoint(outlinePath, nil, maxx, miny + 10); CGPathAddArcToPoint(outlinePath, nil, maxx, miny, midx, miny, radius); CGPathCloseSubpath(outlinePath); CGContextSetShadowWithColor(context, CGSizeMake(0,1), 1, [UIColor lightGrayColor].CGColor); CGContextAddPath(context, outlinePath); CGContextFillPath(context); CGContextAddPath(context, outlinePath); CGContextClip(context); CGPoint start = CGPointMake(rect.origin.x, rect.origin.y); CGPoint end = CGPointMake(rect.origin.x, rect.size.height); CGContextDrawLinearGradient(context, [self greenGradient], start, end, 0); } CGContextDrawPath(context, kCGPathFillStroke); } - (CGGradientRef)normalGradient { NSMutableArray *normalGradientLocations = [NSMutableArray arrayWithObjects: [NSNumber numberWithFloat:0.0f], [NSNumber numberWithFloat:1.0f], nil]; NSMutableArray *colors = [NSMutableArray arrayWithCapacity:2]; UIColor *color = [UIColor whiteColor]; [colors addObject:(id)[color CGColor]]; color = [StyleView lightColorFromColor:[UIColor cloudsColor]]; [colors addObject:(id)[color CGColor]]; NSMutableArray *normalGradientColors = colors; int locCount = [normalGradientLocations count]; CGFloat locations[locCount]; for (int i = 0; i < [normalGradientLocations count]; i++) { NSNumber *location = [normalGradientLocations objectAtIndex:i]; locations[i] = [location floatValue]; } CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB(); CGGradientRef normalGradient = CGGradientCreateWithColors(space, (__bridge CFArrayRef)normalGradientColors, locations); CGColorSpaceRelease(space); return normalGradient; } 

这导致了这个…

Answer 3

Three20框架 （实际上，Three20Style）已经有了一个叫做TTSpeechBubbleShape的窗体类，它基本上就是你要找的。

现在，我有两个select：

1. 要么使用Three20; 要么

2. 分析TTSpeechBubbleShape类，看看这是如何实现的，并在您的应用程序中执行相同的操作。