Façon la plus rapide/la plus efficace de dessiner des bulles vocales à l'écran - CoreAnimation, Quartz2D?

Question

J'apporte une fonctionnalité à une application iPhone et je pourrais utiliser l'aide la plus rapide/efficace pour résoudre ce problème:

Dans la moitié supérieure de mon écran, j'ai des bulles (pensez BD) qui traduisent UIImageViews à travers l'écran (position dynamique x & y). C'est un UIImageView parce qu'il y a une image comme arrière-plan de la bulle de dialogue.

Chaque bulle a une image correspondante se déplaçant autour du bas de l'écran (ailleurs dans l'arborescence de la couche)

je voudrais attirer une queue (ce bit de triangle à partir d'une bulle) de sorte que le point de la triangle suit l'image inférieure, la base du triangle étant attachée au bas de la UIImageView supérieure. (techniquement, la base ne doit pas être contrecarrée, elle peut se chevaucher tant que je peux faire correspondre la couleur de mon image de fond au triangle).

J'ai déjà fait tout le suivi & tracé une ligne avec les méthodes CGContextStrokePath, et maintenant je suis coincé sur la façon de remplacer la ligne avec un triangle.

J'ai regardé dessiner un triangle en Quartz et le remplir. Mon souci est le repositionnement des bulles de parole tous les 1/10e de seconde, et il semble que dessiner juste la ligne utilisée pour la preuve de concept ait un impact assez sévère sur la performance/la douceur visuelle. Une idée que j'ai est de faire la trigonométrie moi-même, et étirer & tourner une image d'un triangle pour relier chacune de ces bulles avec le point inférieur. Quelque chose me dit qu'il y a une solution plus efficace/plus élégante, mais je ne suis pas capable de la voir à travers la documentation. Toute aide sur la façon dont vous avez ou aborderiez cette question est appréciée. Merci.

Answer 1

Si les bulles sont de taille fixe, utilisez simplement un format UII statique. Définissez la propriété layer.position de la vue de l'image au point du triangle. Vous pouvez ensuite utiliser l'animation de vue pour déplacer les bulles.

Si vous voulez que les bulles vocales soient de tailles différentes, je créerais une image redimensionnable en utilisant resizableImageWithCapInsets. Ensuite, je ferais la même chose que ci-dessus pour le positionner. S'il y avait quelque chose de spécial à propos de la bulle de dialogue que je ne pouvais pas obtenir avec une image statique ou une image redimensionnable, je créerais probablement un calque CA ou des calques pour obtenir l'effet voulu (Comme un dégradé couche avec une couche de forme comme couche de masque)