使用Objective-C的iOS SDK中的语音泡泡 [英] Speech Bubble in iOS SDK using Objective-C

问题描述

我正在开发一个儿童读物应用，并且希望动态填充用于对象对话的气泡，如所附的屏幕快照所示.屏幕截图来自我猜是使用Cocos2D(或3D)开发的Cinderella应用程序.但是，我想使用Objective-C和iOS SDK实现此功能.

I am working on a children's book app and would like to dynamically populate speech bubble(s) for character dialogues as shown in attached screenshots. Screenshots are from Cinderella app which was developed using Cocos2D (or 3D) I guess. However, I would like to achieve this functionality using objective-c and iOS sdk.

一种方法是:

使用给定的字体和大小计算文本的大小(使用NSString方法sizeWithFont:constrainedToSize :)，然后绘制一个圆角矩形(使用CALayer)以将该大小括起来.

Calculate the size of the text given a font and size (using the NSString method sizeWithFont:constrainedToSize:), then draw a rounded rectangle (using CALayer) to enclose that size.

要绘制圆角矩形，请设置具有背景色，边框宽度和边框颜色以及颜色半径的CALayer，并将其添加到UIView对象.这样很容易产生气泡效果.

For drawing rounded rectangle, set up a CALayer with a background color, border width and border color and color radius, and add that to a UIView object. That would give a speech bubble effect very easily.

现在，我如何获得一个指向角色嘴巴的角?如何从角色的嘴中弹出并弹出CALayer，我将如何实现此动画?我的主要场景(插图)是UIImageview，此对话弹出窗口应以动画方式从角色的嘴出现，几秒钟后它应该消失，好像它回到了角色的嘴一样.您的建议将不胜感激.

Now, how would I get a corner that pointed to the character's mouth? How do I pop-out and pop-in the CALayer from character's mouth, how would I implement this animation? My main scene (illustration) would be an UIImageview and this dialogue pop-op should appear from character's mouth in a animated way and after few seconds it should disappear as if its going back in character's mouth. You suggestions would be greatly appreciated.

如果您在某个地方知道一些示例代码/文章，请相应地给我路由.

If you are aware of some sample code/article some place, please route me accordingly.

以下是该应用程序的视频链接，其中显示了角色对话作为气泡弹出和弹出的方式:

Here is a video link of the app which shows how character dialogues pop-in and out as speech bubble: http://www.youtube.com/watch?v=umfNJLyrrNg

推荐答案

执行此操作的另一种方法是使用带帽形插图的图像.看一下UIImage方法:

Another way of doing this is through the use of images with cap insets. Take a look at the UIImage method:

resizableImageWithCapInsets:

resizableImageWithCapInsets:

基本上，您可以创建最小尺寸气泡的图像，并无限期拉伸它，同时保持气泡"边框的外观.

Basically you can create an image of a minimum sized bubble, and have it stretch indefinitely while maintaining the look of the 'bubble' borders.

下面的代码指定一幅图像，当拉伸/调整图像大小时，该图像在顶部，左侧，底部和右侧保留12个像素:

The code below specifies an image where 12 pixels on the top, left, bottom and right be preserved when stretching/resizing the image:

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

免费提供动画UIImageView的大小变化:

Animating the size change of a UIImageView comes for free:

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

                 }];

这篇关于使用Objective-C的iOS SDK中的语音泡泡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！