WPF实现雷达图(仿英雄联盟)

前言

    有小伙伴提出需要实现雷达图。 

由于在WPF中没有现成的雷达图控件，所以我们自己实现一个。

PS：有更好的方式欢迎推荐。

代码如下

一、创建 RadarChart.cs 菜单继承 Control代码如下。

RadarChart.cs实现思路如下

1、RadarArray ：存放展示集合 。

2、重写OnRender 。

3、根据三角函数和圆的半径计算出圆上的N个点绘制成多边形

GetPolygonPoint()。

4、在绘制多边形的时候因为需要多个大小不一的多边形，则需要

多次调用GetPolygonPoint()方法，最外层绘制150，中间层100

中心点层 50。

5、DrawPoints() 方法增加了一个bool参数isDrawText是否绘制Text文

本，因为最外侧需要绘制文本。

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Globalization;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;
​
namespace WPFDevelopers.Controls
{
    public class RadarChart:Control
    {
        public ObservableCollection<RadarModel> RadarArray
        {
            get { return (ObservableCollection<RadarModel>)GetValue(RadarArrayProperty); }
            set { SetValue(RadarArrayProperty, value); }
        }
​
        public static readonly DependencyProperty RadarArrayProperty =
            DependencyProperty.Register("RadarArray", typeof(ObservableCollection<RadarModel>), typeof(RadarChart), new PropertyMetadata(null));
​
​
        static RadarChart()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(RadarChart), new FrameworkPropertyMetadata(typeof(RadarChart)));
        }
        protected override void OnRender(DrawingContext drawingContext)
        {
            DrawPoints(150, drawingContext,true);
            DrawPoints(100, drawingContext);
            DrawPoints(50, drawingContext);
​
            var myPen = new Pen
            {
                Thickness = 4,
                Brush = Brushes.DodgerBlue
            };
            myPen.Freeze();
            StreamGeometry streamGeometry = new StreamGeometry();
            using (StreamGeometryContext geometryContext = streamGeometry.Open())
            {
                var h = this.ActualHeight / 2;
                var w = this.Actual