BCGControlBar教程:使用矢量图形
BCGControlBar库提供了一种在工具栏/菜单/功能区和其他控件中使用可缩放矢量图形(SVG)的非常简单有效的方法。
为什么需要使用矢量图形而不是光栅?
高DPI支持是当今非常重要的应用程序功能之一:由于越来越多的客户使用高分辨率显示器,该程序应该具有DPI感知能力。许多年前,我们已经实现了“平滑图像调整大小”:每个工具栏/功能区图标根据当前DPI自动调整大小,但图标在高DPI显示屏上呈现模糊。如果DPI值为125%或150%,则模糊并不重要,但如果DPI为175%或更高(例如,MS Surface),则结果不太好 - 您可以看到“模糊”图标边缘:
解决方案是为每个DPI准备单独的图像集,但是如果您的应用程序有很多工具栏或功能区控件,那么资源量很大并且很难维护它们(即使您需要添加一个图标,你要准备至少4个单独的图像:16x16,24x24,32x32和40x40!)。 因此,只有在使用可缩放矢量图形时,才能确保您的应用程序在所有预期的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个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图像。