BCGControlBar教程：使用矢量图形

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

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

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

BCGControlBar

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

BCGControlBar

什么是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个16x16和20个32x32基本图标。

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

Microsoft Expression Design 4：使用非常简单。如果您熟悉Microsoft Office产品，则可以立即开始创建自己的SVG文件！

Inkscape：非常强大的工具，但学习它需要一些时间。

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

如何准备SVG图像列表：

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

<？xml version =“1.0”encoding =“utf-8”？>

< svg> 

    <svg> 

        1-st icon 

    </ svg> 

    <svg> 

        2-nd icon 

    </ svg> 

    <svg> 

        3-rd icon 

    < / svg> 

    ..... 

</ svg>

图标按每个“第二级”SVG的“x”和“y”属性排序。请使用我们的工具栏编辑器和功能区设计器生成列表：如果应用程序具有基于SVG的工具栏/色带，我们的工具允许将SVG图标添加到现有图像列表或创建新列表。

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

准备SVG图像列表并将其保存在项目RES文件夹中。例如，如果您的应用程序只有一个工具栏，请创建toolbar.svg文件并将其复制到<我的应用程序> \ Res文件夹。

将SVG文件导入资源：应将新添加的文件导入“SVG”资源类型。

在文本编辑器中打开.rc文件并用SVG替换现有的BMP或PNG文件：

Old .rc：

IDB_MYTOOLBAR PNG DISCARDABLE“res \ Toolbar.png” 

New .rc：

IDB_MYTOOLBAR SVG DISCARDABLE“res \ Toolbar.svg “

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

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

BCGSoftUI界面矢量图形

0

分