Delphi新一代绘制引擎Google Skia

 

Skia是一个开源的2D图形库,提供跨平台的通用绘制API,它有三高:高性能、高精度、高质量。谷歌很多产品如Chrome、Android、Flutter都是用它作为图形引擎的,可见它十分的强大。

主要功能有:

  • 2D画布和文本布局
  • GPU加速渲染
  • 支持从右到左的顺序绘制文本
  • SVG图片格式的渲染和创建
  • PDF输出
  • 各种动态效果
  • 着色语言
  • 着色器、蒙板、颜色过滤器
  • 动态图片播放器
  • 多种图片编码解码器(bmp、gif、ico、jpg、png、wbmp、webp等)

能否用于Delphi中呢?答案就是使用Skia4Delphi!

在FireMonkey程序中,Skia4Delphi可以将Delphi自带的绘制引擎替换为使用Skia,而且你的应用就自动拥有如下提升:

  • 在所有平台上可以有抗锯齿效果,显示更顺滑(根据窗体的Quality属性)
  • 整体的图形绘制性能提升50%(即使使用更高的质量绘制)
  • 调整图片尺寸时质量更好(根据窗体的Quality属性)
  • 修复FMX自带引擎中的一些绘制问题

Skia支持的框架:

SKia不仅能在FMX和VCL工程中使用,还能在控制台程序中使用,所以在服务程序中也能使用Skia对图片进行处理。

功能集 FMX VCL 控制台 描述
Skia API 可以使用Skia.pas来访问纯Skia库
控件 TSkAnimatedImage, TSkLabel, TSkPaintBox, and TSkSvg.
应用渲染 替换自带的绘制引擎为Skia

Skia支持哪些操作系统?

查看Skia的官网,它上面写着:

Windows:7,8,8.1,10

MacOS:10.13+

IOS:11+

Android:4.1+

Linux:Ubuntu 18.04+,Debian 10+,openSUSE 15.2+,Fedora Linux 32+

主流的操作系统版本都是支持的。

Skia4Delphi支持哪些Delphi版本?

NWO(H_E{IHI7O(Q]2_STM5X

通过Skia4Delphi的安装程序界面,

我们就能知道它只支持XE7以后的Delphi,

XE7~D10.2:它只支持Windows

D10.3以后,它开始支持Android

到D11,Delphi支持的所有平台它都支持了,什么IOS、MacOS、Linux。

如何下载并安装Skia4Delphi?

Skia4Delphi是一套开源控件,

目前最新版本是6.0.0Beta,

在Github地址:

https://github.com/skia4delphi/skia4delphi

安装包下载地址:

https://github.com/skia4delphi/skia4delphi/releases

安装完之后,在控件面板中可以看到Skia有五个控件:

工程如何启用Skia?

只需要在工程中右键,在弹出菜单中选择“Enable Skia”即可。

CCLLV~U9PHCFAWHE~LM18{A

“Enable Skia”干了什么呢?

  1. 它将Skia的库布署到了你的应用程序目录,

  1. 如果是FMX工程,那么它会在工程源码中添加了一句代码,表示将FMX自带的绘制引擎切换为使用Skia,也就是所有的FMX控件都会使用Skia进行绘制,它能提高绘制的质量和性能。

Skia与自带绘制引擎的效果比较

我用画布在PaintBox上画一些图形,代码如下:

看看自带引擎的效果:

Screenshot_2023-08-08-09-13-59-095_com.embarcader

再看启用Skia之后的效果:

Screenshot_2023-08-08-09-12-58-442_com.embarcader

一眼就能看出来了,自带引擎画圆的时候特别粗糙。

PDF输出

使用Skia你可以创建PDF文档并绘制任何东西,比如文本、图片。

运行之后,生成了PDF:

打开看一下:

图片的编码解码:

Skia支持解码的图片格式

图片格式 后缀名
Bitmap .bmp
GIF .gif
Icon .ico
JPEG .jpg,.jpeg
PNG .png
Raw Adobe DNG Digital Negative .dng
Raw Canon .cr2
Raw Fujifilm RAF .raf
Raw Nikon .nef,nrw
Raw Olympus ORF .orf
Raw Panasonic .rw2
Raw Pentax PEF .pef
Raw Samsung SRW .srw
Raw Sony .arw
WBMP .wbmp
WebP .webp

支持编码的图片格式

图片格式 后缀名
JPEG .jpg,.jpeg
PNG .png
WebP .webp

WebP是一个现在流行的图片格式,提供更卓越的无损和有损压缩。和PNG相关,WebP无损图像的文件体积小26%。WebP有损图像和同等质量的JPEG图像体积小25~34% .

举个例子来演示下如何将图片编码为WebP格式:

运行之后,可以看到:

图片格式 体积
PNG(100%质量) 513k
JPEG(80%质量) 66k
WebP(80%质量) 52k

接下来介绍下Skia4Delphi中的控件

支持SVG矢量图片格式的控件TSkSvg:

之前我有介绍过支持SVG格式图片的SVGIconImageList控件包,其实我们在安装它的时候可以选择下面四个引擎:

Image32:一个很强的图形库,用于图像处理

TSVG:使用Windows GDI+绘制的SVG库

D2D:Windows Direct2D

还有一个就是Skia4Delphi。

Skia4Delphi中的TSkSVg控件可以显示SVG图片:

拖一个到窗体上,双击就可以选择SVG图片:

运行时加载SVG图片的代码如下:

运行时加载svg

动图控件TSkAnimatedImage:

它可以加载并渲染动态图片,包括失量动画,支持如下格式:

Lottie file:高质量的矢量动画格式

Telegram Sticker:电报动画贴纸文件格式

GIF:动图

Animated WebP:动态WebP图片

下面我们来演示一下:

拖一个TSkAnimatedImage到窗体上,双击选择动图文件:

jdfw2

运行时效果图片:

jdfw

富文本显示控件TSkLabel:

与自带的TLabel相比,它功能更多:

  • 支持同一控件不同的字体
  • 支持BiDi(从右到左)
  • 支持水平对齐
  • 支持自定义字段
  • 支持部分文字背景颜色
  • 限制最大行数
  • 自动调整尺寸选项
  • 高级选项(如下划线、波浪线、上划线、虚线等……)

DFZHL~@UF$0RUBTZ@HTH39I

使用Skia着色语言(SKSL)的效果和滤镜:

SKSL(Skia Shader Language)是一种用于编写 GPU 着色器的编程语言,由 Skia 图形引擎提供。着色器是一种在图形渲染过程中运行在 GPU 上的小程序,用于处理顶点和像素数据,以生成最终的渲染图像。SKSL 语言类似于其他着色器语言(如 GLSL 和 HLSL),但专为 Skia 设计,以便与 Skia 图形引擎的其他部分紧密集成。

SKSL 支持基本的数据类型(如 int、float、vec2、vec3 等)、控制结构(如 if、for、while 等)以及内置函数(如 sin、cos、dot 等),使得开发者可以编写复杂的图形处理算法。此外,SKSL 还支持自定义函数和结构,以便开发者可以根据需要扩展其功能。

SKSL文件的后缀为.sksl,比如我打开示例中的rainbow-twister.sksl:

是一个函数,然后用Skia来显示,效果如下:

着色器效果

自带丰富的示例:

游戏示例:

手写示例:

图像处理:

等等……

由于Skia的强大,越来越多的人都已经使用它,不过由于是开源控件,免费使用的,收到的捐助寥寥无几。从官网上看只有16位捐助者:

收到了489美元。

好消息是,Skia4Delphi已经被EMB收编,在即将到来的Delphi 12.0 Yukon已经集成了Skia4Delphi,并且还对它进行了扩展,比如在Android下使用Vulkan驱动。

相信借助Google Skia,使用Delphi开发出来的应用会越来越出色!