BCGControlBar教程：使用矢量圖形

---

BCGControlBar庫提供了一種在工具欄/菜單/功能區(qū)和其他控件中使用可縮放矢量圖形（SVG）的非常簡單有效的方法。

為什么需要使用矢量圖形而不是光柵？

高DPI支持是當今非常重要的應用程序功能之一：由于越來越多的客戶使用高分辨率顯示器，該程序應該具有DPI感知能力。許多年前，我們已經實現(xiàn)了“平滑圖像調整大小”：每個工具欄/功能區(qū)圖標根據當前DPI自動調整大小，但圖標在高DPI顯示屏上呈現(xiàn)模糊。如果DPI值為125％或150％，則模糊并不重要，但如果DPI為175％或更高（例如，MS Surface），則結果不太好 - 您可以看到“模糊”圖標邊緣：

解決方案是為每個DPI準備單獨的圖像集，但是如果您的應用程序有很多工具欄或功能區(qū)控件，那么資源量很大并且很難維護它們（即使您需要添加一個圖標，你要準備至少4個單獨的圖像：16x16,24x24,32x32和40x40?。?。 因此，只有在使用可縮放矢量圖形時，才能確保您的應用程序在所有預期的DPI下看起來都很好。以下屏幕截圖顯示了在200％DPI環(huán)境中啟動矢量圖標的應用程序 - 不再有模糊圖標了！

什么是SVG：

SVG（“可擴展矢量圖形”，由 W3C推薦 ）是描述二維圖形格式的XML文件。BCGSoft庫具有SVG支持，但具有以下限制：

• 出于安全原因，未實現(xiàn)腳本，交互和外部對象。
• 動畫，視頻，聲音和內部圖像未實現(xiàn)。
• 由于SVG圖標應該很小并且快速渲染，因此我們禁用了以下可能會嚴重影響繪圖性能的SVG元素：

  • <pattern>

  • <color-profile>

  • <hkern>

  • <hatch>

  • <hatchpath>

  • all effects 和 filters
• 壓縮的SVG文件（SVGz）。

建議僅使用簡化的（“優(yōu)化的”）SVG：所有元素（如文本或形狀）都應轉換為路徑，并且應組合所有路徑。簡化的SVG小而快速繪圖。此外，在這種情況下，對您的媒體進行“逆向工程”將非常困難。

如何創(chuàng)建SVG圖標：

為方便起見，我們的設計師準備了一組SVG圖標，您可以在應用程序中自由使用！請在Graphics文件夾中找到它們- 有40個16x16和20個32x32基本圖標。

以下免費工具允許您創(chuàng)建新的SVG圖像：

• Microsoft Expression Design 4：使用非常簡單。如果您熟悉Microsoft Office產品，則可以立即開始創(chuàng)建自己的SVG文件！
• Inkscape：非常強大的工具，但學習它需要一些時間。

或者，您可以使用任何商業(yè)應用程序，如CorelDraw或Adobe Illustrator。 此外，還有很多第三方免費軟件/商業(yè)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”屬性排序。請使用我們的工具欄編輯器和功能區(qū)設計器生成列表：如果應用程序具有基于SVG的工具欄/色帶，我們的工具允許將SVG圖標添加到現(xiàn)有圖像列表或創(chuàng)建新列表。

如何使用新的SVG列表替換現(xiàn)有的BMP / PNG圖像列表：

1. 準備SVG圖像列表并將其保存在項目RES文件夾中。例如，如果您的應用程序只有一個工具欄，請創(chuàng)建toolbar.svg文件并將其復制到<我的應用程序> \ Res文件夾。
2. 將SVG文件導入資源：應將新添加的文件導入“SVG”資源類型。
3. 在文本編輯器中打開.rc文件并用SVG替換現(xiàn)有的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圖像。