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和功能还在完善中,请给我鼓励吧。

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