借助全新的画布渲染模块Qt Canvas Painter，我们致力于打造最好的现代C++绘画API。本博客将介绍它为Qt用户带来的一些新的创新画布渲染特性，并解释它们是什么以及如何使用。
在阅读本篇博客之前，请查看上一篇介绍Qt Canvas Painter的博客。了解了Qt Canvas Painter的基础概念后，您可以继续阅读本文，了解其提供的新画布渲染特性的详细信息。
Qt Canvas Painter基本上是移植到Qt C++的HTML Canvas 2D上下文API，并做了一些删减和增补。在上一篇博客中，我们介绍了相较于2D上下文，canvas渲染功能的主要缺失部分，因此在本篇博客中，我们将更多地讨论新增功能。这些新增功能旨在实现此API的主要目标：在硬件加速的命令式绘制器上尽可能有效地结合性能和开发效率。
接下来，我们将逐一介绍这些新功能，但首先，请注意以下警告：
Qt Canvas Painter是Qt 6.11的技术预览版。这意味着我们还不能保证API或ABI的稳定性。
Canvas渲染亮点
详细介绍的canvas渲染特性有：
可调抗锯齿：可自由调整路径填充和笔触的抗锯齿，例如，用于渲染阴影和发光。
盒状渐变：一种新颖的渐变类型，仅需几个三角形即可实现圆角矩形渐变。
方框阴影：采用SDF方法实现高性能动态阴影。
网格图案：用于动态网格和条形图的画笔，即使在动画效果下性能也非常出色。
自定义着色器笔刷：使用自定义片段和顶点着色器的定制笔刷。
色彩效果：调整填充和描边的透明度、亮度、对比度和饱和度。
在博客的最后，还简要提到了其他一些功能。
可调抗锯齿功能
抗锯齿功能是现代用户界面的重要组成部分，在2D画布渲染中也是如此。QPainter的默认光栅后端支持抗锯齿，极简主义风格。另一方面，QPainter的OpenGL后端支持使用多重采样（MSAA）技术实现抗锯齿。这需要GL_EXT_framebuffer_multisample和GL_EXT_framebuffer_blit扩展的支持，桌面端设备通常支持这些扩展，但嵌入式设备却不一定支持。
根据多年来许多用户的反馈，由于多种原因，只选择MSAA来进行抗锯齿并不理想。出于性能或资源使用方面的考虑，选择在整个呈现目标中使用MSAA对某些人来说并不合适，而对其他人来说，在整个绘图过程中打开MSAA在视觉上并不合适。Qt Canvas Painter支持MSAA和顶点抗锯齿方法，可实现无锯齿边缘的平滑渲染，而无需启用MSAA。
顶点抗锯齿功能强大的一点是，抗锯齿量可以自由调整。设计师可以不采用常见的1像素抗锯齿，而选择例如1.5像素或3像素的抗锯齿量，使绘画效果更平滑。而且，抗锯齿量还可以调整，不同的路径可以使用不同的抗锯齿量。
这种可自由调节的抗锯齿可以创造性地用于渲染阴影和发光等效果。
对于文本，方法则略有不同。对于文本渲染，Canvas Painter使用符号距离场（SDF）方法。基本上，字体字形被渲染为模糊的小纹理，然后使用片段着色器smoothstep()来创建清晰、可缩放的文本。但SDF也允许使用部分模糊效果来使文本更平滑。由于SDF字体纹理的分辨率较低，这种平滑极简主义风格受到一定限制，但通过此技术仍然可以实现更平滑的文本效果。
要了解有关这些功能的更多信息，请参阅QCanvasPainter的setAntialias()和setTextAntialias()方法。
盒状渐变
Qt Canvas Painter支持所有常见的渐变类型：线性渐变、径向渐变和锥形渐变。这些渐变功能与2D上下文的功能一致，其API对于QPainter和C++用户来说比带有许多参数的create*Gradient()方法更自然一些。
但Qt Canvas Painter还支持一种额外的渐变类型，即QCanvasBoxGradient。现代用户界面通常不同程度的圆角的矩形。使用roundRect()方法很容易创建这些矩形，但如果您希望边缘更平滑，或使用多种颜色为圆角矩形着色，该怎么办呢？在这种情况下，您可以使用QCanvas极简主义风格笔刷，用它来绘制非圆角矩形。
QCanvasBoxGradient笔刷可以单独调整半径和羽化，因此适用于边角较尖或较软的不同用例。
基准测试和性能将在下一篇博文客中讨论，但我们还是简要谈谈盒状渐变。最初，人们可能会认为下图显示的是两个绘制相似的圆角矩形，对吗？
但事实并非如此。左边是带有填充和描边的roundRect()，右边是带有填充的盒状渐变。它们的输出外观非常相似，但在底层实现上却截然不同。左侧图形在当前分辨率下，使用了202个三角形，描边使用了280个三角形，因此总共使用了484个三角形。右图只使用了10个三角形即可实现抗锯齿填充，因此它的三角化处理速度更快。因此，如果三角化处理或顶点处理在特定目标硬件上成为性能瓶颈，而片段着色器仍有空闲处理能力，不妨考虑采用盒状渐变来绘制圆角矩形。
盒状阴影
Canvas Painter的QCanvasBoxShadow是上述盒状渐变的近亲，其API与CSS盒状阴影相匹配。但它没有使用速度较慢的高斯模糊方法，而是在片段着色器上使用了高性能的SDF方法。这也可以看作是Qt Quick的RectangularShadow元素的命令式版本。
由于这些方框阴影是通过相当简单的数学计算得出的，因此它们只支持圆角矩形阴影，与高斯模糊阴影的渲染输出并不完全匹配。但如果面临因性能问题而完全无法使用阴影，或是采用快速盒阴影之间的抉择，后者无疑是值得选择的方案，因为它们具有极快的渲染和动画速度。
网格模式
了解QPainter的人可能还知道，QBrush包含Qt::BrushStyle，其中提供了一些针对条形和网格的不同图案样式。这些样式被硬编码为特定的模式，如今在示例之外已很少使用，因为设计师通常希望使用更具体的模式。为满足这一需求并提供更现代化的网格与条形图案方案，Qt Canvas Painter推出了QCanvasGridPattern笔刷。
与QBrush样式相比，该类通过毫不费力地定义线宽、位置、旋转、羽化量等，实现了更大的自由度。渲染是通过相当简单的片段着色器代码完成的，因此即使图案值是动态的，性能也非常好。
当然，网格也可以通过描线来绘制。但不同的是，使用网格图案时，无论网格包含10条线还是1000条线，性能都完全相同。
自定义着色器笔刷
现在，Qt Canvas Painter为描边和填充提供了相当丰富的画笔材质，这一点已经很明显了。但还有一点：自定义着色器画笔。
由于Qt Canvas Painter是在QRhi的基础上构建的，因此实际上需要GPU支持，我们也可以构建需要着色器的API。这样，填充和描边就不受内置笔刷的限制，可以广泛定制。下面是几个使用自定义笔刷的示例。
当然，自定义笔刷也可用于极简主义风格处理。例如，自定义顶点着色器可用于动态调整字符位置。
QCanvasCustomBrush是技术预览期间将有所变动的的类之一，因为我们希望使其功能更强大，以涵盖多种使用场景。
色彩特效
HTML 2D上下文有一个名为globalAlpha的属性，用于设置填充/描边的当前透明度。在QPainter中，同样的功能称为setOpacity()。同样，Canvas Painter也允许设置全局alpha，但它还支持额外的色彩效果：亮度、对比度和饱和度。下面是一个结合了上述所有效果的示例，将背景绘画变为纯色和深色，这样顶部的弹出窗口就会更加突出，便于用户注意。
通过使用这些特性，可以轻松地为单个路径或整个画布应用色彩特效并制作动画。由于这些特效是作为画布呈现器片段着色器的最后一步应用的，而且不需要呈现到屏幕外的缓冲区，因此使用这些特效几乎没有任何开销。
其他Canvas渲染功能
与HTML 2D上下文相比，还存在一些其他相对次要的附加Canvas渲染功能，但在此可以简要提及：
Canvas Painter文本支持自动换行和将包装后的文本对齐到矩形中。（2D上下文只支持单行文本）。
为图像和图像模式着色。（2D上下文不支持此功能。最接近的解决方案可能是使用合适的复合模式进行混合）。
为路径添加圆的简单方法。（2D上下文API要求使用从0到2 * PI的arc()来绘制圆）。
在实体路径中添加孔路径的简单环绕方法。
离屏画布类允许渲染到缓冲区中，以便缓存或与图像模式一起极简主义风格。其用法与HTML画布2D上下文OffscreenCanvas相似，但使用的是相同的QCanvasPainter，而不是单独的渲染上下文。
使用setBrushTransform()对画笔进行单独变换。画笔和路径都会受到状态变换（变换、旋转、缩放等）的影响。Canvas Painter还为画笔材质提供了一个额外的矩阵，使其能够独立于路径进行变换。
结论
以上示例只是Qt Canvas Painter在HTML 2D上下文API基础上提供的一些额外画布渲染特性。随着Canvas Painter的不断发展，我们将对这些功能进行微调，并添加更多功能。
若想参与这场激动人心的开发进程，请安装Qt 6.11预发行版或从源代码中构建Qt并试用Canvas Painter的功能。同时欢迎提交错误报告和建议工单。获取真实用户反馈是我们改进产品、使其脱离技术预览阶段并成为Qt解决方案完全支持功能的最佳途径。有关本博文和Canvas Painter的问题也可以在相关的Qt Forum主题中提出。
期待在下一期博客中与您再会，我们将在博客中详细介绍新版Canvas Painter无与伦比的性能表现！
END
往期推荐
