在屏幕上绘制移动语音气泡的最快/最有效的方法 - CoreAnimation、Quartz2D？
我正在向 iPhone 应用程序添加一些功能，并且可以使用一些帮助来选择最快/最有效/最佳实践方法来解决此问题：
在屏幕的上半部分，我有气泡（想想漫画书）是在屏幕上平移的 UIImageView（动态 x 和 y 位置）。它是一个 UIImageView，因为有一个图像作为对话气泡的背景。
每个语音气泡都有一个匹配的图像在屏幕底部（图层树中的其他位置）移动，
我想画一条尾巴（语音气泡中的三角形位），以便三角形的点跟踪下部图像，三角形的底边连接到上部 UIImageView 的底部。 （从技术上讲，底座不必对接，只要我可以将背景图像的颜色与三角形匹配，它就可以重叠）。
我已经完成了所有的跟踪&使用 CGContextStrokePath 方法绘制了一条线，现在我陷入了如何用三角形替换该线的困境。
我看过在 Quartz 中绘制一个三角形并填充它。我担心的是，对话气泡每 1/10 秒就会重新定位一次，而且看起来仅绘制用于概念验证的线条会对性能/视觉平滑度产生相当严重的影响。
我的一个想法是自己做三角函数，然后拉伸和拉伸。旋转三角形图像，将每个对话气泡与下方的点连接起来。有些东西告诉我有一个更有效/更优雅的解决方案，但我无法通过文档看到它。对于您如何解决或将解决此问题的任何帮助，我们将不胜感激。谢谢。
I am adding some functionality to an iPhone app, and could use some help in picking the fastest / most efficient / best practice approach for solving this problem:
At the upper-half of my screen, I have speech bubbles (think comic book) that are UIImageViews translating across the screen (dynamic x & y position). It is a UIImageView because there is an image as the background of the speech bubble.
Each speech bubble has a matching image moving around the bottom of the screen (elsewhere in the layer tree)
I would like to draw a tail (that triangle bit from a speech bubble) so the point of the triangle is tracking the lower image, with the base of the triangle being attached to the bottom of the upper UIImageView. (technically the base doesn't have to be butted against, it can overlap as long as I can match the color of my background image to the triangle).
I have already done all the tracking & drawn a line with CGContextStrokePath methods, and now I am stuck on how to replace the line with a triangle.
I have looked at drawing a triangle in Quartz and filling it. My concern is the speech bubbles are repositioned every 1/10th of a second, and it looks like drawing just the line used for proof of concept had a pretty severe performance / visual smoothness impact.
One idea I have is to do the trigonometry myself, and stretch & rotate an image of a triangle to connect each of these speech bubbles with the lower spot. Something is telling me there is a more efficient / more elegant solution, but I am not able to see it looking through the documentation. Any help on how you have or would approach this issue is appreciated. Thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果对话气泡的大小是固定的，则只需使用静态 UIImage。将图像视图的layer.position属性设置在三角形的点处。然后您可以使用视图动画来移动气泡。
如果您需要不同大小的对话气泡，我会使用 ressizedImageWithCapInsets 创建一个可调整大小的图像。然后我会按照上面的方法来定位它。
如果语音气泡有一些特殊之处，而我无法使用静态图像或可调整大小的图像来实现，我可能会创建一个或多个自定义 CA 层来获得我想要的效果（例如具有形状的渐变层）层作为遮罩层）
If the speech bubbles are fixed in size, just use a static UIImage. Set the image view's layer.position property at the point of the triangle. Then you can use view animation to move the bubbles around.
If you need the speech bubbles to be different sizes, I'd create a resizeable image using resizableImageWithCapInsets. Then I'd do the same as above to position it.
If there was something special about the speech bubble that I could't achieve with either a static image or a resizable image, I'd probably create a custom CA Layer or layers to get the effect I wanted (Like a gradient layer with a shape layer as it's mask layer)