BCGControlBar教程:使用向量圖形
BCGControlBar Pro for MFC最新試用版下載請猛戳>>>
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影象。