Have an amazing solution built in RAD Studio? Let us know. Looking for discounts? Visit our Special Offers page!
DelphiNotíciaWebinar

Turbine sua interface de usuário com Skia4Delphi – Repetição do Webinar

skia4delphi

O que Google Chrome, Mozilla Firefox, Chrome OS, Android, Flutter e Delphi têm em comum? Eles têm gráficos acelerados graças ao Skia. Essa biblioteca de gráficos 2D multiplataforma de alto desempenho está conquistando o mundo do desenvolvimento. Funciona com VCL e FireMonkey em todas as plataformas que o Delphi suporta. Uma linha de código pode tornar seus aplicativos FireMonkey existentes mais rápidos ou levá-los adiante e desbloquear novos recursos para interfaces de usuário de tirar o fôlego.

Skia4Delphi é um projeto de código aberto dos vencedores e irmãos do Prêmio Spirit of Delphi, Paulo César Botelho Barbosa e Vinícius Felipe Botelho Barbosa. Então, como você usa o Skia4Delphi e leva o desenvolvimento de seu aplicativo para o próximo nível? Você veio ao lugar certo.

Aqui estão alguns vídeos mais curtos ou você pode assistir ao replay completo :

Table of Contents

O que é Skia, você quer perguntar?

Imagine que você é um desenvolvedor de software que precisa alcançar todas as principais plataformas hoje. Suas escolhas tradicionais são:

  • Nativo
    • Acesso direto ao hardware
    • Código separado para cada plataforma
    • Melhor experiência do usuário ao custo da produtividade do desenvolvedor
  • Web/nuvem
    • Código compartilhado principalmente
    • Separado do hardware
    • Melhor produtividade do desenvolvedor ao custo da experiência do usuário
sk01 4322124 2

Mas agora temos… FireMonkey

  • Compilado Nativo – acesso direto ao hardware da plataforma
  • Multi-Platform – uma base de código para todas as plataformas
  • Visual Designer Baseado em Componentes – maximize a produtividade do desenvolvedor
sk02 1924098 2

Como Skia se encaixa aqui? Apresentando… Google Skia

  • O Google Skia é o mecanismo gráfico de código aberto para Google Chrome, Android, Flutter, Xamarin, Firefox e muitos outros.
  • Ele fornece APIs 2D comuns que funcionam em uma variedade de plataformas, abstraindo complexidades na implementação de bibliotecas de baixo nível que ele usa por trás dele, como Vulkan, DirectX, Metal e outros, implementando muitas otimizações e novos recursos.
sk08 5574565 2
sk09 9714613 2
  • Construir um projeto com Skia4Delphi + Delphi 11
    • Faça uma bela aplicação com VCL ou FMX
  • Poste no GitHub
    • Inclua vídeos e capturas de tela e compartilhe-os nas mídias sociais.
  • Ganhe prêmios e elogios
    • O Grande Prêmio é um Apple M1 Mac Mini para que você possa aproveitar o excelente novo suporte para Apple Silicon em Delphi 11 Alexandria

Mais detalhes em breve: blogs.embarcadero.com/?p=140459

ACOMPANHE O PROJETO

Mais links

Notas

  1. Para a plataforma Mac, quando GlobalUseMetal é verdade junto com GlobalUseSkia, o desempenho com o FMX clássico é semelhante.
  2. No iOS não há link compartilhado (bibliotecas compartilhadas: dll, .so, .dylib), apenas estático (neste caso .a). Neste .a (equivalente a .lib no Windows), ele tem todos os arquivos obj gerados, porém, apesar de ter 60 MB, o tamanho do app resultante é bem menor, pois só é compilado junto com as funções utilizadas. Em outras palavras, é comum que as bibliotecas estáticas sejam maiores que as bibliotecas compartilhadas, mas a saída resultante é muito menor e não é maior do que o tamanho normal que uma biblioteca compartilhada teria.
 
sk04 5467807 2
  • Ambos JPEG e PNG são formatos de imagem raster/bitmap
  • PNG é sem perdas, com reprodução 100% precisa da imagem
  • JPEG tem perdas, perdendo alguma fidelidade de imagem cada vez que é editado ou comprimido

Comparações de tamanho de arquivo de imagem

sk05 9265466 2
sk06b 7005265 2
sk07 7735103 2

Animações vetoriais?

Lottie é um formato de animação baseado em 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

Design da interface do usuário

  • SVG e Lottie facilitam para o designer criar modelos de interface de usuário suaves e de alta resolução. Então, com o Skia4Delphi, você pode fazer a interface do usuário combinar perfeitamente.
  • Faça do movimento parte da sua UI/UX
  • Outros usos:
    • Sobre telas, telas iniciais, instaladores, integração de usuários, assistentes, etc.
sk08 5574565 2
sk09 9714613 2
  • Construir um projeto com Skia4Delphi + Delphi 11
    • Faça uma bela aplicação com VCL ou FMX
  • Poste no GitHub
    • Inclua vídeos e capturas de tela e compartilhe-os nas mídias sociais.
  • Ganhe prêmios e elogios
    • O Grande Prêmio é um Apple M1 Mac Mini para que você possa aproveitar o excelente novo suporte para Apple Silicon em Delphi 11 Alexandria

Mais detalhes em breve: blogs.embarcadero.com/?p=140459

ACOMPANHE O PROJETO

Mais links

Notas

  1. Para a plataforma Mac, quando GlobalUseMetal é verdade junto com GlobalUseSkia, o desempenho com o FMX clássico é semelhante.
  2. No iOS não há link compartilhado (bibliotecas compartilhadas: dll, .so, .dylib), apenas estático (neste caso .a). Neste .a (equivalente a .lib no Windows), ele tem todos os arquivos obj gerados, porém, apesar de ter 60 MB, o tamanho do app resultante é bem menor, pois só é compilado junto com as funções utilizadas. Em outras palavras, é comum que as bibliotecas estáticas sejam maiores que as bibliotecas compartilhadas, mas a saída resultante é muito menor e não é maior do que o tamanho normal que uma biblioteca compartilhada teria.
 
sk01 2434964 2

Por que formatos vetoriais?

  • Tamanhos de arquivo muito menores
  • Infinitamente redimensionável e escalável
  • Animações mais suaves
  • Edição e personalização mais fáceis

Por que gráficos vetoriais?

sk02 3368680 2

SVG Source é XML (que facilmente compacta via Zip)

sk03 3074924 2

PNG e JPEG são binários (já compactados)

sk04 5467807 2
  • Ambos JPEG e PNG são formatos de imagem raster/bitmap
  • PNG é sem perdas, com reprodução 100% precisa da imagem
  • JPEG tem perdas, perdendo alguma fidelidade de imagem cada vez que é editado ou comprimido

Comparações de tamanho de arquivo de imagem

sk05 9265466 2
sk06b 7005265 2
sk07 7735103 2

Animações vetoriais?

Lottie é um formato de animação baseado em 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

Design da interface do usuário

  • SVG e Lottie facilitam para o designer criar modelos de interface de usuário suaves e de alta resolução. Então, com o Skia4Delphi, você pode fazer a interface do usuário combinar perfeitamente.
  • Faça do movimento parte da sua UI/UX
  • Outros usos:
    • Sobre telas, telas iniciais, instaladores, integração de usuários, assistentes, etc.
sk08 5574565 2
sk09 9714613 2
  • Construir um projeto com Skia4Delphi + Delphi 11
    • Faça uma bela aplicação com VCL ou FMX
  • Poste no GitHub
    • Inclua vídeos e capturas de tela e compartilhe-os nas mídias sociais.
  • Ganhe prêmios e elogios
    • O Grande Prêmio é um Apple M1 Mac Mini para que você possa aproveitar o excelente novo suporte para Apple Silicon em Delphi 11 Alexandria

Mais detalhes em breve: blogs.embarcadero.com/?p=140459

ACOMPANHE O PROJETO

Mais links

Notas

  1. Para a plataforma Mac, quando GlobalUseMetal é verdade junto com GlobalUseSkia, o desempenho com o FMX clássico é semelhante.
  2. No iOS não há link compartilhado (bibliotecas compartilhadas: dll, .so, .dylib), apenas estático (neste caso .a). Neste .a (equivalente a .lib no Windows), ele tem todos os arquivos obj gerados, porém, apesar de ter 60 MB, o tamanho do app resultante é bem menor, pois só é compilado junto com as funções utilizadas. Em outras palavras, é comum que as bibliotecas estáticas sejam maiores que as bibliotecas compartilhadas, mas a saída resultante é muito menor e não é maior do que o tamanho normal que uma biblioteca compartilhada teria.
 
iconnnn 9733932 2

Benefícios SVG

  • Resolução independente e escalável
  • Estilo (pode facilmente mudar de cor)
  • Arquivo muito menor
  • Para ícones, sempre prefira SVG a imagens estáticas como PNG
  • Milhares de ícones e imagens gratuitos disponíveis na web

Benefícios da Lottie Animation

sk01 2434964 2

Por que formatos vetoriais?

  • Tamanhos de arquivo muito menores
  • Infinitamente redimensionável e escalável
  • Animações mais suaves
  • Edição e personalização mais fáceis

Por que gráficos vetoriais?

sk02 3368680 2

SVG Source é XML (que facilmente compacta via Zip)

sk03 3074924 2

PNG e JPEG são binários (já compactados)

sk04 5467807 2
  • Ambos JPEG e PNG são formatos de imagem raster/bitmap
  • PNG é sem perdas, com reprodução 100% precisa da imagem
  • JPEG tem perdas, perdendo alguma fidelidade de imagem cada vez que é editado ou comprimido

Comparações de tamanho de arquivo de imagem

sk05 9265466 2
sk06b 7005265 2
sk07 7735103 2

Animações vetoriais?

Lottie é um formato de animação baseado em 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

Design da interface do usuário

  • SVG e Lottie facilitam para o designer criar modelos de interface de usuário suaves e de alta resolução. Então, com o Skia4Delphi, você pode fazer a interface do usuário combinar perfeitamente.
  • Faça do movimento parte da sua UI/UX
  • Outros usos:
    • Sobre telas, telas iniciais, instaladores, integração de usuários, assistentes, etc.
sk08 5574565 2
sk09 9714613 2
  • Construir um projeto com Skia4Delphi + Delphi 11
    • Faça uma bela aplicação com VCL ou FMX
  • Poste no GitHub
    • Inclua vídeos e capturas de tela e compartilhe-os nas mídias sociais.
  • Ganhe prêmios e elogios
    • O Grande Prêmio é um Apple M1 Mac Mini para que você possa aproveitar o excelente novo suporte para Apple Silicon em Delphi 11 Alexandria

Mais detalhes em breve: blogs.embarcadero.com/?p=140459

ACOMPANHE O PROJETO

Mais links

Notas

  1. Para a plataforma Mac, quando GlobalUseMetal é verdade junto com GlobalUseSkia, o desempenho com o FMX clássico é semelhante.
  2. No iOS não há link compartilhado (bibliotecas compartilhadas: dll, .so, .dylib), apenas estático (neste caso .a). Neste .a (equivalente a .lib no Windows), ele tem todos os arquivos obj gerados, porém, apesar de ter 60 MB, o tamanho do app resultante é bem menor, pois só é compilado junto com as funções utilizadas. Em outras palavras, é comum que as bibliotecas estáticas sejam maiores que as bibliotecas compartilhadas, mas a saída resultante é muito menor e não é maior do que o tamanho normal que uma biblioteca compartilhada teria.
 
sk10 1524992 2

Arquitetura

  • Implantado por meio do Deployment Manager
    • Basta clicar com o botão direito do mouse em “Ativar Skia” para adicionar ao gerenciador de implantação.
  • Bibliotecas nativas para todas as plataformas
    • OSXARM64, Win32, Win64, Android, Android64, iOSDevice64, Linux64 e OSX64
  • Componentes e bibliotecas do Delphi
    • Os componentes instalados no Tool Palette para VCL e FMX, com a biblioteca adicionada ao caminho de pesquisa

Redistribuíveis

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

Qualidade de renderização

sk13 2916659 2
Aliased vs. Anti-aliased

A qualidade do desenho é melhorada, em alguns cenários, significativamente

iconnnn 9733932 2

Benefícios SVG

  • Resolução independente e escalável
  • Estilo (pode facilmente mudar de cor)
  • Arquivo muito menor
  • Para ícones, sempre prefira SVG a imagens estáticas como PNG
  • Milhares de ícones e imagens gratuitos disponíveis na web

Benefícios da Lottie Animation

sk01 2434964 2

Por que formatos vetoriais?

  • Tamanhos de arquivo muito menores
  • Infinitamente redimensionável e escalável
  • Animações mais suaves
  • Edição e personalização mais fáceis

Por que gráficos vetoriais?

sk02 3368680 2

SVG Source é XML (que facilmente compacta via Zip)

sk03 3074924 2

PNG e JPEG são binários (já compactados)

sk04 5467807 2
  • Ambos JPEG e PNG são formatos de imagem raster/bitmap
  • PNG é sem perdas, com reprodução 100% precisa da imagem
  • JPEG tem perdas, perdendo alguma fidelidade de imagem cada vez que é editado ou comprimido

Comparações de tamanho de arquivo de imagem

sk05 9265466 2
sk06b 7005265 2
sk07 7735103 2

Animações vetoriais?

Lottie é um formato de animação baseado em 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

Design da interface do usuário

  • SVG e Lottie facilitam para o designer criar modelos de interface de usuário suaves e de alta resolução. Então, com o Skia4Delphi, você pode fazer a interface do usuário combinar perfeitamente.
  • Faça do movimento parte da sua UI/UX
  • Outros usos:
    • Sobre telas, telas iniciais, instaladores, integração de usuários, assistentes, etc.
sk08 5574565 2
sk09 9714613 2
  • Construir um projeto com Skia4Delphi + Delphi 11
    • Faça uma bela aplicação com VCL ou FMX
  • Poste no GitHub
    • Inclua vídeos e capturas de tela e compartilhe-os nas mídias sociais.
  • Ganhe prêmios e elogios
    • O Grande Prêmio é um Apple M1 Mac Mini para que você possa aproveitar o excelente novo suporte para Apple Silicon em Delphi 11 Alexandria

Mais detalhes em breve: blogs.embarcadero.com/?p=140459

ACOMPANHE O PROJETO

Mais links

Notas

  1. Para a plataforma Mac, quando GlobalUseMetal é verdade junto com GlobalUseSkia, o desempenho com o FMX clássico é semelhante.
  2. No iOS não há link compartilhado (bibliotecas compartilhadas: dll, .so, .dylib), apenas estático (neste caso .a). Neste .a (equivalente a .lib no Windows), ele tem todos os arquivos obj gerados, porém, apesar de ter 60 MB, o tamanho do app resultante é bem menor, pois só é compilado junto com as funções utilizadas. Em outras palavras, é comum que as bibliotecas estáticas sejam maiores que as bibliotecas compartilhadas, mas a saída resultante é muito menor e não é maior do que o tamanho normal que uma biblioteca compartilhada teria.
 
sk07 8057418 2

Compatibilidade

  • Delphi 11+: Todas as plataformas
  • Delphi 10.3+: Windows e Android
  • Delphi XE7+: Windows

Disponível por …

Biblioteca Skia4Delphi

  • A biblioteca existe conceitualmente em 3 partes:
    1. API Skia (console, VCL, FMX)
      • Acesso à biblioteca pura do Google Skia, através de uma única unidade: Skia.pas
    2. Controles (VCL, FMX)
      • TSkAnimatedImage : Jogue Lottie, adesivos de Telegram, GIF animado e WebP animado
      • TSkLabel : Vários estilos no texto, peso da fonte, alinhamento justificado, limite máximo de linhas, cor de fundo em partes do texto, largura e altura de tamanho automático, decorações avançadas e muito mais
      • TSkPaintBox : use o evento OnDraw para desenhar com a API Skia diretamente no controle
      • TSkSvg : carrega ícones svgs, muda cores e modo wrap
    3. Renderização de aplicativo (FMX)
      • Recurso opcional que quando habilitado, o motor gráfico do FMX será substituído pelo motor gráfico do Skia4Delphi, ou seja, todo o aplicativo, todos os controles na tela, serão pintados internamente pelo canvas baseado no Skia.
      • Ou seja, ao adicionar apenas 1 linha de código para habilitá-lo , todo o seu aplicativo irá automaticamente:
        • Melhorar a qualidade dos desenhos; alisamento de bordas irregulares
        • Ganhe até 50% de aumento no desempenho gráfico
        • Aumente a fidelidade do desenho
        • Adiciona suporte para idiomas da direita para a esquerda
      • Tela FMX
sk08 6568482 2

Banco de Renderização de Aplicativos

sk09 9846875 2
sk10 1524992 2

Arquitetura

  • Implantado por meio do Deployment Manager
    • Basta clicar com o botão direito do mouse em “Ativar Skia” para adicionar ao gerenciador de implantação.
  • Bibliotecas nativas para todas as plataformas
    • OSXARM64, Win32, Win64, Android, Android64, iOSDevice64, Linux64 e OSX64
  • Componentes e bibliotecas do Delphi
    • Os componentes instalados no Tool Palette para VCL e FMX, com a biblioteca adicionada ao caminho de pesquisa

Redistribuíveis

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

Qualidade de renderização

sk13 2916659 2
Aliased vs. Anti-aliased

A qualidade do desenho é melhorada, em alguns cenários, significativamente

iconnnn 9733932 2

Benefícios SVG

  • Resolução independente e escalável
  • Estilo (pode facilmente mudar de cor)
  • Arquivo muito menor
  • Para ícones, sempre prefira SVG a imagens estáticas como PNG
  • Milhares de ícones e imagens gratuitos disponíveis na web

Benefícios da Lottie Animation

sk01 2434964 2

Por que formatos vetoriais?

  • Tamanhos de arquivo muito menores
  • Infinitamente redimensionável e escalável
  • Animações mais suaves
  • Edição e personalização mais fáceis

Por que gráficos vetoriais?

sk02 3368680 2

SVG Source é XML (que facilmente compacta via Zip)

sk03 3074924 2

PNG e JPEG são binários (já compactados)

sk04 5467807 2
  • Ambos JPEG e PNG são formatos de imagem raster/bitmap
  • PNG é sem perdas, com reprodução 100% precisa da imagem
  • JPEG tem perdas, perdendo alguma fidelidade de imagem cada vez que é editado ou comprimido

Comparações de tamanho de arquivo de imagem

sk05 9265466 2
sk06b 7005265 2
sk07 7735103 2

Animações vetoriais?

Lottie é um formato de animação baseado em 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

Design da interface do usuário

  • SVG e Lottie facilitam para o designer criar modelos de interface de usuário suaves e de alta resolução. Então, com o Skia4Delphi, você pode fazer a interface do usuário combinar perfeitamente.
  • Faça do movimento parte da sua UI/UX
  • Outros usos:
    • Sobre telas, telas iniciais, instaladores, integração de usuários, assistentes, etc.
sk08 5574565 2
sk09 9714613 2
  • Construir um projeto com Skia4Delphi + Delphi 11
    • Faça uma bela aplicação com VCL ou FMX
  • Poste no GitHub
    • Inclua vídeos e capturas de tela e compartilhe-os nas mídias sociais.
  • Ganhe prêmios e elogios
    • O Grande Prêmio é um Apple M1 Mac Mini para que você possa aproveitar o excelente novo suporte para Apple Silicon em Delphi 11 Alexandria

Mais detalhes em breve: blogs.embarcadero.com/?p=140459

ACOMPANHE O PROJETO

Mais links

Notas

  1. Para a plataforma Mac, quando GlobalUseMetal é verdade junto com GlobalUseSkia, o desempenho com o FMX clássico é semelhante.
  2. No iOS não há link compartilhado (bibliotecas compartilhadas: dll, .so, .dylib), apenas estático (neste caso .a). Neste .a (equivalente a .lib no Windows), ele tem todos os arquivos obj gerados, porém, apesar de ter 60 MB, o tamanho do app resultante é bem menor, pois só é compilado junto com as funções utilizadas. Em outras palavras, é comum que as bibliotecas estáticas sejam maiores que as bibliotecas compartilhadas, mas a saída resultante é muito menor e não é maior do que o tamanho normal que uma biblioteca compartilhada teria.
 
sk06 9811271 2

Esqui para Delfos

  • ECONOMY – Projeto de código aberto, totalmente gratuito
  • FÁCIL DE USAR – Fácil de instalar, código simples
sk07 8057418 2

Compatibilidade

  • Delphi 11+: Todas as plataformas
  • Delphi 10.3+: Windows e Android
  • Delphi XE7+: Windows

Disponível por …

Biblioteca Skia4Delphi

  • A biblioteca existe conceitualmente em 3 partes:
    1. API Skia (console, VCL, FMX)
      • Acesso à biblioteca pura do Google Skia, através de uma única unidade: Skia.pas
    2. Controles (VCL, FMX)
      • TSkAnimatedImage : Jogue Lottie, adesivos de Telegram, GIF animado e WebP animado
      • TSkLabel : Vários estilos no texto, peso da fonte, alinhamento justificado, limite máximo de linhas, cor de fundo em partes do texto, largura e altura de tamanho automático, decorações avançadas e muito mais
      • TSkPaintBox : use o evento OnDraw para desenhar com a API Skia diretamente no controle
      • TSkSvg : carrega ícones svgs, muda cores e modo wrap
    3. Renderização de aplicativo (FMX)
      • Recurso opcional que quando habilitado, o motor gráfico do FMX será substituído pelo motor gráfico do Skia4Delphi, ou seja, todo o aplicativo, todos os controles na tela, serão pintados internamente pelo canvas baseado no Skia.
      • Ou seja, ao adicionar apenas 1 linha de código para habilitá-lo , todo o seu aplicativo irá automaticamente:
        • Melhorar a qualidade dos desenhos; alisamento de bordas irregulares
        • Ganhe até 50% de aumento no desempenho gráfico
        • Aumente a fidelidade do desenho
        • Adiciona suporte para idiomas da direita para a esquerda
      • Tela FMX
sk08 6568482 2

Banco de Renderização de Aplicativos

sk09 9846875 2
sk10 1524992 2

Arquitetura

  • Implantado por meio do Deployment Manager
    • Basta clicar com o botão direito do mouse em “Ativar Skia” para adicionar ao gerenciador de implantação.
  • Bibliotecas nativas para todas as plataformas
    • OSXARM64, Win32, Win64, Android, Android64, iOSDevice64, Linux64 e OSX64
  • Componentes e bibliotecas do Delphi
    • Os componentes instalados no Tool Palette para VCL e FMX, com a biblioteca adicionada ao caminho de pesquisa

Redistribuíveis

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

Qualidade de renderização

sk13 2916659 2
Aliased vs. Anti-aliased

A qualidade do desenho é melhorada, em alguns cenários, significativamente

iconnnn 9733932 2

Benefícios SVG

  • Resolução independente e escalável
  • Estilo (pode facilmente mudar de cor)
  • Arquivo muito menor
  • Para ícones, sempre prefira SVG a imagens estáticas como PNG
  • Milhares de ícones e imagens gratuitos disponíveis na web

Benefícios da Lottie Animation

sk01 2434964 2

Por que formatos vetoriais?

  • Tamanhos de arquivo muito menores
  • Infinitamente redimensionável e escalável
  • Animações mais suaves
  • Edição e personalização mais fáceis

Por que gráficos vetoriais?

sk02 3368680 2

SVG Source é XML (que facilmente compacta via Zip)

sk03 3074924 2

PNG e JPEG são binários (já compactados)

sk04 5467807 2
  • Ambos JPEG e PNG são formatos de imagem raster/bitmap
  • PNG é sem perdas, com reprodução 100% precisa da imagem
  • JPEG tem perdas, perdendo alguma fidelidade de imagem cada vez que é editado ou comprimido

Comparações de tamanho de arquivo de imagem

sk05 9265466 2
sk06b 7005265 2
sk07 7735103 2

Animações vetoriais?

Lottie é um formato de animação baseado em 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

Design da interface do usuário

  • SVG e Lottie facilitam para o designer criar modelos de interface de usuário suaves e de alta resolução. Então, com o Skia4Delphi, você pode fazer a interface do usuário combinar perfeitamente.
  • Faça do movimento parte da sua UI/UX
  • Outros usos:
    • Sobre telas, telas iniciais, instaladores, integração de usuários, assistentes, etc.
sk08 5574565 2
sk09 9714613 2
  • Construir um projeto com Skia4Delphi + Delphi 11
    • Faça uma bela aplicação com VCL ou FMX
  • Poste no GitHub
    • Inclua vídeos e capturas de tela e compartilhe-os nas mídias sociais.
  • Ganhe prêmios e elogios
    • O Grande Prêmio é um Apple M1 Mac Mini para que você possa aproveitar o excelente novo suporte para Apple Silicon em Delphi 11 Alexandria

Mais detalhes em breve: blogs.embarcadero.com/?p=140459

ACOMPANHE O PROJETO

Mais links

Notas

  1. Para a plataforma Mac, quando GlobalUseMetal é verdade junto com GlobalUseSkia, o desempenho com o FMX clássico é semelhante.
  2. No iOS não há link compartilhado (bibliotecas compartilhadas: dll, .so, .dylib), apenas estático (neste caso .a). Neste .a (equivalente a .lib no Windows), ele tem todos os arquivos obj gerados, porém, apesar de ter 60 MB, o tamanho do app resultante é bem menor, pois só é compilado junto com as funções utilizadas. Em outras palavras, é comum que as bibliotecas estáticas sejam maiores que as bibliotecas compartilhadas, mas a saída resultante é muito menor e não é maior do que o tamanho normal que uma biblioteca compartilhada teria.
 
iconnnn 7604419 2

Sobre Skia4Delphi

  • Código aberto
    • Usa um fork modificado do Skia do Google
  • Multiplataforma e Multi-Framework
  • Biblioteca de gráficos 2D para Delphi
  • Desenho
    • Texto
    • Animações
    • Imagens
  • Foco na Qualidade e Desempenho

O cérebro por trás do Skia4Delphi

sk06 9811271 2

Esqui para Delfos

  • ECONOMY – Projeto de código aberto, totalmente gratuito
  • FÁCIL DE USAR – Fácil de instalar, código simples
sk07 8057418 2

Compatibilidade

  • Delphi 11+: Todas as plataformas
  • Delphi 10.3+: Windows e Android
  • Delphi XE7+: Windows

Disponível por …

Biblioteca Skia4Delphi

  • A biblioteca existe conceitualmente em 3 partes:
    1. API Skia (console, VCL, FMX)
      • Acesso à biblioteca pura do Google Skia, através de uma única unidade: Skia.pas
    2. Controles (VCL, FMX)
      • TSkAnimatedImage : Jogue Lottie, adesivos de Telegram, GIF animado e WebP animado
      • TSkLabel : Vários estilos no texto, peso da fonte, alinhamento justificado, limite máximo de linhas, cor de fundo em partes do texto, largura e altura de tamanho automático, decorações avançadas e muito mais
      • TSkPaintBox : use o evento OnDraw para desenhar com a API Skia diretamente no controle
      • TSkSvg : carrega ícones svgs, muda cores e modo wrap
    3. Renderização de aplicativo (FMX)
      • Recurso opcional que quando habilitado, o motor gráfico do FMX será substituído pelo motor gráfico do Skia4Delphi, ou seja, todo o aplicativo, todos os controles na tela, serão pintados internamente pelo canvas baseado no Skia.
      • Ou seja, ao adicionar apenas 1 linha de código para habilitá-lo , todo o seu aplicativo irá automaticamente:
        • Melhorar a qualidade dos desenhos; alisamento de bordas irregulares
        • Ganhe até 50% de aumento no desempenho gráfico
        • Aumente a fidelidade do desenho
        • Adiciona suporte para idiomas da direita para a esquerda
      • Tela FMX
sk08 6568482 2

Banco de Renderização de Aplicativos

sk09 9846875 2
sk10 1524992 2

Arquitetura

  • Implantado por meio do Deployment Manager
    • Basta clicar com o botão direito do mouse em “Ativar Skia” para adicionar ao gerenciador de implantação.
  • Bibliotecas nativas para todas as plataformas
    • OSXARM64, Win32, Win64, Android, Android64, iOSDevice64, Linux64 e OSX64
  • Componentes e bibliotecas do Delphi
    • Os componentes instalados no Tool Palette para VCL e FMX, com a biblioteca adicionada ao caminho de pesquisa

Redistribuíveis

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

Qualidade de renderização

sk13 2916659 2
Aliased vs. Anti-aliased

A qualidade do desenho é melhorada, em alguns cenários, significativamente

iconnnn 9733932 2

Benefícios SVG

  • Resolução independente e escalável
  • Estilo (pode facilmente mudar de cor)
  • Arquivo muito menor
  • Para ícones, sempre prefira SVG a imagens estáticas como PNG
  • Milhares de ícones e imagens gratuitos disponíveis na web

Benefícios da Lottie Animation

sk01 2434964 2

Por que formatos vetoriais?

  • Tamanhos de arquivo muito menores
  • Infinitamente redimensionável e escalável
  • Animações mais suaves
  • Edição e personalização mais fáceis

Por que gráficos vetoriais?

sk02 3368680 2

SVG Source é XML (que facilmente compacta via Zip)

sk03 3074924 2

PNG e JPEG são binários (já compactados)

sk04 5467807 2
  • Ambos JPEG e PNG são formatos de imagem raster/bitmap
  • PNG é sem perdas, com reprodução 100% precisa da imagem
  • JPEG tem perdas, perdendo alguma fidelidade de imagem cada vez que é editado ou comprimido

Comparações de tamanho de arquivo de imagem

sk05 9265466 2
sk06b 7005265 2
sk07 7735103 2

Animações vetoriais?

Lottie é um formato de animação baseado em 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

Design da interface do usuário

  • SVG e Lottie facilitam para o designer criar modelos de interface de usuário suaves e de alta resolução. Então, com o Skia4Delphi, você pode fazer a interface do usuário combinar perfeitamente.
  • Faça do movimento parte da sua UI/UX
  • Outros usos:
    • Sobre telas, telas iniciais, instaladores, integração de usuários, assistentes, etc.
sk08 5574565 2
sk09 9714613 2
  • Construir um projeto com Skia4Delphi + Delphi 11
    • Faça uma bela aplicação com VCL ou FMX
  • Poste no GitHub
    • Inclua vídeos e capturas de tela e compartilhe-os nas mídias sociais.
  • Ganhe prêmios e elogios
    • O Grande Prêmio é um Apple M1 Mac Mini para que você possa aproveitar o excelente novo suporte para Apple Silicon em Delphi 11 Alexandria

Mais detalhes em breve: blogs.embarcadero.com/?p=140459

ACOMPANHE O PROJETO

Mais links

Notas

  1. Para a plataforma Mac, quando GlobalUseMetal é verdade junto com GlobalUseSkia, o desempenho com o FMX clássico é semelhante.
  2. No iOS não há link compartilhado (bibliotecas compartilhadas: dll, .so, .dylib), apenas estático (neste caso .a). Neste .a (equivalente a .lib no Windows), ele tem todos os arquivos obj gerados, porém, apesar de ter 60 MB, o tamanho do app resultante é bem menor, pois só é compilado junto com as funções utilizadas. Em outras palavras, é comum que as bibliotecas estáticas sejam maiores que as bibliotecas compartilhadas, mas a saída resultante é muito menor e não é maior do que o tamanho normal que uma biblioteca compartilhada teria.
 
sk03 6219443 2

Plataformas Skia:

  • Todas as plataformas mais populares do mundo, como:
    • janelas
    • Mac OS
    • iOS (incluindo simulador)
    • Android (incluindo simulador)
    • Linux (distribuições principais)
    • Fuschia OS
    • Tizen
    • tvOS
    • watchOS

Recursos de esqui

sk05v 6468229 2
iconnnn 7604419 2

Sobre Skia4Delphi

  • Código aberto
    • Usa um fork modificado do Skia do Google
  • Multiplataforma e Multi-Framework
  • Biblioteca de gráficos 2D para Delphi
  • Desenho
    • Texto
    • Animações
    • Imagens
  • Foco na Qualidade e Desempenho

O cérebro por trás do Skia4Delphi

sk06 9811271 2

Esqui para Delfos

  • ECONOMY – Projeto de código aberto, totalmente gratuito
  • FÁCIL DE USAR – Fácil de instalar, código simples
sk07 8057418 2

Compatibilidade

  • Delphi 11+: Todas as plataformas
  • Delphi 10.3+: Windows e Android
  • Delphi XE7+: Windows

Disponível por …

Biblioteca Skia4Delphi

  • A biblioteca existe conceitualmente em 3 partes:
    1. API Skia (console, VCL, FMX)
      • Acesso à biblioteca pura do Google Skia, através de uma única unidade: Skia.pas
    2. Controles (VCL, FMX)
      • TSkAnimatedImage : Jogue Lottie, adesivos de Telegram, GIF animado e WebP animado
      • TSkLabel : Vários estilos no texto, peso da fonte, alinhamento justificado, limite máximo de linhas, cor de fundo em partes do texto, largura e altura de tamanho automático, decorações avançadas e muito mais
      • TSkPaintBox : use o evento OnDraw para desenhar com a API Skia diretamente no controle
      • TSkSvg : carrega ícones svgs, muda cores e modo wrap
    3. Renderização de aplicativo (FMX)
      • Recurso opcional que quando habilitado, o motor gráfico do FMX será substituído pelo motor gráfico do Skia4Delphi, ou seja, todo o aplicativo, todos os controles na tela, serão pintados internamente pelo canvas baseado no Skia.
      • Ou seja, ao adicionar apenas 1 linha de código para habilitá-lo , todo o seu aplicativo irá automaticamente:
        • Melhorar a qualidade dos desenhos; alisamento de bordas irregulares
        • Ganhe até 50% de aumento no desempenho gráfico
        • Aumente a fidelidade do desenho
        • Adiciona suporte para idiomas da direita para a esquerda
      • Tela FMX
sk08 6568482 2

Banco de Renderização de Aplicativos

sk09 9846875 2
sk10 1524992 2

Arquitetura

  • Implantado por meio do Deployment Manager
    • Basta clicar com o botão direito do mouse em “Ativar Skia” para adicionar ao gerenciador de implantação.
  • Bibliotecas nativas para todas as plataformas
    • OSXARM64, Win32, Win64, Android, Android64, iOSDevice64, Linux64 e OSX64
  • Componentes e bibliotecas do Delphi
    • Os componentes instalados no Tool Palette para VCL e FMX, com a biblioteca adicionada ao caminho de pesquisa

Redistribuíveis

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

Qualidade de renderização

sk13 2916659 2
Aliased vs. Anti-aliased

A qualidade do desenho é melhorada, em alguns cenários, significativamente

iconnnn 9733932 2

Benefícios SVG

  • Resolução independente e escalável
  • Estilo (pode facilmente mudar de cor)
  • Arquivo muito menor
  • Para ícones, sempre prefira SVG a imagens estáticas como PNG
  • Milhares de ícones e imagens gratuitos disponíveis na web

Benefícios da Lottie Animation

sk01 2434964 2

Por que formatos vetoriais?

  • Tamanhos de arquivo muito menores
  • Infinitamente redimensionável e escalável
  • Animações mais suaves
  • Edição e personalização mais fáceis

Por que gráficos vetoriais?

sk02 3368680 2

SVG Source é XML (que facilmente compacta via Zip)

sk03 3074924 2

PNG e JPEG são binários (já compactados)

sk04 5467807 2
  • Ambos JPEG e PNG são formatos de imagem raster/bitmap
  • PNG é sem perdas, com reprodução 100% precisa da imagem
  • JPEG tem perdas, perdendo alguma fidelidade de imagem cada vez que é editado ou comprimido

Comparações de tamanho de arquivo de imagem

sk05 9265466 2
sk06b 7005265 2
sk07 7735103 2

Animações vetoriais?

Lottie é um formato de animação baseado em 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

Design da interface do usuário

  • SVG e Lottie facilitam para o designer criar modelos de interface de usuário suaves e de alta resolução. Então, com o Skia4Delphi, você pode fazer a interface do usuário combinar perfeitamente.
  • Faça do movimento parte da sua UI/UX
  • Outros usos:
    • Sobre telas, telas iniciais, instaladores, integração de usuários, assistentes, etc.
sk08 5574565 2
sk09 9714613 2
  • Construir um projeto com Skia4Delphi + Delphi 11
    • Faça uma bela aplicação com VCL ou FMX
  • Poste no GitHub
    • Inclua vídeos e capturas de tela e compartilhe-os nas mídias sociais.
  • Ganhe prêmios e elogios
    • O Grande Prêmio é um Apple M1 Mac Mini para que você possa aproveitar o excelente novo suporte para Apple Silicon em Delphi 11 Alexandria

Mais detalhes em breve: blogs.embarcadero.com/?p=140459

ACOMPANHE O PROJETO

Mais links

Notas

  1. Para a plataforma Mac, quando GlobalUseMetal é verdade junto com GlobalUseSkia, o desempenho com o FMX clássico é semelhante.
  2. No iOS não há link compartilhado (bibliotecas compartilhadas: dll, .so, .dylib), apenas estático (neste caso .a). Neste .a (equivalente a .lib no Windows), ele tem todos os arquivos obj gerados, porém, apesar de ter 60 MB, o tamanho do app resultante é bem menor, pois só é compilado junto com as funções utilizadas. Em outras palavras, é comum que as bibliotecas estáticas sejam maiores que as bibliotecas compartilhadas, mas a saída resultante é muito menor e não é maior do que o tamanho normal que uma biblioteca compartilhada teria.
 

What's Next
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 o autor

Defensor do desenvolvedor chefe da Embarcadero Technologies.

Leave a Reply

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

IN THE ARTICLES