BCGControlBar教程：使用矢量图形

BCGControlBar库提供了一种在工具栏/菜单/功能区和其他控件中使用可缩放矢量图形（SVG）的非常简单有效的方法。

BCGControlBar Pro for MFC最新试用版下载请猛戳>>>

BCGControlBar库提供了一种在工具栏/菜单/功能区和其他控件中使用可缩放矢量图形（SVG）的非常简单有效的方法。

为什么需要使用矢量图形而不是光栅/strong>

高DPI支持是当今非常重要的应用程序功能之一：由于越来越多的客户使用高分辨率显示器，该程序应该具有DPI感知能力。许多年前，我们已经实现了“平滑图像调整大小”：每个工具栏/功能区图标根据当前DPI自动调整大小，但图标在高DPI显示屏上呈现模糊。如果DPI值为125％或150％，则模糊并不重要，但如果DPI为175％或更高（例如，MS Surface），则结果不太好 – 您可以看到“模糊”图标边缘：

解决方案是为每个DPI准备单独的图像集，但是如果您的应用程序有很多工具栏或功能区控件，那么资源量很大并且很难维护它们（即使您需要添加一个图标，你要准备至少4个单独的图像：16×16,24×24,32×32和40×40！）。 因此，只有在使用可缩放矢量图形时，才能确保您的应用程序在所有预期的DPI下看起来都很好。以下屏幕截图显示了在200％DPI环境中启动矢量图标的应用程序 – 不再有模糊图标了！

什么是SVG：

SVG（“可扩展矢量图形”，由 W3C推荐 ）是描述二维图形格式的XML文件。BCGSoft库具有SVG支持，但具有以下限制：

• 出于安全原因，未实现脚本，交互和外部对象。
• 动画，视频，声音和内部图像未实现。
• 由于SVG图标应该很小并且快速渲染，因此我们禁用了以下可能会严重影响绘图性能的SVG元素：

  • <pattern>

  • <color-profile>

  • <hkern>

  • <hatch>

  • <hatchpath>

  • all effects 和 filters
• 压缩的SVG文件（SVGz）。

建议仅使用简化的（“优化的”）SVG：所有元素（如文本或形状）都应转换为路径，并且应组合所有路径。简化的SVG小而快速绘图。此外，在这种情况下，对您的媒体进行“逆向工程”将非常困难。

如何创建SVG图标：

为方便起见，我们的设计师准备了一组SVG图标，您可以在应用程序中自由使用！请在Graphics文件夹中找到它们- 有40个16×16和20个32×32基本图标。

以下免费工具允许您创建新的SVG图像：

• Microsoft Expression Design 4：使用非常简单。如果您熟悉Microsoft Office产品，则可以立即开始创建自己的SVG文件！
• Inkscape：非常强大的工具，但学习它需要一些时间。

或者，您可以使用任何商业应用程序，如CorelDraw或Adobe Illustrator。 此外，还有很多第三方免费软件/商业SVG图标集。

如何准备SVG图像列表：

当框架加载图像列表资源时，首先它正在寻找SVG资源并尝试解析SVG。我们假设SVG图像列表具有以下格式：

<ml version =“1.0”encoding =“utf-8”gt;< svg>    <svg>        1-st icon    </ svg>    <svg>        2-nd icon    </ svg>    <svg>        3-rd icon    < / svg>    .....</ svg>

如何使用新的SVG列表替换现有的BMP / PNG图像列表：

1. 准备SVG图像列表并将其保存在项目RES文件夹中。例如，如果您的应用程序只有一个工具栏，请创建toolbar.svg文件并将其复制到<我的应用程序> Res文件夹。
2. 将SVG文件导入资源：应将新添加的文件导入“SVG”资源类型。

Old .rc：IDB_MYTOOLBAR PNG DISCARDABLE“res  Toolbar.png” New .rc：IDB_MYTOOLBAR SVG DISCARDABLE“res  Toolbar.svg “

Toolbar.svg是一个SVG”sprite“ – 包含嵌套SVG列表的SVG。

3. 请确认您已call AfxOleInit（）; 在您的应用程序的InitInstance中：否则，框架无法加载SVG图像。

标签：BCGUI界面C/C++矢量图形