Auteur | Lok'tar ogar
guide
Basé sur la pratique de développement des modèles de texte Duka Editing APP, cet article partage la solution technique des capacités de rendu de modèle de texte statique dans les scénarios de montage vidéo. En tant que sur-ensemble de la solution de rendu de texte enrichi, cette solution technique peut être étendue à d'autres scénarios nécessitant un rendu de texte enrichi complexe.
Le texte intégral est de 6745 mots et le temps de lecture prévu est de 17 minutes.
aperçu
Affichage de l'effet du modèle de texte : 
△Application du modèle de texte dans l'édition Duka
01 fond
L'une des principales compétitivités des outils de création vidéo est sa riche bibliothèque de matériaux, y compris divers matériaux vidéo, matériaux audio, matériaux d'autocollants, etc. Le modèle de texte fait également partie intégrante. Le modèle de texte fournit une fonction d'édition de texte riche, permettant aux utilisateurs d'ajouter des informations textuelles plus joliment stylées dans la vidéo, augmentant ainsi la diversité des supports vidéo. De plus, grâce au style prédéfini, les utilisateurs peuvent choisir plus facilement le modèle de texte qui leur convient, ce qui permet de gagner du temps lors de la sélection des matériaux et d'améliorer l'expérience utilisateur. Dans la première version de Duka, nous ne fournissions pas le type de matériau du modèle de texte. Afin d'améliorer la compétitivité des produits et d'augmenter le taux de pénétration des matériaux, nous avons effectué certains travaux de recherche et développement, et enfin lancé les matériaux de modèle de texte. Ces matériaux de modèle de texte peuvent non seulement répondre aux besoins des utilisateurs, mais également fournir aux utilisateurs une inspiration et des idées plus créatives. Dans le même temps, nous mettons à jour et optimisons constamment notre bibliothèque de matériaux pour garantir que les utilisateurs puissent obtenir les ressources matérielles les plus récentes et de la plus haute qualité. Les graphiques et les styles de texte que le modèle de texte doit présenter sont relativement complexes. Les fonctionnalités prises en charge par le modèle de texte Duka sont répertoriées ci-dessous :
02 conception globale
Sur la base de la plate-forme matérielle que nous avons construite, nous avons ajouté un nouveau type de modèle de texte et fourni des fonctions d'édition, de prévisualisation, de configuration et en ligne sur la plate-forme matérielle. En combinant la production de matériaux et la prévisualisation, vous pouvez prévisualiser l'effet juste ajusté sur la même interface, correspondre directement à la bibliothèque de polices de Duka et modifier directement les ressources d'image. Cette méthode de production de matériel est hautement réutilisable.En utilisant un modèle de texte, en changeant une image de fond et en ajoutant un trait, un autre modèle de texte peut être directement produit. Après avoir publié ce modèle et exporté le diagramme d'effets, il entrera dans la file d'attente pour être révisé, et il pourra être configuré et lancé après révision. 
Jusqu'à présent, nous avons lancé 361 ensembles de modèles de texte et complété le lien complet de [Material Production] - [Material Platform Preview] - [Material Delivery and Client Loading] - [Client Rendering].
03 Réalisation de la fonction
3.1 Production de matériel
À l'heure actuelle, le format de matériel courant dans l'industrie du montage vidéo adopte généralement des fichiers de ressources et des fichiers de configuration (fichiers de description). Parmi eux, les fichiers de ressources incluent les ressources d'image et les fichiers de police, tandis que les fichiers de configuration sont principalement utilisés pour décrire les attributs de composition et les paramètres de rendu des modèles de texte. L'avantage de cette méthode est que le côté production n'a besoin que de décrire les caractéristiques pertinentes à travers des champs spécifiques, et il peut être présenté côté rendu. Cette méthode est très flexible et peut itérer les fonctionnalités associées de simples à complexes en fonction des besoins de scénarios spécifiques, tandis que le coût de mise en œuvre est relativement faible. Cependant, l'inconvénient est que la forme de production du matériel est personnalisée, ce qui nécessite un certain nombre de coûts de conception et d'apprentissage. En outre, il existe une autre méthode de production pour les logiciels de conception professionnels, en prenant Photoshop (PS) comme exemple. PS a des documents de format de fichier relativement matures, y compris diverses structures de données, et peut utiliser directement des fichiers PSD pour analyser les attributs graphiques et textuels pour le rendu. L'avantage de cette méthode est que la méthode de production de matériaux est plus générale et que la conception n'a pratiquement aucun coût d'apprentissage. Cependant, l'inconvénient est que certaines fonctionnalités dont nous avons besoin ne peuvent pas être simplement satisfaites par PSD, comme l'effet d'ombre multicouche, qui est l'effet obtenu en superposant plusieurs zones de texte. Lors de la modification du contenu du texte, nous devons modifier ces zones de texte simultanément, nous devons donc les traiter comme un groupe, et la logique devient plus compliquée. S'il est décrit par un fichier de configuration, il peut effectuer directement un dessin multicouche sans traitement logique compliqué. Compte tenu de la faisabilité du retour sur investissement de l'entreprise et des fonctions en ligne à court terme, nous avons adopté la première méthode et nous nous sommes inspirés des normes de production matérielle de l'équipe Butter Camera pour concevoir une structure JSON pour décrire les attributs de composition et les paramètres de rendu.
3.2 Rendu latéral
Dans le scénario de montage vidéo, le traitement de texte nécessite deux parties : la mise en page du texte et le dessin du texte. Pour la composition de texte, la plate-forme iOS utilise le cadre sous-jacent de CoreText pour le traitement de la composition, tandis qu'Android peut obtenir les résultats du traitement des polices FreeType sous-jacent via FontMetrics, etc. Qu'un morceau de texte soit formaté dans son ensemble ou que la position de chaque texte soit calculée séparément, la consommation de performances du traitement global est la même. En termes de dessin de texte, il est nécessaire de trouver un équilibre entre la surcharge de performance et le coût de développement. Au final, iOS a adopté le framework QuartzCore et Android a utilisé Canvas pour le dessin de texte. De cette façon, lors de la prévisualisation, le texte peut être directement présenté sur la vue, prenant en charge l'édition et la prévisualisation en temps réel. Lorsque la vidéo doit être exportée, nous la traitons comme un autocollant et l'ajoutons à la vidéo. Prenant iOS comme exemple, l'architecture du composant Huazi est la suivante :
3.3 Conception du fichier de description
Comme mentionné ci-dessus, nous utilisons des fichiers json pour décrire les attributs de composition et les paramètres de rendu du modèle de texte. Une fois les ressources livrées au client, le client analysera les paramètres correspondants pour effectuer la composition du modèle de texte et la présentation de l'effet final. . Le contenu suivant sera impliqué dans le fichier de description :
(1) Attributs de mise en page du texte 
- baseline : ligne de base du caractère, la ligne de base est une ligne virtuelle
- ascension : la distance recommandée entre le point le plus élevé du glyphe et la ligne de base
- descente : la distance recommandée entre le point le plus bas du glyphe et la ligne de base
- interlignage : interligne, c'est-à-dire la distance entre la descente de la ligne précédente et la montée de la ligne suivante
- largeur d'avance : la distance entre l'origine et l'origine du glyphe suivant
- relèvement du côté gauche : la distance entre l'origine et l'extrême gauche du glyphe
- relèvement du côté droit : la distance entre le côté le plus à droite du glyphe et l'origine du glyphe suivant
- boîte englobante : le plus petit rectangle contenant le glyphe
- x-height : fait généralement référence à la distance recommandée entre le point le plus élevé de la lettre minuscule x et la ligne de base
- Cap-height : fait généralement référence à la distance recommandée entre le point le plus élevé de H ou I et la ligne de base
(2) Combinaison d'objets texte La figure ci-dessous est un exemple de combinaison de deux zones de dessin de texte
3.4 Processus de composition et de dessin
Dans notre modèle de texte, la composition et le dessin sont indissociables et doivent être intercalés dans la logique du code pour le traitement. Notre étape de dessin consiste à dessiner couche par couche de la couche inférieure à la couche supérieure, mais comme certains processus de dessin consomment beaucoup de temps, afin d'éviter de bloquer le fil principal, nous utilisons la technologie de dessin asynchrone. Dans le processus de dessin asynchrone, nous plaçons certains processus de dessin fastidieux dans le fil d'arrière-plan pour le traitement, afin de ne pas affecter l'utilisation normale des utilisateurs. En même temps, dans le processus de dessin asynchrone, nous calculerons également la mise en page du texte, afin que nous puissions obtenir rapidement les informations pertinentes du texte dans le processus de dessin ultérieur, améliorant ainsi l'efficacité du dessin. En général, en adoptant la méthode de dessin asynchrone, nous pouvons nous assurer que le processus de composition et de dessin du modèle de texte se déroule sans heurts sans causer trop d'interférences à l'utilisateur.
04 Difficultés et défis
1. Alignement des effets multi-terminaux
Notre projet prend en charge le rendu Web, iOS et Android, mais parce que la solution cross-end générale doit utiliser le rendu OpenGL au niveau de la couche inférieure, et les contraintes de ressources humaines à ce moment-là ont rendu difficile la réalisation à court terme. Par conséquent, nous avons adopté une méthode de rendu indépendante multi-terminal, et chaque plate-forme dispose d'une solution de rendu indépendante. Cette méthode pose également un problème : l'effet de rendu des différentes plates-formes sera différent. Pour résoudre ce problème, nous devons nous assurer de la cohérence des effets multi-terminaux. Comme il est difficile d'aplanir les différences au niveau technique, nous avons décidé d'atteindre la cohérence par l'unification des règles et des normes. Lors de la conception du format du fichier json, nous avons unifié les normes de rendu multi-terminal, par exemple si la position initiale de la décoration de texte par rapport au texte est alignée dans le coin supérieur gauche ou centrée, et l'origine des coordonnées est unifié. En parallèle, nous avons également unifié les unités utilisées par les paramètres correspondants, afin d'assurer au maximum la cohérence de l'effet de rendu final. De cette façon, quelle que soit la plate-forme sur laquelle le rendu est effectué, nous pouvons obtenir des résultats cohérents, ce qui rend l'expérience utilisateur plus uniforme et plus agréable.
2. Pré-composition du texte
Dans le modèle de texte, nous divisons la taille de police en deux types : taille de police fixe et taille de police non fixe. Pour une taille de police fixe, nous pouvons directement effectuer le calcul et le dessin de la mise en page du texte. Cependant, pour les polices avec une taille de police non fixe, nous devons effectuer des calculs de pré-composition pour calculer la taille de police correspondante sous le contenu du texte actuel. Certaines solutions utilisent ici la méthode de dichotomie, définissez d'abord une valeur de taille de police plus grande et approchez progressivement la valeur correcte dans la plage de 0 à la valeur de taille de police, mais cela entraîne en fait une perte de temps inutile, combinée à la logique de base et aux limitations du texte conditions de mise en page, on peut faire un algorithme avec une complexité temporelle proche de O(1) : calculer la hauteur de caractère maximum -> calculer la hauteur de caractère minimum -> calculer la hauteur de caractère de la plus longue ligne de mots -> calculer la hauteur de caractère en fonction au nombre de lignes -> calculer la hauteur du caractère final -> Calculer la taille de la police en fonction de la hauteur du caractère. Lorsque la technologie de composition CoreText est utilisée dans iOS, dans un petit nombre de cas, le texte qui ne peut pas être rempli sera automatiquement coupé. L'utilisation directe de la taille de police calculée entraînera la coupe d'une partie du texte. Par conséquent, les résultats ci-dessus doivent être utilisé comme résultats d'estimation, et la taille sera réduite de 1 étape par étape jusqu'à ce que Peut remplir le chemin.
CGFloat ascent, descent;
UIFont *font = [self.calFont fontWithSize:size];
CTFontRef fontRefMeasure = (__bridge CTFontRef)font;
[attrString addAttribute:(id)kCTFontAttributeName value:(__bridge id)fontRefMeasure range:NSMakeRange(0, attrString.length)];
CTLineRef line = CTLineCreateWithAttributedString((__bridge CFAttributedStringRef)attrString);
CTLineGetTypographicBounds(line, &ascent, &descent, NULL);
//calculate max font size
CGFloat calFontHeight = MIN(height, width);
self.maxFontHeight = calFontHeight;
//calculate min font size
CGFloat maxLine = self.document.maxLine * BDTZBigFontDataOriginScale;
if (maxLine <= 0) {
maxLine = 1;
}
calFontHeight = [self itemWidth] / (maxLine + (maxLine - 1) * (self.leadingRatio * BDTZBigFontDataOriginScale - 1));
self.minFontHeight = MIN(self.maxFontHeight, calFontHeight);
// longest column
int64_t n = 0;
NSArray *strArray = [self.document.content componentsSeparatedByString:@"\n"];
NSString *measureStr = self.document.content;
// 这里是针对多行文本的处理，循环次数为行数，量级较小（一般为1-10行）
for (NSString *str in strArray) {
if (str.length > n) {
n = str.length;
measureStr = str;
}
}
CGFloat fontWidthRatioOrigin = (self.document.fontWidthRatio * BDTZBigFontDataOriginScale);
CGFloat trackingRatio = (self.document.trackingRatio * BDTZBigFontDataOriginScale) * (ascent + descent) / ascent;
CGRect rect = [@"我" boundingRectWithSize:CGSizeMake(CGFLOAT_MAX, CGFLOAT_MAX) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:self.calFont} context:nil];
CGFloat fontWidthRatio = fontWidthRatioOrigin > 0 ? fontWidthRatioOrigin * (ascent + descent) / ascent : rect.size.width / rect.size.height;
CGFloat fontHeight = width / (n * fontWidthRatio + n * trackingRatio);
if (strArray.count > 1) {
//calculate font size accoring column count
calFontHeight = [self itemWidth] / (strArray.count + (strArray.count - 1) * (self.leadingRatio * BDTZBigFontDataOriginScale - 1));
//take the min value of the above two font sizes
fontHeight = MIN(fontHeight, calFontHeight);
}
if (fontHeight > self.maxFontHeight) {
fontHeight = self.maxFontHeight;
} else if (fontHeight < self.minFontHeight) {
fontHeight = self.minFontHeight;
}
CGFloat calSize = fontHeight;
calFontHeight = [self calculateFontHeightSize:calSize];
calSize = floorf(calSize / (calFontHeight * (ascent + descent) / ascent) * calSize);
//exact value, calculate repeatedly with frame until the path can be filled
//根据估算结果，将size逐次减1，直至能填入path，此处代码省略
if (calSize <= 0) {
return calSize;
}
calFontHeight = [self calculateFontHeightSize:calSize];
self.fontHeight = calFontHeight * (ascent + descent) / ascent;
self.font = [self.calFont fontWithSize:calSize];
3. Performances de dessin
L'aperçu en temps réel du modèle de texte doit être dessiné fréquemment, ce qui entraînera une charge importante pour le processeur, entraînant un décalage. Afin de résoudre ce problème, nous devons utiliser le dessin asynchrone. Plus précisément, nous pouvons créer une file d'attente série asynchrone pour stocker l'état du contenu textuel de chaque opération utilisateur. Chaque fois que l'utilisateur effectue une modification, nous mettons en file d'attente l'état actuel et attendons que le thread d'arrière-plan dessine de manière asynchrone. Une fois l'état précédent dessiné, nous retirons l'état suivant à dessiner de la file d'attente jusqu'à ce que tous les états soient dessinés. De cette manière, un dessin asynchrone est réalisé pour éviter que le fil principal ne soit bloqué, et les résultats de chaque modification par l'utilisateur sont entièrement présentés. Afin d'optimiser davantage l'expérience utilisateur des modèles de texte, en plus du dessin asynchrone, vous pouvez également envisager d'utiliser un mécanisme de mise en cache pour améliorer les performances de rendu. Lorsque l'utilisateur opère sur le modèle de texte, la vue de texte sera re-mise en page et dessinée. Si le modèle entier est redessiné à chaque fois, non seulement cela consommera beaucoup de ressources CPU, mais cela réduira également l'expérience utilisateur. Par conséquent, nous pouvons utiliser le cache pour stocker la vue du modèle dessiné.Lorsque l'utilisateur modifie le contenu du texte, seule la partie modifiée doit être redessinée au lieu de la vue entière. De cette façon, nous pouvons améliorer les performances de rendu tout en réduisant la consommation de ressources et en améliorant la réactivité du système.
4. Optimisation de la mémoire
Nos modèles de texte sont principalement utilisés dans des scénarios de montage vidéo, et les utilisateurs doivent effectuer un zoom avant ou arrière sur les modèles de texte en fonction de situations spécifiques. Si la méthode d'actualisation du dessin vectoriel pur est utilisée, lorsque l'utilisateur agrandit le modèle de texte dans une certaine mesure, l'utilisation de la mémoire sera très élevée. De plus, nos utilisateurs ajoutent généralement de nombreux matériaux dans l'éditeur, tels que des autocollants, des effets spéciaux, des sous-titres, etc., et chacun de ces matériaux prend beaucoup de mémoire. Après une période d'utilisation, la mémoire est susceptible d'augmenter au seuil du MOO, provoquant le blocage de l'application. Par conséquent, nous contrôlons actuellement la mémoire d'un seul modèle de texte à moins de 20 M, et calculons les seuils de largeur et de hauteur requis pour que le modèle de texte atteigne la clarté attendue en fonction des différentes largeurs et hauteurs vidéo, afin d'atteindre un équilibre entre la clarté et l'utilisation de la mémoire. Chaque modèle de texte a un paramètre d'équilibre différent. Bien qu'il ne s'agisse que d'un détail d'optimisation de la mémoire, il a joué un grand rôle dans le contrôle de l'utilisation de la mémoire du matériel et du taux de MOO en ligne.
05 Épilogue
Dans le monde du montage vidéo, le rendu de texte enrichi est un processus assez complexe. En ce qui concerne le rendu final, il n'y a pas de solution unique, seulement la solution la plus appropriée pour une scène spécifique. Lors du processus de conception et de mise en œuvre d'une solution de rendu de modèle de texte, de nombreux détails doivent être pris en compte. Dans le même temps, il est également nécessaire d'avoir une compréhension approfondie des formats de fichiers des logiciels de conception grand public tels que PS et Figma. Notre équipe fournit des solutions techniques liées aux modèles de texte statique, qui peuvent répondre aux scénarios de rendu de texte enrichi les plus courants. L'idée générale est à peu près similaire pour la mise en page du texte et le dessin. Dans cet article, nous présentons les concepts de base et les fonctionnalités de texte enrichi pour aider les lecteurs à mieux comprendre nos solutions techniques. Cependant, même avec la solution que nous fournissons, de nombreux détails doivent être pris en compte lors de sa mise en œuvre. Nous devons tenir compte de la taille de la police, de la couleur, de l'alignement, de l'espacement des caractères, de l'espacement des lignes et d'autres facteurs pour garantir que le texte enrichi rendu peut produire l'effet escompté. Par conséquent, afin d'obtenir le meilleur effet de rendu de texte enrichi, il doit investir beaucoup de temps et d'efforts dans la conception et la mise en œuvre. Ce n'est qu'en comprenant profondément les caractéristiques et les principes de conception du texte enrichi que nous pouvons offrir aux utilisateurs une expérience de montage vidéo de haute qualité.
--FIN--
Lecture recommandée : Parler de l'application anti-triche des algorithmes de graphes dans les scénarios d'événements
Méthode de décomposition d'action dans une application d'animation d'images
Performance Platform Data Acceleration Road
Montage de la pratique d'arrangement du processus de production vidéo AIGC
Les ingénieurs de Baidu parlent de la compréhension vidéo