用Silverlight做雷达图

很多游戏都用雷达图来表示角色的能力值，比如主角的体智敏贤。接下来介绍一下我做的Silverlight雷达图还包含了动画功能。虽然很简单，但不失为一次很好的Silverlight开发体验。

示例：

首先创建一个叫Star的UserControl，作为独立可重用的组件。不需要改动前端的XAML Code，所有的绘画动作都有后台代码完成。假设现在是一个五星图，绘制五个端点的逻辑其实就是从正上方的点开始，每隔360/5放置下个点。

Silverlight有一个多边形的类Polygon可以很好的完成任务。可是这里选用更加通用的Path类主要是为动画效果，由于Polygon的端点无法绑定到Storyboard，在下面会有解释。

在Silverlight中可以用RotateTransform做到基于圆心的点的旋转。

var rotate = new RotateTransform();
rotate.Angle = ( 360 / 5 );
rotate.Transform( new Point());

如此重复5次五个点就可以定位了。由于Path支持许多复杂的图形，能力越大功能越通用也就意味着结构上的复杂。往Path里添加线段需要几个步骤：

1. 设置Path的绘图数据Path.Data为一个几何数据类型PathGeometry

2. PathGeometry可以包含若干个图形，比如同一个Path可以包含一个圆形和一个多边形。由于这里只需要画一个五角形所以只需要一个PathFigure。

3. PathFigure需要很多线段组成，我们往PathFigure.Segments里添加LineSegment

整个流程大致这样

var path = new Path { Data = new PathGeometry() };
var geo = new PathGeometry();
path.Data = geo;
var fig = new PathFigure();
geo.Figures.Add(fig);
fig.StartPoint = new Point();
var seg = new LineSegment();
seg.Point = new Point();
fig.Segments.Add(seg);

有了Path勾勒出的五角形就可以绘制线段或者填充了。Path使用起来虽然麻烦但是对动画的支持很好，接下来就可以体现它的优势了。

制作动画的关键是动画效果Animation以及动画播放器Storyboard。这里用到了点的位移所以选用PointAnimation。为了绑定多边形的点，Silverlight提供了强大的路径选择器，整个的语法就像解构上面添加点的过程。

var anima = new PointAnimation();
anima.To = new Point();
anima.Duration = TimeSpan.FromMilliseconds(AnimaDuration);
Storyboard.SetTarget(anima, new Path());
Storyboard.SetTargetProperty(anima, new PropertyPath(
" (Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(LineSegment.Point) " ));

注意最后的字符串，对比之前构建五星图的过程，不难看出这就是一个层层访问属性的路径，数字代表集合元素的位置。整个动画设置了终止点以及持续时间。

好了所有关键技术点都介绍完毕，我们就可以搭建整个五星图类，当然可以很方便的推广到一般雷达图。下面是注释和代码

public partial class Star : UserControl
{
Path instance; // 内脏 // 显示的数据
Point center; // 图的中心
double radius; // 半径
const double AnimaDuration = 800 ; // 动画时长
Brush stroke_color = new SolidColorBrush(Colors.Black); // 骨架色
Brush fill_color = new SolidColorBrush(Colors.Blue); // 填充色

public Star()
{
InitializeComponent();
Loaded += new RoutedEventHandler(Star_Loaded);
}

// 画骨架，初始化内脏
void Star_Loaded( object sender, RoutedEventArgs e)
{
radius = 300 / 2 ;
if (Height < Width)
radius = 300 / 2 ;
center = new Point( 300 / 2 , 300 / 2 );

double step = radius / 5 ;
for ( int i = 0 ; i < 5 ; i ++ )
{
var star = AddStar(center, radius - i * step);
star.Stroke = stroke_color;
}
AddLines(radius, center);
InitInstance(center);
}

// 设置五个0-1的值，按半径比例显示五个点的位置
public void SetStarValues( double ratio1, double ratio2, double ratio3, double ratio4, double ratio5)
{
var newPoints = CalcStarByRatio(center, radius, ratio1, ratio2, ratio3, ratio4, ratio5);

var storyboard = new Storyboard();

// 起始点和线段点要分开处理
for ( int i = 0 ; i < 6 ; i ++ )
{
var anima = new PointAnimation();
anima.To = newPoints[i % 5 ];
anima.Duration = TimeSpan.FromMilliseconds(AnimaDuration);
Storyboard.SetTarget(anima, instance);
if (i == 5 )
Storyboard.SetTargetProperty(anima, new PropertyPath( " (Path.Data).(PathGeometry.Figures)[0].(Point.StartPoint) " ));
else
Storyboard.SetTargetProperty(anima, new PropertyPath( " (Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[ " + i + " ].(LineSegment.Point) " ));
storyboard.Children.Add(anima);
}
storyboard.Begin();
}

// 初始内脏，五个值都为0
private void InitInstance(Point center)
{
instance = AddStar(center, 0 );
instance.Fill = fill_color;
}

// 画直线
private void AddLines( double radius, Point center)
{
var outsidePoints = CalcFiveVertice(center, radius);
foreach (var p in outsidePoints)
{
var line = new Line();
line.X1 = p.X;
line.Y1 = p.Y;
line.X2 = center.X;
line.Y2 = center.Y;
line.Stroke = stroke_color;
LayoutRoot.Children.Add(line);
}
}

// 画五角形的Path，可以用来填充或者画线段
Path AddStar(Point center, double radius)
{
var points = CalcFiveVertice(center, radius);
var star = new Path();
var geo = new PathGeometry();
star.Data = geo;
var fig = new PathFigure();
geo.Figures.Add(fig);
fig.StartPoint = points[ 0 ];
// 最后一个点要回到起始点
for ( int i = 1 ; i < points.Length + 1 ; i ++ )
{
var p = points[i % points.Length];
var seg = new LineSegment();
seg.Point = p;
fig.Segments.Add(seg);
}

LayoutRoot.Children.Add(star);
return star;
}

// 定位点
internal static Point[] CalcStarByRatio(Point center, double radius, params double [] r)
{
var points = new List < Point > ();
for ( int i = 0 ; i < r.Length; i ++ )
{
var radians = i * 2 * Math.PI / r.Length + Math.PI / 2 ;
points.Add( new Point(r[i] * Math.Cos(radians) * radius + center.X, - r[i] * Math.Sin(radians) * radius + center.Y));
}

return points.ToArray();
}

// 同比的五个点，助手方法
internal static Point[] CalcFiveVertice(Point center, double radius)
{
return CalcStarByRatio(center, radius, 1 , 1 , 1 , 1 , 1 );
}
}

这里要注意区分处理Path的起始点和普通点。只要在外部调用类的CalcStarValues并填入对应值就可以工作了。

PS: 1. 本程序在SL4中编译调试通过

2. 如果换用Polygon可以简化很多图形处理步骤，可惜Polygon的端点不是DependencyProperty，所以没有办法是用动画绑定了。

转载于:https://www.cnblogs.com/dragonpig/archive/2011/01/28/1946577.html