Autor | Lok'tar ogar
guía
Basado en la práctica de desarrollo de las plantillas de texto de la aplicación Duka Editing, este artículo comparte la solución técnica de las capacidades de representación de plantillas de texto estático en escenarios de edición de video. Como superconjunto de la solución de representación de texto enriquecido, esta solución técnica puede extenderse a otros escenarios que requieren una representación de texto enriquecido compleja.
El texto completo tiene 6745 palabras y el tiempo de lectura esperado es de 17 minutos.
vistazo
Visualización del efecto de plantilla de texto: 
△Aplicación de plantilla de texto en edición Duka
01 fondo
Una de las principales ventajas de las herramientas de creación de videos es su rica biblioteca de materiales, que incluye varios materiales de video, materiales de audio, materiales adhesivos, etc. La plantilla de texto también es una parte integral. La plantilla de texto proporciona una función de edición de texto enriquecido, lo que permite a los usuarios agregar información de texto con un estilo más hermoso en el video, lo que aumenta la diversidad de materiales de video. Además, a través del estilo preestablecido, los usuarios pueden elegir de manera más conveniente la plantilla de texto que más les convenga, lo que ahorra el tiempo de selección de material y mejora la experiencia del usuario. En la versión anterior de Duka, no proporcionamos el tipo de material de la plantilla de texto. Para mejorar la competitividad de los productos y aumentar la tasa de penetración de los materiales, llevamos a cabo cierto trabajo de investigación y desarrollo y, finalmente, lanzamos los materiales de plantilla de texto. Estos materiales de plantillas de texto no solo pueden satisfacer las necesidades de los usuarios, sino que también les brindan más inspiración e ideas creativas. Al mismo tiempo, actualizamos y optimizamos constantemente nuestra biblioteca de materiales para garantizar que los usuarios puedan obtener los recursos materiales más recientes y de la más alta calidad. Los gráficos y los estilos de texto que debe presentar la plantilla de texto son relativamente complejos. A continuación, se enumeran las características admitidas por la plantilla de texto de Duka:
02 diseño general
Sobre la base de la plataforma de materiales que hemos creado, hemos agregado un nuevo tipo de plantilla de texto y hemos proporcionado funciones de edición, vista previa, configuración y en línea de materiales en la plataforma de materiales. Al combinar la producción de material y la vista previa, puede obtener una vista previa del efecto recién ajustado en la misma interfaz, hacer coincidir directamente la biblioteca de fuentes de Duka y modificar directamente los recursos de imagen. Este método de producción de material es altamente reutilizable.Usando una plantilla de texto, cambiando una imagen de fondo y agregando un trazo, se puede producir directamente otra plantilla de texto. Después de publicar esta plantilla y exportar el diagrama de efectos, ingresará a la cola para ser revisada, y podrá configurarse y ejecutarse después de la revisión. 
Hasta ahora, hemos lanzado 361 conjuntos de plantillas de texto y completamos el enlace completo de [Producción de materiales] - [Vista previa de la plataforma de materiales] - [Entrega de materiales y carga del cliente] - [Representación del cliente].
03 Realización de funciones
3.1 Producción de materiales
En la actualidad, el formato de material principal en la industria de edición de video generalmente adopta archivos de recursos y archivos de configuración (archivos de descripción). Entre ellos, los archivos de recursos incluyen recursos de imágenes y archivos de fuentes, mientras que los archivos de configuración se utilizan principalmente para describir los atributos de composición tipográfica y los parámetros de representación de las plantillas de texto. La ventaja de este método es que el lado de la producción solo necesita describir las características relevantes a través de campos específicos, y puede presentarse en el lado de la representación. Este método es muy flexible y puede iterar funciones relacionadas de simples a complejas según las necesidades de escenarios específicos, mientras que el costo de implementación es relativamente bajo. Sin embargo, la desventaja es que la forma de producción del material se personaliza, lo que requiere una cierta cantidad de costos de diseño y aprendizaje. Además, existe otro método de producción de software de diseño profesional, tomando Photoshop (PS) como ejemplo. PS tiene documentos de formato de archivo relativamente maduros, incluidas varias estructuras de datos, y puede usar directamente archivos PSD para analizar atributos gráficos y de texto para la representación. La ventaja de este método es que el método de producción de materiales es más general y el diseño casi no tiene costo de aprendizaje. Sin embargo, la desventaja es que algunas características que necesitamos no pueden ser simplemente satisfechas por PSD, como el efecto de sombra multicapa, que es el efecto que se obtiene al superponer varios cuadros de texto. Al modificar el contenido del texto, debemos modificar estos cuadros de texto simultáneamente, por lo que debemos tratarlos como un grupo y la lógica se vuelve más complicada. Si se describe mediante un archivo de configuración, puede realizar directamente un dibujo multicapa sin un procesamiento lógico complicado. Teniendo en cuenta la viabilidad del retorno de la inversión comercial y las funciones en línea a corto plazo, adoptamos el primer método, nos basamos en los estándares de producción de materiales del equipo de Butter Camera y diseñamos una estructura JSON para describir los atributos de composición tipográfica y los parámetros de representación.
3.2 Representación lateral
En el escenario de edición de video, el procesamiento de texto requiere dos partes: diseño de texto y dibujo de texto. Para la composición tipográfica de texto, la plataforma iOS utiliza el marco subyacente de CoreText para el procesamiento de la composición tipográfica, mientras que Android puede obtener los resultados del procesamiento de fuentes subyacente de FreeType a través de FontMetrics, etc. Independientemente de si un fragmento de texto se formatea como un todo o si la posición de cada texto se calcula por separado, el consumo de rendimiento del procesamiento general es el mismo. En términos de dibujo de texto, es necesario lograr un equilibrio entre los gastos generales de rendimiento y el costo de desarrollo. Al final, iOS adoptó el marco QuartzCore y Android usó Canvas para dibujar texto. De esta manera, al obtener una vista previa, el texto se puede presentar directamente en la vista, lo que admite la edición y la vista previa en tiempo real. Cuando es necesario exportar el video, lo procesamos como una etiqueta y lo agregamos al video. Tomando iOS como ejemplo, la arquitectura de componentes de Huazi es la siguiente:
3.3 Diseño del archivo de descripción
Como se mencionó anteriormente, usamos archivos json para describir los atributos de composición tipográfica y los parámetros de representación de la plantilla de texto. Después de que los recursos se entregan al cliente, el cliente analizará los parámetros correspondientes para realizar la composición tipográfica de la plantilla de texto y la presentación del efecto final. . El siguiente contenido estará involucrado en el archivo de descripción:
(1) Atributos de diseño de texto 
- línea de base: línea de base del personaje, la línea de base es una línea virtual
- ascenso: la distancia recomendada desde el punto más alto del glifo hasta la línea de base
- descenso: la distancia recomendada desde el punto más bajo del glifo hasta la línea de base
- interlineado: distancia entre líneas, es decir, la distancia entre la bajada de la línea anterior y la subida de la siguiente
- ancho de avance: la distancia desde el origen hasta el siguiente origen del glifo
- orientación del lado izquierdo: la distancia desde el origen hasta el extremo izquierdo del glifo
- orientación del lado derecho: la distancia desde el lado más a la derecha del glifo hasta el origen del siguiente glifo
- cuadro delimitador: el rectángulo más pequeño que contiene el glifo
- x-height: generalmente se refiere a la distancia recomendada desde el punto más alto de la letra x minúscula hasta la línea de base
- Altura de la tapa: generalmente se refiere a la distancia recomendada desde el punto más alto de H o I hasta la línea de base
(2) Combinación de objetos de texto La siguiente figura es un ejemplo de la combinación de dos áreas de dibujo de texto
3.4 Proceso de composición tipográfica y dibujo
En nuestra plantilla de texto, la composición tipográfica y el dibujo son inseparables y deben intercalarse en la lógica del código para su procesamiento. Nuestro paso de dibujo es dibujar capa por capa desde la capa inferior hasta la capa superior, pero debido a que algunos procesos de dibujo consumen mucho tiempo, para evitar bloquear el hilo principal, utilizamos tecnología de dibujo asíncrono. En el proceso de dibujo asíncrono, colocamos algunos procesos de dibujo que consumen mucho tiempo en el subproceso de fondo para su procesamiento, a fin de no afectar el uso normal de los usuarios. Al mismo tiempo, en el proceso de dibujo asíncrono, también calcularemos el diseño del texto, para que podamos obtener rápidamente la información relevante del texto en el proceso de dibujo posterior, mejorando así la eficiencia del dibujo. En general, al adoptar el método de dibujo asincrónico, podemos asegurarnos de que el proceso de composición tipográfica y dibujo de la plantilla de texto se realice sin problemas y sin causar demasiada interferencia al usuario.
04 Dificultades y retos
1. Alineación de efectos multiterminal
Nuestro proyecto es compatible con el renderizado web, iOS y Android, pero debido a que la solución cruzada general necesita usar el renderizado OpenGL en la capa inferior, y las limitaciones de recursos humanos en ese momento dificultaron lograrlo a corto plazo. Por lo tanto, adoptamos un método de renderizado independiente de múltiples terminales, y cada plataforma tiene una solución de renderizado independiente. Este método también trae un problema: el efecto de renderizado de diferentes plataformas será diferente. Para resolver este problema, necesitamos asegurar la consistencia de los efectos multiterminal. Dado que es difícil suavizar las diferencias a nivel técnico, decidimos lograr la coherencia a través de la unificación de reglas y estándares. Al diseñar el formato del archivo json, unificamos los estándares para la representación multiterminal, como si la posición inicial de la decoración del texto en relación con el texto está alineada en la esquina superior izquierda o centrada, y el origen de las coordenadas es unificado Al mismo tiempo, también unificamos las unidades utilizadas por los parámetros correspondientes, para garantizar la mayor consistencia del efecto de renderizado final. De esta manera, sin importar en qué plataforma se renderice, podemos obtener resultados consistentes, haciendo que la experiencia del usuario sea más uniforme y buena.
2. Precomposición de texto
En la plantilla de texto, dividimos el tamaño de fuente en dos tipos: tamaño de fuente fijo y tamaño de fuente no fijo. Para un tamaño de fuente fijo, podemos realizar directamente el cálculo y el dibujo del diseño del texto. Sin embargo, para las fuentes con un tamaño de fuente no fijo, debemos realizar cálculos de composición tipográfica previa para calcular el tamaño de fuente correspondiente en el contenido del texto actual. Algunas soluciones aquí usan el método de dicotomía, primero establecen un valor de tamaño de fuente más grande y se acercan gradualmente al valor correcto dentro del rango de 0 al valor del tamaño de fuente, pero esto en realidad causa una pérdida de tiempo innecesaria, combinada con la lógica básica y las limitaciones del texto. Condiciones de diseño, podemos hacer un algoritmo con una complejidad de tiempo cercana a O(1): calcule la altura máxima del carácter -> calcule la altura mínima del carácter -> calcule la altura del carácter de la línea de palabras más larga -> calcule la altura del carácter según al número de líneas -> calcule la altura del carácter final -> Calcule el tamaño de fuente de acuerdo con la altura del carácter. Cuando se utiliza la tecnología de composición tipográfica CoreText en iOS, en una pequeña cantidad de casos, el texto que no se puede completar se cortará automáticamente. El uso directo del tamaño de fuente calculado hará que parte del texto se corte. Por lo tanto, los resultados anteriores deberían ser utilizado como resultados de estimación, y el tamaño se reducirá en 1 paso a paso hasta que pueda completar la ruta.
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. Rendimiento de dibujo
La vista previa en tiempo real de la plantilla de texto debe dibujarse con frecuencia, lo que supondrá una gran carga para la CPU y provocará un retraso. Para resolver este problema, debemos utilizar el dibujo asíncrono. Específicamente, podemos crear una cola en serie asíncrona para almacenar el estado del contenido de texto de cada operación del usuario. Cada vez que el usuario realiza una modificación, ponemos en cola el estado actual y esperamos a que el subproceso de fondo se dibuje de forma asíncrona. Después de dibujar el estado anterior, sacamos el siguiente estado a dibujar de la cola hasta que se dibujan todos los estados. De esta manera, se realiza un dibujo asincrónico para evitar que el hilo principal se atasque, y se presentan completamente los resultados de cada modificación por parte del usuario. Para optimizar aún más la experiencia del usuario de las plantillas de texto, además del dibujo asincrónico, también puede considerar el uso de un mecanismo de almacenamiento en caché para mejorar el rendimiento de la representación. Cuando el usuario opera en la plantilla de texto, la vista de texto se volverá a diseñar y dibujar. Si la plantilla completa se vuelve a dibujar cada vez, no solo consumirá una gran cantidad de recursos de la CPU, sino que también reducirá la experiencia del usuario. Por lo tanto, podemos usar el caché para almacenar la vista de plantilla dibujada.Cuando el usuario modifica el contenido del texto, solo se debe volver a dibujar la parte modificada en lugar de la vista completa. De esta forma, podemos mejorar el rendimiento del renderizado mientras reducimos el consumo de recursos y mejoramos la capacidad de respuesta del sistema.
4. Optimización de la memoria
Nuestras plantillas de texto se utilizan principalmente en escenarios de edición de video, y los usuarios necesitan acercar o alejar las plantillas de texto según situaciones específicas. Si se utiliza el método de actualización de dibujo vectorial puro, cuando el usuario amplía la plantilla de texto hasta cierto punto, el uso de la memoria será muy alto. Además, nuestros usuarios suelen agregar muchos materiales en el editor, como calcomanías, efectos especiales y subtítulos, etc., y cada uno de estos materiales ocupa mucha memoria. Después de un período de uso, es probable que la memoria aumente. al umbral OOM, lo que hace que la aplicación se bloquee. Por lo tanto, actualmente controlamos la memoria de una sola plantilla de texto a menos de 20M y calculamos los umbrales de ancho y alto requeridos para que la plantilla de texto logre la claridad esperada de acuerdo con diferentes anchos y alturas de video, para lograr un equilibrio entre la claridad y el uso de la memoria Cada plantilla de texto tiene un parámetro de saldo diferente. Aunque esto es solo un detalle de optimización de la memoria, ha jugado un papel importante en el control del uso de la memoria del material y la tasa de OOM en línea.
05 Epílogo
En el mundo de la edición de video, la representación de texto enriquecido es un proceso bastante complejo. En lo que respecta al renderizado final, no existe una solución única para todos, solo la solución más adecuada para una escena específica. En el proceso de diseño e implementación de una solución de representación de plantillas de texto, hay muchos detalles a considerar. Al mismo tiempo, también es necesario tener un conocimiento profundo de los formatos de archivo de los principales programas de diseño como PS y Figma. Nuestro equipo proporciona soluciones técnicas relacionadas con plantillas de texto estático, que pueden cumplir con los escenarios de representación de texto enriquecido más comunes. La idea general es más o menos similar para el diseño del texto y el dibujo. En este artículo, presentamos conceptos básicos y funciones de texto enriquecido para ayudar a los lectores a comprender mejor nuestras soluciones técnicas. Sin embargo, incluso con la solución que brindamos, se deben considerar muchos detalles en su implementación. Necesitamos considerar el tamaño de fuente, el color, la alineación, el espacio entre caracteres, el espacio entre líneas y otros factores para garantizar que el texto enriquecido renderizado pueda lograr el efecto esperado. Por lo tanto, para lograr el mejor efecto de representación de texto enriquecido, se necesita invertir mucho tiempo y esfuerzo en el diseño y la implementación. Solo mediante una comprensión profunda de las características y los principios de diseño del texto enriquecido podemos brindar a los usuarios una experiencia de edición de video de alta calidad.
--FIN--
Lectura recomendada: Hablando sobre la aplicación anti-trampa de algoritmos gráficos en escenarios de eventos
Serverless: práctica de escalado flexible basada en retratos de servicio personalizados
Método de descomposición de acciones en la aplicación de animación de imágenes.
Carretera de aceleración de datos de la plataforma de rendimiento
Edición AIGC Proceso de producción de video Práctica de arreglos
Los ingenieros de Baidu hablan sobre la comprensión del video