企业智能化解决方案服务商

BCGControlBar教程:使用矢量图形

翻译 使用教程 | 编辑:不飞的小鸟 | 2018-11-19 09:44:05| 阅读 0 有用 (0) 评论 (0) 收藏


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

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元素:
    • 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> 
     
        1-st icon 
     
     
        2-nd icon 
     
     
        3-rd icon 
    < / svg> 
    ..... 

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

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

  1. 准备SVG图像列表并将其保存在项目RES文件夹中。例如,如果您的应用程序只有一个工具栏,请创建toolbar.svg文件并将其复制到<我的应用程序> \ Res文件夹。
  2. 将SVG文件导入资源:应将新添加的文件导入“SVG”资源类型。
  3. 在文本编辑器中打开.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。

  4. 请确认您已call AfxOleInit(); 在您的应用程序的InitInstance中:否则,框架无法加载SVG图像。

慧都控件|提供软件技术整体解决方案

本站文章除注明转载外,均为本站原创或翻译。
欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
文章转载自:

用户评论: 您的宝贵经验,能为更多人带来帮助,登录后才能评论。
评论加载中...