DelphiNoticiasWebinar

Potencie su interfaz de usuario con Skia4Delphi – Webinar Replay

skia4delphi

¿Qué tienen en común Google Chrome, Mozilla Firefox, Chrome OS, Android, Flutter y Delphi? Tienen gráficos acelerados gracias a Skia. Esta biblioteca de gráficos 2D multiplataforma de alto rendimiento está conquistando el mundo del desarrollo. Funciona con VCL y FireMonkey en todas las plataformas compatibles con Delphi. Una línea de código puede hacer que sus aplicaciones FireMonkey existentes sean más rápidas, o ir más allá y desbloquear nuevas funciones para interfaces de usuario impresionantes.

Skia4Delphi es un proyecto de código abierto de los ganadores y hermanos del Premio Spirit of Delphi, Paulo César Botelho Barbosa y Vinícius Felipe Botelho Barbosa. Entonces, ¿cómo usa Skia4Delphi y lleva el desarrollo de su aplicación al siguiente nivel? Has venido al lugar correcto.

Aquí hay algunos videos más cortos o puede ver la repetición completa :

Table of Contents

¿Qué es Skia, quieres preguntar?

Imagine que es un desarrollador de software que necesita llegar a todas las plataformas principales hoy en día. Sus opciones tradicionales son:

  • Nativo
    • Acceso directo al hardware
    • Código separado para cada plataforma
    • Mejor experiencia de usuario a costa de la productividad del desarrollador
  • Web/Nube
    • Mayormente código compartido
    • Separado del hardware
    • Mejor productividad del desarrollador a costa de la experiencia del usuario
sk01-4322124-2

Pero ahora tenemos… FireMonkey

  • Compilado nativo: acceso directo al hardware de la plataforma
  • Multiplataforma: una base de código para todas las plataformas
  • Diseñador visual basado en componentes: maximice la productividad del desarrollador
sk02-1924098-2

¿Cómo encaja Skia aquí? Presentamos… Google Skia

  • Google Skia es el motor de gráficos de código abierto para Google Chrome, Android, Flutter, Xamarin, Firefox y muchos otros.
  • Proporciona API 2D comunes que funcionan en una variedad de plataformas, abstrayendo complejidades en la implementación de bibliotecas de bajo nivel que utiliza detrás, como Vulkan, DirectX, Metal y otras, implementando muchas optimizaciones y nuevas características.
sk08-5574565-2
sk09-9714613-2
  • Construya un proyecto con Skia4Delphi + Delphi 11
    • Haz una hermosa aplicación con VCL o FMX
  • Publicarlo en GitHub
    • Incluya videos y capturas de pantalla, y luego compártalos en las redes sociales.
  • Gana premios y reconocimiento
    • El Gran Premio es un Mac Mini M1 de Apple para que pueda aprovechar el nuevo soporte para Apple Silicon en Delphi 11 Alexandria

Más detalles por venir: blogs.embarcadero.com/?p=140459

SIGUE EL PROYECTO

Más enlaces

notas

  1. Para la plataforma Mac, cuando GlobalUseMetal es cierto junto con GlobalUseSkia, el rendimiento con FMX clásico es similar.
  2. En iOS no hay enlace compartido (bibliotecas compartidas: dll, .so, .dylib), solo estático (en este caso .a). En este .a (equivalente a .lib en Windows), tiene todos los archivos obj generados, sin embargo, a pesar de tener 60 MB, el tamaño de la app resultante es mucho menor, pues solo se compila junto con las funciones utilizadas. En otras palabras, es común que las bibliotecas estáticas sean más grandes que las bibliotecas compartidas, pero la salida resultante es mucho más pequeña y no tiene más que el tamaño normal que tendría una biblioteca compartida.
 
sk04-5467807-2
  • Tanto JPEG como PNG son formatos de imagen de trama/mapa de bits
  • PNG no tiene pérdidas, con una reproducción 100% precisa de la imagen
  • JPEG tiene pérdida, pierde algo de fidelidad de imagen cada vez que se edita o comprime

Comparaciones de tamaño de archivo de imagen

sk05-9265466-2
sk06b-7005265-2
sk07-7735103-2

¿Animaciones vectoriales?

Lottie es un formato de animación basado en JSON.

Name Type Size Relative
dev_coding.tgs tgs (zipped json) 55,834
dev_coding.mp4 mpeg4 (lossy) 373,642 7x
dev_coding.json lottie (json) 583,485 10x
dev_coding.gif gif (lossless) 5,020,259 90x

Diseño de interfaz de usuario

  • SVG y Lottie facilitan al diseñador la creación de plantillas de interfaz de usuario fluidas y de alta resolución. Luego, con Skia4Delphi puede hacer que la interfaz de usuario coincida perfectamente.
  • Haz que el movimiento sea parte de tu UI/UX
  • Otros usos:
    • Acerca de pantallas, pantallas de presentación, instaladores, incorporación de usuarios, asistentes, etc.
sk08-5574565-2
sk09-9714613-2
  • Construya un proyecto con Skia4Delphi + Delphi 11
    • Haz una hermosa aplicación con VCL o FMX
  • Publicarlo en GitHub
    • Incluya videos y capturas de pantalla, y luego compártalos en las redes sociales.
  • Gana premios y reconocimiento
    • El Gran Premio es un Mac Mini M1 de Apple para que pueda aprovechar el nuevo soporte para Apple Silicon en Delphi 11 Alexandria

Más detalles por venir: blogs.embarcadero.com/?p=140459

SIGUE EL PROYECTO

Más enlaces

notas

  1. Para la plataforma Mac, cuando GlobalUseMetal es cierto junto con GlobalUseSkia, el rendimiento con FMX clásico es similar.
  2. En iOS no hay enlace compartido (bibliotecas compartidas: dll, .so, .dylib), solo estático (en este caso .a). En este .a (equivalente a .lib en Windows), tiene todos los archivos obj generados, sin embargo, a pesar de tener 60 MB, el tamaño de la app resultante es mucho menor, pues solo se compila junto con las funciones utilizadas. En otras palabras, es común que las bibliotecas estáticas sean más grandes que las bibliotecas compartidas, pero la salida resultante es mucho más pequeña y no tiene más que el tamaño normal que tendría una biblioteca compartida.
 
sk01-2434964-2

¿Por qué formatos vectoriales?

  • Tamaños de archivo mucho más pequeños
  • Infinitamente redimensionable y escalable
  • Animaciones más suaves
  • Edición y personalización más fáciles

¿Por qué gráficos vectoriales?

sk02-3368680-2

La fuente SVG es XML (que se comprime fácilmente a través de Zip)

sk03-3074924-2

PNG y JPEG son binarios (ya comprimidos)

sk04-5467807-2
  • Tanto JPEG como PNG son formatos de imagen de trama/mapa de bits
  • PNG no tiene pérdidas, con una reproducción 100% precisa de la imagen
  • JPEG tiene pérdida, pierde algo de fidelidad de imagen cada vez que se edita o comprime

Comparaciones de tamaño de archivo de imagen

sk05-9265466-2
sk06b-7005265-2
sk07-7735103-2

¿Animaciones vectoriales?

Lottie es un formato de animación basado en JSON.

Name Type Size Relative
dev_coding.tgs tgs (zipped json) 55,834
dev_coding.mp4 mpeg4 (lossy) 373,642 7x
dev_coding.json lottie (json) 583,485 10x
dev_coding.gif gif (lossless) 5,020,259 90x

Diseño de interfaz de usuario

  • SVG y Lottie facilitan al diseñador la creación de plantillas de interfaz de usuario fluidas y de alta resolución. Luego, con Skia4Delphi puede hacer que la interfaz de usuario coincida perfectamente.
  • Haz que el movimiento sea parte de tu UI/UX
  • Otros usos:
    • Acerca de pantallas, pantallas de presentación, instaladores, incorporación de usuarios, asistentes, etc.
sk08-5574565-2
sk09-9714613-2
  • Construya un proyecto con Skia4Delphi + Delphi 11
    • Haz una hermosa aplicación con VCL o FMX
  • Publicarlo en GitHub
    • Incluya videos y capturas de pantalla, y luego compártalos en las redes sociales.
  • Gana premios y reconocimiento
    • El Gran Premio es un Mac Mini M1 de Apple para que pueda aprovechar el nuevo soporte para Apple Silicon en Delphi 11 Alexandria

Más detalles por venir: blogs.embarcadero.com/?p=140459

SIGUE EL PROYECTO

Más enlaces

notas

  1. Para la plataforma Mac, cuando GlobalUseMetal es cierto junto con GlobalUseSkia, el rendimiento con FMX clásico es similar.
  2. En iOS no hay enlace compartido (bibliotecas compartidas: dll, .so, .dylib), solo estático (en este caso .a). En este .a (equivalente a .lib en Windows), tiene todos los archivos obj generados, sin embargo, a pesar de tener 60 MB, el tamaño de la app resultante es mucho menor, pues solo se compila junto con las funciones utilizadas. En otras palabras, es común que las bibliotecas estáticas sean más grandes que las bibliotecas compartidas, pero la salida resultante es mucho más pequeña y no tiene más que el tamaño normal que tendría una biblioteca compartida.
 
iconnnn-9733932-2

Beneficios SVG

  • Resolución independiente y escalable
  • Estilo (puede cambiar fácilmente de color)
  • Archivo mucho más pequeño
  • Para los íconos, siempre prefiera SVG sobre imágenes estáticas como PNG
  • Miles de iconos e imágenes gratuitos disponibles en la web

Beneficios de la animación de Lottie

sk01-2434964-2

¿Por qué formatos vectoriales?

  • Tamaños de archivo mucho más pequeños
  • Infinitamente redimensionable y escalable
  • Animaciones más suaves
  • Edición y personalización más fáciles

¿Por qué gráficos vectoriales?

sk02-3368680-2

La fuente SVG es XML (que se comprime fácilmente a través de Zip)

sk03-3074924-2

PNG y JPEG son binarios (ya comprimidos)

sk04-5467807-2
  • Tanto JPEG como PNG son formatos de imagen de trama/mapa de bits
  • PNG no tiene pérdidas, con una reproducción 100% precisa de la imagen
  • JPEG tiene pérdida, pierde algo de fidelidad de imagen cada vez que se edita o comprime

Comparaciones de tamaño de archivo de imagen

sk05-9265466-2
sk06b-7005265-2
sk07-7735103-2

¿Animaciones vectoriales?

Lottie es un formato de animación basado en JSON.

Name Type Size Relative
dev_coding.tgs tgs (zipped json) 55,834
dev_coding.mp4 mpeg4 (lossy) 373,642 7x
dev_coding.json lottie (json) 583,485 10x
dev_coding.gif gif (lossless) 5,020,259 90x

Diseño de interfaz de usuario

  • SVG y Lottie facilitan al diseñador la creación de plantillas de interfaz de usuario fluidas y de alta resolución. Luego, con Skia4Delphi puede hacer que la interfaz de usuario coincida perfectamente.
  • Haz que el movimiento sea parte de tu UI/UX
  • Otros usos:
    • Acerca de pantallas, pantallas de presentación, instaladores, incorporación de usuarios, asistentes, etc.
sk08-5574565-2
sk09-9714613-2
  • Construya un proyecto con Skia4Delphi + Delphi 11
    • Haz una hermosa aplicación con VCL o FMX
  • Publicarlo en GitHub
    • Incluya videos y capturas de pantalla, y luego compártalos en las redes sociales.
  • Gana premios y reconocimiento
    • El Gran Premio es un Mac Mini M1 de Apple para que pueda aprovechar el nuevo soporte para Apple Silicon en Delphi 11 Alexandria

Más detalles por venir: blogs.embarcadero.com/?p=140459

SIGUE EL PROYECTO

Más enlaces

notas

  1. Para la plataforma Mac, cuando GlobalUseMetal es cierto junto con GlobalUseSkia, el rendimiento con FMX clásico es similar.
  2. En iOS no hay enlace compartido (bibliotecas compartidas: dll, .so, .dylib), solo estático (en este caso .a). En este .a (equivalente a .lib en Windows), tiene todos los archivos obj generados, sin embargo, a pesar de tener 60 MB, el tamaño de la app resultante es mucho menor, pues solo se compila junto con las funciones utilizadas. En otras palabras, es común que las bibliotecas estáticas sean más grandes que las bibliotecas compartidas, pero la salida resultante es mucho más pequeña y no tiene más que el tamaño normal que tendría una biblioteca compartida.
 
sk10-1524992-2

Arquitectura

  • Implementado a través del Administrador de implementación
    • Simplemente haga clic derecho en “Habilitar Skia” para agregar al administrador de implementación.
  • Librerías nativas para todas las plataformas
    • OSXARM64, Win32, Win64, Android, Android64, iOSDevice64, Linux64 y OSX64
  • Componentes y bibliotecas de Delphi
    • Los componentes instalados en Tool Palette para VCL y FMX, con la biblioteca agregada a la ruta de búsqueda

Redistribuibles

Platform Library Size
Win32 sk4d.dll 18 mb
Win64 sk4d.dll 18 mb
Android libsk4d.so 19 mb
Android64 libsk4d.so 24 mb
iOSDevice64 sk4d.a 60 mb
Ubuntu64 libsk4d.so 22 mb
RedHat64 libsk4d.so 22 mb
OSX64 sk4d.dylib 20 mb
OSXARM64 sk4d.dylib 19 mb
Sizes based on v3.4.0 for 11.1 Alexandria

Calidad de renderizado

sk13-2916659-2
Alias ​​vs Suavizado

La calidad del dibujo se mejora, en algunos escenarios, significativamente

iconnnn-9733932-2

Beneficios SVG

  • Resolución independiente y escalable
  • Estilo (puede cambiar fácilmente de color)
  • Archivo mucho más pequeño
  • Para los íconos, siempre prefiera SVG sobre imágenes estáticas como PNG
  • Miles de iconos e imágenes gratuitos disponibles en la web

Beneficios de la animación de Lottie

sk01-2434964-2

¿Por qué formatos vectoriales?

  • Tamaños de archivo mucho más pequeños
  • Infinitamente redimensionable y escalable
  • Animaciones más suaves
  • Edición y personalización más fáciles

¿Por qué gráficos vectoriales?

sk02-3368680-2

La fuente SVG es XML (que se comprime fácilmente a través de Zip)

sk03-3074924-2

PNG y JPEG son binarios (ya comprimidos)

sk04-5467807-2
  • Tanto JPEG como PNG son formatos de imagen de trama/mapa de bits
  • PNG no tiene pérdidas, con una reproducción 100% precisa de la imagen
  • JPEG tiene pérdida, pierde algo de fidelidad de imagen cada vez que se edita o comprime

Comparaciones de tamaño de archivo de imagen

sk05-9265466-2
sk06b-7005265-2
sk07-7735103-2

¿Animaciones vectoriales?

Lottie es un formato de animación basado en JSON.

Name Type Size Relative
dev_coding.tgs tgs (zipped json) 55,834
dev_coding.mp4 mpeg4 (lossy) 373,642 7x
dev_coding.json lottie (json) 583,485 10x
dev_coding.gif gif (lossless) 5,020,259 90x

Diseño de interfaz de usuario

  • SVG y Lottie facilitan al diseñador la creación de plantillas de interfaz de usuario fluidas y de alta resolución. Luego, con Skia4Delphi puede hacer que la interfaz de usuario coincida perfectamente.
  • Haz que el movimiento sea parte de tu UI/UX
  • Otros usos:
    • Acerca de pantallas, pantallas de presentación, instaladores, incorporación de usuarios, asistentes, etc.
sk08-5574565-2
sk09-9714613-2
  • Construya un proyecto con Skia4Delphi + Delphi 11
    • Haz una hermosa aplicación con VCL o FMX
  • Publicarlo en GitHub
    • Incluya videos y capturas de pantalla, y luego compártalos en las redes sociales.
  • Gana premios y reconocimiento
    • El Gran Premio es un Mac Mini M1 de Apple para que pueda aprovechar el nuevo soporte para Apple Silicon en Delphi 11 Alexandria

Más detalles por venir: blogs.embarcadero.com/?p=140459

SIGUE EL PROYECTO

Más enlaces

notas

  1. Para la plataforma Mac, cuando GlobalUseMetal es cierto junto con GlobalUseSkia, el rendimiento con FMX clásico es similar.
  2. En iOS no hay enlace compartido (bibliotecas compartidas: dll, .so, .dylib), solo estático (en este caso .a). En este .a (equivalente a .lib en Windows), tiene todos los archivos obj generados, sin embargo, a pesar de tener 60 MB, el tamaño de la app resultante es mucho menor, pues solo se compila junto con las funciones utilizadas. En otras palabras, es común que las bibliotecas estáticas sean más grandes que las bibliotecas compartidas, pero la salida resultante es mucho más pequeña y no tiene más que el tamaño normal que tendría una biblioteca compartida.
 
sk07-8057418-2

Compatibilidad

  • Delphi 11+: todas las plataformas
  • Delphi 10.3+: Windows y Android
  • Delphi XE7+: Windows

Disponible a través de …

Biblioteca Skia4Delphi

  • La biblioteca existe conceptualmente en 3 partes:
    1. Skia API (Consola, VCL, FMX)
      • Acceso a la biblioteca pura de Google Skia, a través de una única unidad: Skia.pas
    2. Controles (VCL, FMX)
      • TSkAnimatedImage : Play Lottie, stickers de Telegram, GIF animado y WebP animado
      • TSkLabel : Múltiples estilos en el texto, grosor de fuente, alineación justificada, límite máximo de líneas, color de fondo en partes del texto, ancho y alto de tamaño automático, decoraciones avanzadas y más
      • TSkPaintBox : use el evento OnDraw para dibujar con la API de Skia directamente en el control
      • TSkSvg : cargar iconos svgs, cambiar colores y modo de ajuste
    3. Representación de aplicaciones (FMX)
      • Característica opcional que, cuando está habilitada, el motor de gráficos FMX será reemplazado por el motor de gráficos de Skia4Delphi, es decir, toda la aplicación, todos los controles en la pantalla, serán pintados internamente por el lienzo basado en Skia.
      • Es decir, al agregar solo 1 línea de código para habilitarlo , toda su aplicación automáticamente:
        • Mejorar la calidad de los dibujos; alisado de bordes dentados
        • Obtenga hasta un 50% de aumento en el rendimiento de los gráficos
        • Aumentar la fidelidad del dibujo
        • Agrega soporte para idiomas de derecha a izquierda
      • Lona FMX
sk08-6568482-2

Banco de renderizado de aplicaciones

sk09-9846875-2
sk10-1524992-2

Arquitectura

  • Implementado a través del Administrador de implementación
    • Simplemente haga clic derecho en “Habilitar Skia” para agregar al administrador de implementación.
  • Librerías nativas para todas las plataformas
    • OSXARM64, Win32, Win64, Android, Android64, iOSDevice64, Linux64 y OSX64
  • Componentes y bibliotecas de Delphi
    • Los componentes instalados en Tool Palette para VCL y FMX, con la biblioteca agregada a la ruta de búsqueda

Redistribuibles

Platform Library Size
Win32 sk4d.dll 18 mb
Win64 sk4d.dll 18 mb
Android libsk4d.so 19 mb
Android64 libsk4d.so 24 mb
iOSDevice64 sk4d.a 60 mb
Ubuntu64 libsk4d.so 22 mb
RedHat64 libsk4d.so 22 mb
OSX64 sk4d.dylib 20 mb
OSXARM64 sk4d.dylib 19 mb
Sizes based on v3.4.0 for 11.1 Alexandria

Calidad de renderizado

sk13-2916659-2
Alias ​​vs Suavizado

La calidad del dibujo se mejora, en algunos escenarios, significativamente

iconnnn-9733932-2

Beneficios SVG

  • Resolución independiente y escalable
  • Estilo (puede cambiar fácilmente de color)
  • Archivo mucho más pequeño
  • Para los íconos, siempre prefiera SVG sobre imágenes estáticas como PNG
  • Miles de iconos e imágenes gratuitos disponibles en la web

Beneficios de la animación de Lottie

sk01-2434964-2

¿Por qué formatos vectoriales?

  • Tamaños de archivo mucho más pequeños
  • Infinitamente redimensionable y escalable
  • Animaciones más suaves
  • Edición y personalización más fáciles

¿Por qué gráficos vectoriales?

sk02-3368680-2

La fuente SVG es XML (que se comprime fácilmente a través de Zip)

sk03-3074924-2

PNG y JPEG son binarios (ya comprimidos)

sk04-5467807-2
  • Tanto JPEG como PNG son formatos de imagen de trama/mapa de bits
  • PNG no tiene pérdidas, con una reproducción 100% precisa de la imagen
  • JPEG tiene pérdida, pierde algo de fidelidad de imagen cada vez que se edita o comprime

Comparaciones de tamaño de archivo de imagen

sk05-9265466-2
sk06b-7005265-2
sk07-7735103-2

¿Animaciones vectoriales?

Lottie es un formato de animación basado en JSON.

Name Type Size Relative
dev_coding.tgs tgs (zipped json) 55,834
dev_coding.mp4 mpeg4 (lossy) 373,642 7x
dev_coding.json lottie (json) 583,485 10x
dev_coding.gif gif (lossless) 5,020,259 90x

Diseño de interfaz de usuario

  • SVG y Lottie facilitan al diseñador la creación de plantillas de interfaz de usuario fluidas y de alta resolución. Luego, con Skia4Delphi puede hacer que la interfaz de usuario coincida perfectamente.
  • Haz que el movimiento sea parte de tu UI/UX
  • Otros usos:
    • Acerca de pantallas, pantallas de presentación, instaladores, incorporación de usuarios, asistentes, etc.
sk08-5574565-2
sk09-9714613-2
  • Construya un proyecto con Skia4Delphi + Delphi 11
    • Haz una hermosa aplicación con VCL o FMX
  • Publicarlo en GitHub
    • Incluya videos y capturas de pantalla, y luego compártalos en las redes sociales.
  • Gana premios y reconocimiento
    • El Gran Premio es un Mac Mini M1 de Apple para que pueda aprovechar el nuevo soporte para Apple Silicon en Delphi 11 Alexandria

Más detalles por venir: blogs.embarcadero.com/?p=140459

SIGUE EL PROYECTO

Más enlaces

notas

  1. Para la plataforma Mac, cuando GlobalUseMetal es cierto junto con GlobalUseSkia, el rendimiento con FMX clásico es similar.
  2. En iOS no hay enlace compartido (bibliotecas compartidas: dll, .so, .dylib), solo estático (en este caso .a). En este .a (equivalente a .lib en Windows), tiene todos los archivos obj generados, sin embargo, a pesar de tener 60 MB, el tamaño de la app resultante es mucho menor, pues solo se compila junto con las funciones utilizadas. En otras palabras, es común que las bibliotecas estáticas sean más grandes que las bibliotecas compartidas, pero la salida resultante es mucho más pequeña y no tiene más que el tamaño normal que tendría una biblioteca compartida.
 
iconnnn-7604419-2

Acerca de Skia4Delphi

  • Fuente abierta
    • Utiliza una bifurcación modificada de Skia de Google
  • Multiplataforma y multimarco
  • Biblioteca de gráficos 2D para Delphi
  • Dibujo
    • Texto
    • animaciones
    • Imágenes
  • Centrarse en la calidad y el rendimiento

Los cerebros detrás de Skia4Delphi

sk06-9811271-2

Esquiando por Delfos

  • ECONOMÍA – Proyecto de código abierto, completamente gratis
  • FÁCIL DE USAR: fácil de instalar, código simple
sk07-8057418-2

Compatibilidad

  • Delphi 11+: todas las plataformas
  • Delphi 10.3+: Windows y Android
  • Delphi XE7+: Windows

Disponible a través de …

Biblioteca Skia4Delphi

  • La biblioteca existe conceptualmente en 3 partes:
    1. Skia API (Consola, VCL, FMX)
      • Acceso a la biblioteca pura de Google Skia, a través de una única unidad: Skia.pas
    2. Controles (VCL, FMX)
      • TSkAnimatedImage : Play Lottie, stickers de Telegram, GIF animado y WebP animado
      • TSkLabel : Múltiples estilos en el texto, grosor de fuente, alineación justificada, límite máximo de líneas, color de fondo en partes del texto, ancho y alto de tamaño automático, decoraciones avanzadas y más
      • TSkPaintBox : use el evento OnDraw para dibujar con la API de Skia directamente en el control
      • TSkSvg : cargar iconos svgs, cambiar colores y modo de ajuste
    3. Representación de aplicaciones (FMX)
      • Característica opcional que, cuando está habilitada, el motor de gráficos FMX será reemplazado por el motor de gráficos de Skia4Delphi, es decir, toda la aplicación, todos los controles en la pantalla, serán pintados internamente por el lienzo basado en Skia.
      • Es decir, al agregar solo 1 línea de código para habilitarlo , toda su aplicación automáticamente:
        • Mejorar la calidad de los dibujos; alisado de bordes dentados
        • Obtenga hasta un 50% de aumento en el rendimiento de los gráficos
        • Aumentar la fidelidad del dibujo
        • Agrega soporte para idiomas de derecha a izquierda
      • Lona FMX
sk08-6568482-2

Banco de renderizado de aplicaciones

sk09-9846875-2
sk10-1524992-2

Arquitectura

  • Implementado a través del Administrador de implementación
    • Simplemente haga clic derecho en “Habilitar Skia” para agregar al administrador de implementación.
  • Librerías nativas para todas las plataformas
    • OSXARM64, Win32, Win64, Android, Android64, iOSDevice64, Linux64 y OSX64
  • Componentes y bibliotecas de Delphi
    • Los componentes instalados en Tool Palette para VCL y FMX, con la biblioteca agregada a la ruta de búsqueda

Redistribuibles

Platform Library Size
Win32 sk4d.dll 18 mb
Win64 sk4d.dll 18 mb
Android libsk4d.so 19 mb
Android64 libsk4d.so 24 mb
iOSDevice64 sk4d.a 60 mb
Ubuntu64 libsk4d.so 22 mb
RedHat64 libsk4d.so 22 mb
OSX64 sk4d.dylib 20 mb
OSXARM64 sk4d.dylib 19 mb
Sizes based on v3.4.0 for 11.1 Alexandria

Calidad de renderizado

sk13-2916659-2
Alias ​​vs Suavizado

La calidad del dibujo se mejora, en algunos escenarios, significativamente

iconnnn-9733932-2

Beneficios SVG

  • Resolución independiente y escalable
  • Estilo (puede cambiar fácilmente de color)
  • Archivo mucho más pequeño
  • Para los íconos, siempre prefiera SVG sobre imágenes estáticas como PNG
  • Miles de iconos e imágenes gratuitos disponibles en la web

Beneficios de la animación de Lottie

sk01-2434964-2

¿Por qué formatos vectoriales?

  • Tamaños de archivo mucho más pequeños
  • Infinitamente redimensionable y escalable
  • Animaciones más suaves
  • Edición y personalización más fáciles

¿Por qué gráficos vectoriales?

sk02-3368680-2

La fuente SVG es XML (que se comprime fácilmente a través de Zip)

sk03-3074924-2

PNG y JPEG son binarios (ya comprimidos)

sk04-5467807-2
  • Tanto JPEG como PNG son formatos de imagen de trama/mapa de bits
  • PNG no tiene pérdidas, con una reproducción 100% precisa de la imagen
  • JPEG tiene pérdida, pierde algo de fidelidad de imagen cada vez que se edita o comprime

Comparaciones de tamaño de archivo de imagen

sk05-9265466-2
sk06b-7005265-2
sk07-7735103-2

¿Animaciones vectoriales?

Lottie es un formato de animación basado en JSON.

Name Type Size Relative
dev_coding.tgs tgs (zipped json) 55,834
dev_coding.mp4 mpeg4 (lossy) 373,642 7x
dev_coding.json lottie (json) 583,485 10x
dev_coding.gif gif (lossless) 5,020,259 90x

Diseño de interfaz de usuario

  • SVG y Lottie facilitan al diseñador la creación de plantillas de interfaz de usuario fluidas y de alta resolución. Luego, con Skia4Delphi puede hacer que la interfaz de usuario coincida perfectamente.
  • Haz que el movimiento sea parte de tu UI/UX
  • Otros usos:
    • Acerca de pantallas, pantallas de presentación, instaladores, incorporación de usuarios, asistentes, etc.
sk08-5574565-2
sk09-9714613-2
  • Construya un proyecto con Skia4Delphi + Delphi 11
    • Haz una hermosa aplicación con VCL o FMX
  • Publicarlo en GitHub
    • Incluya videos y capturas de pantalla, y luego compártalos en las redes sociales.
  • Gana premios y reconocimiento
    • El Gran Premio es un Mac Mini M1 de Apple para que pueda aprovechar el nuevo soporte para Apple Silicon en Delphi 11 Alexandria

Más detalles por venir: blogs.embarcadero.com/?p=140459

SIGUE EL PROYECTO

Más enlaces

notas

  1. Para la plataforma Mac, cuando GlobalUseMetal es cierto junto con GlobalUseSkia, el rendimiento con FMX clásico es similar.
  2. En iOS no hay enlace compartido (bibliotecas compartidas: dll, .so, .dylib), solo estático (en este caso .a). En este .a (equivalente a .lib en Windows), tiene todos los archivos obj generados, sin embargo, a pesar de tener 60 MB, el tamaño de la app resultante es mucho menor, pues solo se compila junto con las funciones utilizadas. En otras palabras, es común que las bibliotecas estáticas sean más grandes que las bibliotecas compartidas, pero la salida resultante es mucho más pequeña y no tiene más que el tamaño normal que tendría una biblioteca compartida.
 
iconnnn-7604419-2

Acerca de Skia4Delphi

  • Fuente abierta
    • Utiliza una bifurcación modificada de Skia de Google
  • Multiplataforma y multimarco
  • Biblioteca de gráficos 2D para Delphi
  • Dibujo
    • Texto
    • animaciones
    • Imágenes
  • Centrarse en la calidad y el rendimiento

Los cerebros detrás de Skia4Delphi

sk06-9811271-2

Esquiando por Delfos

  • ECONOMÍA – Proyecto de código abierto, completamente gratis
  • FÁCIL DE USAR: fácil de instalar, código simple
sk07-8057418-2

Compatibilidad

  • Delphi 11+: todas las plataformas
  • Delphi 10.3+: Windows y Android
  • Delphi XE7+: Windows

Disponible a través de …

Biblioteca Skia4Delphi

  • La biblioteca existe conceptualmente en 3 partes:
    1. Skia API (Consola, VCL, FMX)
      • Acceso a la biblioteca pura de Google Skia, a través de una única unidad: Skia.pas
    2. Controles (VCL, FMX)
      • TSkAnimatedImage : Play Lottie, stickers de Telegram, GIF animado y WebP animado
      • TSkLabel : Múltiples estilos en el texto, grosor de fuente, alineación justificada, límite máximo de líneas, color de fondo en partes del texto, ancho y alto de tamaño automático, decoraciones avanzadas y más
      • TSkPaintBox : use el evento OnDraw para dibujar con la API de Skia directamente en el control
      • TSkSvg : cargar iconos svgs, cambiar colores y modo de ajuste
    3. Representación de aplicaciones (FMX)
      • Característica opcional que, cuando está habilitada, el motor de gráficos FMX será reemplazado por el motor de gráficos de Skia4Delphi, es decir, toda la aplicación, todos los controles en la pantalla, serán pintados internamente por el lienzo basado en Skia.
      • Es decir, al agregar solo 1 línea de código para habilitarlo , toda su aplicación automáticamente:
        • Mejorar la calidad de los dibujos; alisado de bordes dentados
        • Obtenga hasta un 50% de aumento en el rendimiento de los gráficos
        • Aumentar la fidelidad del dibujo
        • Agrega soporte para idiomas de derecha a izquierda
      • Lona FMX
sk08-6568482-2

Banco de renderizado de aplicaciones

sk09-9846875-2
sk10-1524992-2

Arquitectura

  • Implementado a través del Administrador de implementación
    • Simplemente haga clic derecho en “Habilitar Skia” para agregar al administrador de implementación.
  • Librerías nativas para todas las plataformas
    • OSXARM64, Win32, Win64, Android, Android64, iOSDevice64, Linux64 y OSX64
  • Componentes y bibliotecas de Delphi
    • Los componentes instalados en Tool Palette para VCL y FMX, con la biblioteca agregada a la ruta de búsqueda

Redistribuibles

Platform Library Size
Win32 sk4d.dll 18 mb
Win64 sk4d.dll 18 mb
Android libsk4d.so 19 mb
Android64 libsk4d.so 24 mb
iOSDevice64 sk4d.a 60 mb
Ubuntu64 libsk4d.so 22 mb
RedHat64 libsk4d.so 22 mb
OSX64 sk4d.dylib 20 mb
OSXARM64 sk4d.dylib 19 mb
Sizes based on v3.4.0 for 11.1 Alexandria

Calidad de renderizado

sk13-2916659-2
Alias ​​vs Suavizado

La calidad del dibujo se mejora, en algunos escenarios, significativamente

iconnnn-9733932-2

Beneficios SVG

  • Resolución independiente y escalable
  • Estilo (puede cambiar fácilmente de color)
  • Archivo mucho más pequeño
  • Para los íconos, siempre prefiera SVG sobre imágenes estáticas como PNG
  • Miles de iconos e imágenes gratuitos disponibles en la web

Beneficios de la animación de Lottie

sk01-2434964-2

¿Por qué formatos vectoriales?

  • Tamaños de archivo mucho más pequeños
  • Infinitamente redimensionable y escalable
  • Animaciones más suaves
  • Edición y personalización más fáciles

¿Por qué gráficos vectoriales?

sk02-3368680-2

La fuente SVG es XML (que se comprime fácilmente a través de Zip)

sk03-3074924-2

PNG y JPEG son binarios (ya comprimidos)

sk04-5467807-2
  • Tanto JPEG como PNG son formatos de imagen de trama/mapa de bits
  • PNG no tiene pérdidas, con una reproducción 100% precisa de la imagen
  • JPEG tiene pérdida, pierde algo de fidelidad de imagen cada vez que se edita o comprime

Comparaciones de tamaño de archivo de imagen

sk05-9265466-2
sk06b-7005265-2
sk07-7735103-2

¿Animaciones vectoriales?

Lottie es un formato de animación basado en JSON.

Name Type Size Relative
dev_coding.tgs tgs (zipped json) 55,834
dev_coding.mp4 mpeg4 (lossy) 373,642 7x
dev_coding.json lottie (json) 583,485 10x
dev_coding.gif gif (lossless) 5,020,259 90x

Diseño de interfaz de usuario

  • SVG y Lottie facilitan al diseñador la creación de plantillas de interfaz de usuario fluidas y de alta resolución. Luego, con Skia4Delphi puede hacer que la interfaz de usuario coincida perfectamente.
  • Haz que el movimiento sea parte de tu UI/UX
  • Otros usos:
    • Acerca de pantallas, pantallas de presentación, instaladores, incorporación de usuarios, asistentes, etc.
sk08-5574565-2
sk09-9714613-2
  • Construya un proyecto con Skia4Delphi + Delphi 11
    • Haz una hermosa aplicación con VCL o FMX
  • Publicarlo en GitHub
    • Incluya videos y capturas de pantalla, y luego compártalos en las redes sociales.
  • Gana premios y reconocimiento
    • El Gran Premio es un Mac Mini M1 de Apple para que pueda aprovechar el nuevo soporte para Apple Silicon en Delphi 11 Alexandria

Más detalles por venir: blogs.embarcadero.com/?p=140459

SIGUE EL PROYECTO

Más enlaces

notas

  1. Para la plataforma Mac, cuando GlobalUseMetal es cierto junto con GlobalUseSkia, el rendimiento con FMX clásico es similar.
  2. En iOS no hay enlace compartido (bibliotecas compartidas: dll, .so, .dylib), solo estático (en este caso .a). En este .a (equivalente a .lib en Windows), tiene todos los archivos obj generados, sin embargo, a pesar de tener 60 MB, el tamaño de la app resultante es mucho menor, pues solo se compila junto con las funciones utilizadas. En otras palabras, es común que las bibliotecas estáticas sean más grandes que las bibliotecas compartidas, pero la salida resultante es mucho más pequeña y no tiene más que el tamaño normal que tendría una biblioteca compartida.
 
sk03-6219443-2

Plataformas de esquí:

  • Todas las plataformas más populares del mundo, como:
    • ventanas
    • Mac OS
    • iOS (incluyendo simulador)
    • Android (incluyendo simulador)
    • Linux (distribuciones principales)
    • fucsiaOS
    • tizén
    • tvOS
    • reloj OS

Características de esquí

sk05v-6468229-2
iconnnn-7604419-2

Acerca de Skia4Delphi

  • Fuente abierta
    • Utiliza una bifurcación modificada de Skia de Google
  • Multiplataforma y multimarco
  • Biblioteca de gráficos 2D para Delphi
  • Dibujo
    • Texto
    • animaciones
    • Imágenes
  • Centrarse en la calidad y el rendimiento

Los cerebros detrás de Skia4Delphi

sk06-9811271-2

Esquiando por Delfos

  • ECONOMÍA – Proyecto de código abierto, completamente gratis
  • FÁCIL DE USAR: fácil de instalar, código simple
sk07-8057418-2

Compatibilidad

  • Delphi 11+: todas las plataformas
  • Delphi 10.3+: Windows y Android
  • Delphi XE7+: Windows

Disponible a través de …

Biblioteca Skia4Delphi

  • La biblioteca existe conceptualmente en 3 partes:
    1. Skia API (Consola, VCL, FMX)
      • Acceso a la biblioteca pura de Google Skia, a través de una única unidad: Skia.pas
    2. Controles (VCL, FMX)
      • TSkAnimatedImage : Play Lottie, stickers de Telegram, GIF animado y WebP animado
      • TSkLabel : Múltiples estilos en el texto, grosor de fuente, alineación justificada, límite máximo de líneas, color de fondo en partes del texto, ancho y alto de tamaño automático, decoraciones avanzadas y más
      • TSkPaintBox : use el evento OnDraw para dibujar con la API de Skia directamente en el control
      • TSkSvg : cargar iconos svgs, cambiar colores y modo de ajuste
    3. Representación de aplicaciones (FMX)
      • Característica opcional que, cuando está habilitada, el motor de gráficos FMX será reemplazado por el motor de gráficos de Skia4Delphi, es decir, toda la aplicación, todos los controles en la pantalla, serán pintados internamente por el lienzo basado en Skia.
      • Es decir, al agregar solo 1 línea de código para habilitarlo , toda su aplicación automáticamente:
        • Mejorar la calidad de los dibujos; alisado de bordes dentados
        • Obtenga hasta un 50% de aumento en el rendimiento de los gráficos
        • Aumentar la fidelidad del dibujo
        • Agrega soporte para idiomas de derecha a izquierda
      • Lona FMX
sk08-6568482-2

Banco de renderizado de aplicaciones

sk09-9846875-2
sk10-1524992-2

Arquitectura

  • Implementado a través del Administrador de implementación
    • Simplemente haga clic derecho en “Habilitar Skia” para agregar al administrador de implementación.
  • Librerías nativas para todas las plataformas
    • OSXARM64, Win32, Win64, Android, Android64, iOSDevice64, Linux64 y OSX64
  • Componentes y bibliotecas de Delphi
    • Los componentes instalados en Tool Palette para VCL y FMX, con la biblioteca agregada a la ruta de búsqueda

Redistribuibles

Platform Library Size
Win32 sk4d.dll 18 mb
Win64 sk4d.dll 18 mb
Android libsk4d.so 19 mb
Android64 libsk4d.so 24 mb
iOSDevice64 sk4d.a 60 mb
Ubuntu64 libsk4d.so 22 mb
RedHat64 libsk4d.so 22 mb
OSX64 sk4d.dylib 20 mb
OSXARM64 sk4d.dylib 19 mb
Sizes based on v3.4.0 for 11.1 Alexandria

Calidad de renderizado

sk13-2916659-2
Alias ​​vs Suavizado

La calidad del dibujo se mejora, en algunos escenarios, significativamente

iconnnn-9733932-2

Beneficios SVG

  • Resolución independiente y escalable
  • Estilo (puede cambiar fácilmente de color)
  • Archivo mucho más pequeño
  • Para los íconos, siempre prefiera SVG sobre imágenes estáticas como PNG
  • Miles de iconos e imágenes gratuitos disponibles en la web

Beneficios de la animación de Lottie

sk01-2434964-2

¿Por qué formatos vectoriales?

  • Tamaños de archivo mucho más pequeños
  • Infinitamente redimensionable y escalable
  • Animaciones más suaves
  • Edición y personalización más fáciles

¿Por qué gráficos vectoriales?

sk02-3368680-2

La fuente SVG es XML (que se comprime fácilmente a través de Zip)

sk03-3074924-2

PNG y JPEG son binarios (ya comprimidos)

sk04-5467807-2
  • Tanto JPEG como PNG son formatos de imagen de trama/mapa de bits
  • PNG no tiene pérdidas, con una reproducción 100% precisa de la imagen
  • JPEG tiene pérdida, pierde algo de fidelidad de imagen cada vez que se edita o comprime

Comparaciones de tamaño de archivo de imagen

sk05-9265466-2
sk06b-7005265-2
sk07-7735103-2

¿Animaciones vectoriales?

Lottie es un formato de animación basado en JSON.

Name Type Size Relative
dev_coding.tgs tgs (zipped json) 55,834
dev_coding.mp4 mpeg4 (lossy) 373,642 7x
dev_coding.json lottie (json) 583,485 10x
dev_coding.gif gif (lossless) 5,020,259 90x

Diseño de interfaz de usuario

  • SVG y Lottie facilitan al diseñador la creación de plantillas de interfaz de usuario fluidas y de alta resolución. Luego, con Skia4Delphi puede hacer que la interfaz de usuario coincida perfectamente.
  • Haz que el movimiento sea parte de tu UI/UX
  • Otros usos:
    • Acerca de pantallas, pantallas de presentación, instaladores, incorporación de usuarios, asistentes, etc.
sk08-5574565-2
sk09-9714613-2
  • Construya un proyecto con Skia4Delphi + Delphi 11
    • Haz una hermosa aplicación con VCL o FMX
  • Publicarlo en GitHub
    • Incluya videos y capturas de pantalla, y luego compártalos en las redes sociales.
  • Gana premios y reconocimiento
    • El Gran Premio es un Mac Mini M1 de Apple para que pueda aprovechar el nuevo soporte para Apple Silicon en Delphi 11 Alexandria

Más detalles por venir: blogs.embarcadero.com/?p=140459

SIGUE EL PROYECTO

Más enlaces

notas

  1. Para la plataforma Mac, cuando GlobalUseMetal es cierto junto con GlobalUseSkia, el rendimiento con FMX clásico es similar.
  2. En iOS no hay enlace compartido (bibliotecas compartidas: dll, .so, .dylib), solo estático (en este caso .a). En este .a (equivalente a .lib en Windows), tiene todos los archivos obj generados, sin embargo, a pesar de tener 60 MB, el tamaño de la app resultante es mucho menor, pues solo se compila junto con las funciones utilizadas. En otras palabras, es común que las bibliotecas estáticas sean más grandes que las bibliotecas compartidas, pero la salida resultante es mucho más pequeña y no tiene más que el tamaño normal que tendría una biblioteca compartida.
 

Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder.
Design. Code. Compile. Deploy.
Start Free Trial   Upgrade Today

   Free Delphi Community Edition   Free C++Builder Community Edition

Sobre el autor

Promotor jefe de desarrollo de Embarcadero Technologies.

Leave a Reply

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

IN THE ARTICLES