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圖像列表:
- 準(zhǔn)備SVG圖像列表并將其保存在項(xiàng)目RES文件夾中。例如,如果您的應(yīng)用程序只有一個(gè)工具欄,請創(chuàng)建toolbar.svg文件并將其復(fù)制到<我的應(yīng)用程序> \ Res文件夾。
- 將SVG文件導(dǎo)入資源:應(yīng)將新添加的文件導(dǎo)入“SVG”資源類型。
- 在文本編輯器中打開.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。
- 請確認(rèn)您已call AfxOleInit(); 在您的應(yīng)用程序的InitInstance中:否則,框架無法加載SVG圖像。