在WPF中使用SVG矢量图

WPF原生并不支持svg矢量图。但是WPF原生的画形状工具的使用方式与SVG非常相似。

以该图片为例:
在这里插入图片描述

这个图片的形状是这样的:
在这里插入图片描述

在这段svg代码里面,主体的就是那一段特别长的path标签,它包含的4段“M”开头的数据分别定义了这四个方块。

而在WPF中,有着用法完全相同的path标签。所以用法也很简单,只要在WPF中创建一段 标签,并将这段数据作为“data”的参数填入,就像这样:
在这里插入图片描述

但是,这种方法有一个问题:
在这里插入图片描述

这段svg代码的对应图形如下:
在这里插入图片描述

可以很明显的发现,这段代码和上一个相比,增加了Line、rect两类元素,分别对应的是分隔的横线和内部的两点两横。他们的数据方式也与path截然不同,难以直接转化。

不过,所幸市面上有很多成熟的矢量图转化(和编辑)软件。例如开源的inkscape。用inkscape打开该svg文件,然后保存为xaml格式,我们就得到了以下代码:

在这里插入图片描述

毫无疑问,xaml文件作为WPF本身的主体文件当然是完美符合语法的。

接下来,只要在WPF中创建一个用户控件,然后用这里的整块代替原本的,就获得了一个矢量的用户控件,可以被别的模块调用。

——但是注意,似乎是因为svg和xaml的格式不同,第一是xaml里面对小数点后的数据支持很差,虽然支持小数点后一位,但是实际调整时很可能根本没有变化,或者变化方式不仅离散而且变化临界点很奇怪。 但是在设计器里没法正确显示这个规模的变化(实际运行后是正常修改了的)。

第二是个别元素的位置会发生奇怪的偏移(可能是因为小数点)。

因此,需要看着设计界面对元素稍作修正。当然如果从一开始制作的svg就不包含小数点就再好不过了。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值