您的位置:首页 > 编程语言

简单图标转xaml代码

2017-10-18 20:28 211 查看

工具

PhotoShopCC(2017)

Blend 2017

原图

  


步骤

1,使用钢笔工具勾勒出大致路径



2,将工作路径转为形状路径

3,图层右键->复制SVG

<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="1.27cm" height="1.27cm">
<path fill-rule="evenodd" fill="rgb(255, 255, 255)"
d="M18.383,0.048 C18.383,0.048 9.477,-1.197 7.660,7.697 L7.660,12.287 C7.660,12.287 6.128,13.339 6.128,14.582 C6.128,14.582 5.840,17.116 7.660,18.406 L9.191,18.406 L13.787,24.526 L13.787,26.821 C13.787,26.821 -0.000,29.139 -0.000,33.705 L-0.000,36.000 L36.000,36.000 L36.000,33.705 C36.000,33.705 30.647,26.821 22.213,26.821 L22.213,24.526 C22.213,24.526 25.503,21.351 26.809,18.406 C26.809,18.406 27.295,17.689 29.106,17.641 C29.106,17.641 29.872,16.819 29.872,14.582 C29.872,14.582 30.032,12.930 28.340,12.287 L28.340,7.697 C28.340,7.697 27.790,0.048 18.383,0.048 Z"/>
</svg>

4,打开Blend 2017

代码

<WrapPanel VerticalAlignment="Center" ItemHeight="128" ItemWidth="128">
<Viewbox Height="16" Width="16">
<Path Data="M18.383,0.048 C18.383,0.048 9.477,-1.197 7.660,7.697 L7.660,12.287
C7.660,12.287 6.128,13.339 6.128,14.582 C6.128,14.582 5.840,17.116 7.660,18.406 L9.191,18.406
L13.787,24.526 L13.787,26.821 C13.787,26.821 -0.000,29.139 -0.000,33.705 L-0.000,36.000 L36.000,36.000
L36.000,33.705 C36.000,33.705 30.647,26.821 22.213,26.821 L22.213,24.526 C22.213,24.526 25.503,21.351 26.809,18.406
C26.809,18.406 27.295,17.689 29.106,17.641 C29.106,17.641 29.872,16.819 29.872,14.582 C29.872,14.582 30.032,12.930 28.340,12.287
L28.340,7.697 C28.340,7.697 27.790,0.048 18.383,0.048 Z" Fill="Black"/>
</Viewbox>
<Viewbox Height="32" Width="32">
<Path Data="M18.383,0.048 C18.383,0.048 9.477,-1.197 7.660,7.697 L7.660,12.287
C7.660,12.287 6.128,13.339 6.128,14.582 C6.128,14.582 5.840,17.116 7.660,18.406 L9.191,18.406
L13.787,24.526 L13.787,26.821 C13.787,26.821 -0.000,29.139 -0.000,33.705 L-0.000,36.000 L36.000,36.000
L36.000,33.705 C36.000,33.705 30.647,26.821 22.213,26.821 L22.213,24.526 C22.213,24.526 25.503,21.351 26.809,18.406
C26.809,18.406 27.295,17.689 29.106,17.641 C29.106,17.641 29.872,16.819 29.872,14.582 C29.872,14.582 30.032,12.930 28.340,12.287
L28.340,7.697 C28.340,7.697 27.790,0.048 18.383,0.048 Z" Fill="Red"/>
</Viewbox>
<Viewbox Height="64" Width="64">
<Path Data="M18.383,0.048 C18.383,0.048 9.477,-1.197 7.660,7.697 L7.660,12.287
C7.660,12.287 6.128,13.339 6.128,14.582 C6.128,14.582 5.840,17.116 7.660,18.406 L9.191,18.406
L13.787,24.526 L13.787,26.821 C13.787,26.821 -0.000,29.139 -0.000,33.705 L-0.000,36.000 L36.000,36.000
L36.000,33.705 C36.000,33.705 30.647,26.821 22.213,26.821 L22.213,24.526 C22.213,24.526 25.503,21.351 26.809,18.406
C26.809,18.406 27.295,17.689 29.106,17.641 C29.106,17.641 29.872,16.819 29.872,14.582 C29.872,14.582 30.032,12.930 28.340,12.287
L28.340,7.697 C28.340,7.697 27.790,0.048 18.383,0.048 Z" Fill="Green"/>
</Viewbox>
<Viewbox Height="128" Width="128">
<Path Data="M18.383,0.048 C18.383,0.048 9.477,-1.197 7.660,7.697 L7.660,12.287
C7.660,12.287 6.128,13.339 6.128,14.582 C6.128,14.582 5.840,17.116 7.660,18.406 L9.191,18.406
L13.787,24.526 L13.787,26.821 C13.787,26.821 -0.000,29.139 -0.000,33.705 L-0.000,36.000 L36.000,36.000
L36.000,33.705 C36.000,33.705 30.647,26.821 22.213,26.821 L22.213,24.526 C22.213,24.526 25.503,21.351 26.809,18.406
C26.809,18.406 27.295,17.689 29.106,17.641 C29.106,17.641 29.872,16.819 29.872,14.582 C29.872,14.582 30.032,12.930 28.340,12.287
L28.340,7.697 C28.340,7.697 27.790,0.048 18.383,0.048 Z" Fill="Blue"/>
</Viewbox>
</WrapPanel>


效果

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: