WPF绘制圆角多边形

介绍

最近，我发现我需要个圆角多边形。而且是需要在运行时从用户界面来绘制。WPF有多边形。但是不支持圆角。我搜索了一下。也没找到可行的现成例子。于是就自己做吧。本文描述了圆角多边形的实现，也包括如何用在你的项目里。在Demo里面的RoundedCornersPolygon 类是完整的实现。

下载的Demo包括两部分

1. 通过XAML绘制圆角多边形

2. 运行时创建圆角多边形

背景多边形可以被认为是沿着一个给定半径的圆的边缘和一些指定点/边。所构成的点的集合。

在WPF中。你可以给Polygon对象的Points属性添加一系列的点来制作多边形。

XAML方式

C#方式

上面两个例子会输出下面的矩形

使用代码 我写的RoundedCornersPolygon 类和普通的多边形类很相似。但是有更多的属性来控制圆角。首先。看一个例子。展示一下圆角矩形类的使用

XAML方式

C#方式

输出如下：

多边形有四个主要属性 ArcRoundness 属性指定了从距离LineSegment终点多远的距离开始弯曲，通常和UseRoundnessPercentage 一起使用。UseRoundnessPercentage属性指定了ArcRoundness 值是百分比还是一个固定的值。

举个例子。ArcRoundness 被设置成10，而且UseRoundnessPercentage 被设置成false，那么弯曲将会在距离线段终点10的地方开始。而如果UseRoundnessPercentage 被设置成ture。则会是从线段终点10%的地方开始弯曲。

IsClosed 指定多边形的最后一个点是否和第一个点闭合。为了成为一个多边形。一般应该被设置为true

Points属性则代表了多边形点的集合。

如何实现 控件实现了Shape 类，被用来画多边形的形状是一个Path对象。我们会往Path对象里添加LineSegment 和QuadraticBezierSegment 对象。QuadraticBezierSegment 对象表示一个贝塞尔曲线。由三个点定义。更多的信息请查看

对于一个普通的多边形，只有LineSegment是必须的，但是为了设计圆角多边形。就需要贝塞尔曲线了。每一次一个点被添加/一个属性被修改。形状会重绘。做圆角的关键方式就是ConnectLinePoints 方法。

还有两个方法计算弯曲部分开始的点GetPointAtDistance 和GetPointAtDistancePercent，第一个是以值计算，第二个是以百分比计算。

结论依然有很多细节应该完善的。但这仅仅是圆角多边形的一个尝试。比如。在其他情况。每个角应该有不同晚景的圆角，WPF使得一切皆有可能。本文的目的是创建一个大家可以用的圆角多边形，他们可以扩展来满足他们的需求。

Demo下载

[downloadicon href=http://pan.baidu.com/share/link?shareid=82217&uk=1493685990]圆角多边形[/downloadicon]

许可本文包括源代码和文件在CPOL下授权。

著作权声明：本文由http://leaver.me 翻译，欢迎转载分享。请尊重作者劳动，转载时保留该声明和作者博客链接，谢谢！

文章目录