WPF 這纔是使用矢量字體圖標Iconfont最好的姿勢

背景

iconfont相比大家現在應該都有了解了(當初也是因爲被我們設計吐槽,web前端爲什麼直接能用,寫WPF還要給我們轉成png使用,着實被吐槽的很慘,於是去了解了下,果不其然,百度一下,全都有)

我也就不耐其煩按着這教程拿着.ttf字體文件,把項目png圖標替換成設計給的iconfont;但是使用過程中也遇到很多問題,例如用fontsize去控制圖標大小,每次修改就要替換文件。還是忍不住吐槽真麻煩。

正文:Svg和Path的關係

總所周知,iconfont可以複製svg格式,而SVG提供了<circle>、<ellipse>、<line>、< polyline>、<reet>、<polygon>等6種基本的圖形元素和<path>路徑元素;而路徑元素是在WPF上是可以用Path控件表示的,所以下面請增大眼睛,就是實操了。

1、打開阿里巴巴矢量圖標官網(https://www.iconfont.cn/

2、隨便選一組圖庫點進去,我這邊選擇的是阿里雲官網圖標庫(https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.de12df413&cid=16472

3、隨便選擇一個圖標,複製svg

 4、只需要svg裏面的path的d屬性值,複製到WPF PATH控件的data上,就可以了。

<svg t="1592489894711" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3829" width="200" height="200"><path d="M863.68 517.76l-75.52 75.584c-1.376 4.672-2.976 9.216-4.544 13.76A281.088 281.088 0 0 1 769.696 640c-0.576 1.184-1.088 2.4-1.696 3.52V768H643.52l-3.552 1.728c-10.592 5.28-21.568 9.92-32.896 13.888-4.544 1.568-9.088 3.168-13.76 4.544l-75.552 75.52c-1.952 0.064-3.84 0.32-5.792 0.32s-3.84-0.256-5.76-0.32l-75.552-75.52c-4.672-1.376-9.216-2.976-13.792-4.544A289.376 289.376 0 0 1 384 769.728c-1.152-0.64-2.368-1.12-3.552-1.728H256V643.52L254.304 640a286.464 286.464 0 0 1-13.888-32.864c-1.6-4.576-3.2-9.12-4.576-13.792L160.32 517.76C160.288 515.84 160 513.92 160 512s0.288-3.84 0.32-5.76l75.52-75.552c1.376-4.672 2.976-9.216 4.576-13.792 3.968-11.296 8.608-22.272 13.888-32.896L256 380.448V256H380.448c1.184-0.576 2.4-1.12 3.52-1.696 10.656-5.28 21.632-9.92 32.928-13.888 4.576-1.6 9.12-3.2 13.76-4.576l75.584-75.52c1.92-0.032 3.808-0.32 5.76-0.32 1.92 0 3.84 0.288 5.76 0.32l75.584 75.52c4.672 1.376 9.216 2.976 13.76 4.576 11.328 3.968 22.304 8.608 32.896 13.888l3.52 1.696H768V380.448c0.608 1.184 1.12 2.4 1.696 3.52 5.312 10.656 9.92 21.632 13.92 32.928 1.568 4.576 3.168 9.12 4.544 13.76l75.52 75.584c0.064 1.92 0.32 3.808 0.32 5.76 0 1.92-0.256 3.84-0.32 5.76z m51.072-51.008l-70.816-70.816a348.352 348.352 0 0 0-11.936-29.696V192h-174.208a352.416 352.416 0 0 0-29.696-11.904l-70.848-70.848L512 64l-45.248 45.248-70.816 70.848c-10.112 3.52-20.032 7.488-29.696 11.904H192v174.24c-4.416 9.664-8.352 19.52-11.904 29.696l-70.848 70.816L64 512l45.248 45.248 70.848 70.848c3.52 10.112 7.488 20.032 11.904 29.696V832h174.24c9.664 4.448 19.584 8.384 29.696 11.936L512 960l116.096-116.064c10.112-3.552 20.032-7.488 29.696-11.936H832v-174.208c4.416-9.664 8.384-19.584 11.936-29.696l70.816-70.848L960 512l-45.248-45.248z" fill="#181818" p-id="3830"></path><path d="M617.376 361.376l-256 256 45.248 45.248 256-256zM448 384a64 64 0 1 0-128.032 0.032A64 64 0 0 0 448 384M640 576a64 64 0 1 0 0.032 128.032A64 64 0 0 0 640 576" fill="#181818" p-id="3831"></path></svg>

 5、一些複雜svg裏面會有多個Path,有倆種處理方式,一種是直接追加到後面,一種是利用Path的合併功能(建議選這個,雖然多操作了一下,但是合併後的控件少些。)

關鍵:

工欲上其事必先利器,我還是覺得這樣操作太麻煩了,於是就有了下面這個:

目前還是簡陋版本,不過有現在就想用的,可以留個郵箱,我發給你。已經簡單實現了阿里iconfont的簡單查詢功能,UI和功能還在完善中,請給我鼓勵吧。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章