BCGControlBar教程：使用矢量圖形

---

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

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

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

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

什么是SVG：

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

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

  • <pattern>

  • <color-profile>

  • <hkern>

  • <hatch>

  • <hatchpath>

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

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

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

為方便起見，我們的設(shè)計(jì)師準(zhǔn)備了一組SVG圖標(biāo)，您可以在應(yīng)用程序中自由使用！請?jiān)贕raphics文件夾中找到它們- 有40個(gè)16x16和20個(gè)32x32基本圖標(biāo)。

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

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

或者，您可以使用任何商業(yè)應(yīng)用程序，如CorelDraw或Adobe Illustrator。 此外，還有很多第三方免費(fèi)軟件/商業(yè)SVG圖標(biāo)集。

如何準(zhǔn)備SVG圖像列表：

當(dāng)框架加載圖像列表資源時(shí)，首先它正在尋找SVG資源并嘗試解析SVG。我們假設(shè)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>

圖標(biāo)按每個(gè)“第二級(jí)”SVG的“x”和“y”屬性排序。請使用我們的工具欄編輯器和功能區(qū)設(shè)計(jì)器生成列表：如果應(yīng)用程序具有基于SVG的工具欄/色帶，我們的工具允許將SVG圖標(biāo)添加到現(xiàn)有圖像列表或創(chuàng)建新列表。

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

1. 準(zhǔn)備SVG圖像列表并將其保存在項(xiàng)目RES文件夾中。例如，如果您的應(yīng)用程序只有一個(gè)工具欄，請創(chuàng)建toolbar.svg文件并將其復(fù)制到<我的應(yīng)用程序> \ Res文件夾。
2. 將SVG文件導(dǎo)入資源：應(yīng)將新添加的文件導(dǎo)入“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是一個(gè)SVG”sprite“ - 包含嵌套SVG列表的SVG。

4. 請確認(rèn)您已call AfxOleInit（）; 在您的應(yīng)用程序的InitInstance中：否則，框架無法加載SVG圖像。