简介

前段时间帮一个同事的忙,利用WPF实现的一个简单饼图,仅能看饼图的比例,无文字查看功能。效果图如下:

用法:

var sectorParts = new List<SectorPart>();
sectorParts.Add(new SectorPart(, Brushes.Red));
sectorParts.Add(new SectorPart(, Brushes.Green));
sectorParts.Add(new SectorPart(, Brushes.GreenYellow));
sectorParts.Add(new SectorPart(, Brushes.HotPink));
sectorParts.Add(new SectorPart(, Brushes.Yellow)); var ringParts = new List<RingPart>();
ringParts.Add(new RingPart(, , , , Brushes.White)); var shapes = PieChartDrawer.GetEllipsePieChartShapes(midPoint, , , , sectorParts, ringParts);
foreach (var shape in shapes)
{
GrdPie.Children.Add(shape);
}

设置好饼图相关的信息,获取其各个组成部分,再将其添加到容器中。

原理

可以看出简介中的图由一系列中扇形和环组成,计算出扇形和环的形状就可以完成饼图的绘制了。

扇形

一个扇形由两边和一条弧组成,扇形的关键就在已知圆周的圆形和半径,以及扇形的边绕Y轴正向旋转的角度,如何求出扇形在圆周上的点。

在才开始我走了不少弯路,利用矩阵做了许多运算,结果都不对。后面灵机一动,发现不用那么麻烦。直接把圆平移至原点,计算出相应扇形在圆周上的点,再将其平移回来即可。代码如下:

/// <summary>
/// 获取圆周上指定角度的点坐标
/// </summary>
/// <param name="center">圆心</param>
/// <param name="radius">半径</param>
/// <param name="angle">角度,从0到360度,以正北方向为0度,顺时针旋转角度增加</param>
/// <returns>在圆周上旋转角度后的坐标</returns>
public static Point GetCirclePoint(this Point center, double radius, double angle)
{
// 圆心平移到原点后0度所对应的向量
var zeroAngleVector = new Vector(, radius); // 旋转角度所对应的矩阵
var rotateMatrix = new Matrix();
rotateMatrix.Rotate( + angle); // 因旋转的中心点在原点,最后需要平移到实际坐标上
return (zeroAngleVector * rotateMatrix) + center;
}

有了圆的计算方法,椭圆的也就水到渠成了,因为椭圆相当于圆的拉伸或者收缩。

/// <summary>
/// 获取椭圆上指定角度的点坐标
/// </summary>
/// <param name="center">椭圆两焦点的中点</param>
/// <param name="radiusX">长轴</param>
/// <param name="radiusY">短轴</param>
/// <param name="angle">角度,从0到360度,以正北方向为0度,顺时针旋转角度增加</param>
/// <returns>在椭圆上旋转角度后的坐标</returns>
public static Point GetEllipsePoint(this Point center, double radiusX, double radiusY, double angle)
{
// 半径为X半轴的圆圆心平移到原点后0度所对应的向量
var circleZeroAnglePoint = new Vector(, radiusX); // 旋转角度所对应的矩阵
var rotateMatrix = new Matrix();
rotateMatrix.Rotate( + angle); // 圆旋转角度后的坐标
var circlePoint = circleZeroAnglePoint * rotateMatrix; // 将圆拉伸椭圆后的坐标
var ellpseOrigin = new Point(circlePoint.X, circlePoint.Y * radiusY / radiusX); // 将坐标平移至实际坐标
return (Vector)ellpseOrigin + center;
}

环可由两个椭圆计算出来。较简单,就不多说了。

代码

扇形的定义

namespace PieChartTest
{
using System.Windows.Media; /// <summary>
/// 扇形
/// </summary>
public class SectorPart
{
/// <summary>
/// 构造函数
/// </summary>
/// <param name="spanAngle">跨越角度</param>
/// <param name="fillBrush">填充画刷</param>
public SectorPart(double spanAngle, Brush fillBrush)
{
this.SpanAngle = spanAngle;
this.FillBrush = fillBrush;
} /// <summary>
/// 跨越角度,单位为角度,取值范围为0到360
/// </summary>
public double SpanAngle { get; set; } /// <summary>
/// 填充画刷
/// </summary>
public Brush FillBrush { get; set; }
}
}

环的定义

namespace PieChartTest
{
using System.Windows.Media; /// <summary>
/// 环
/// </summary>
public class RingPart
{
/// <summary>
/// 构造函数,构造里外均为圆的圆环
/// </summary>
/// <param name="radius">里圆半径</param>
/// <param name="spanRadius">里外圆半径差</param>
/// <param name="fillBrush">填充画刷</param>
public RingPart(double radius, double spanRadius, Brush fillBrush)
{
this.RadiusX = radius;
this.RadiusY = radius; this.SpanRadiusX = spanRadius;
this.SpanRadiusY = spanRadius; this.FillBrush = fillBrush;
} /// <summary>
/// 构造函数
/// </summary>
/// <param name="radiusX">里边椭圆的长轴</param>
/// <param name="radiusY">里边椭圆的短轴</param>
/// <param name="spanRadiusX">里外椭圆的长轴差</param>
/// <param name="spanRadiusY">里外椭圆的短轴差</param>
/// <param name="fillBrush">填充画刷</param>
public RingPart(double radiusX, double radiusY, double spanRadiusX, double spanRadiusY, Brush fillBrush)
{
this.RadiusX = radiusX;
this.RadiusY = radiusY; this.SpanRadiusX = spanRadiusX;
this.SpanRadiusY = spanRadiusY; this.FillBrush = fillBrush;
} /// <summary>
/// 长轴
/// </summary>
public double RadiusX { get; set; } /// <summary>
/// 短轴
/// </summary>
public double RadiusY { get; set; } /// <summary>
/// 长轴跨越的距离
/// </summary>
public double SpanRadiusX { get; set; } /// <summary>
/// 短轴跨越的距离
/// </summary>
public double SpanRadiusY { get; set; } /// <summary>
/// 填充画刷
/// </summary>
public Brush FillBrush { get; set; }
}
}

饼图的绘制类

namespace PieChartTest
{
using System.Collections.Generic;
using System.Windows;
using System.Windows.Media;
using System.Windows.Shapes; /// <summary>
/// 饼图的绘制类
/// </summary>
public static class PieChartDrawer
{
/// <summary>
/// 获取饼图的形状列表
/// </summary>
/// <param name="center">圆心</param>
/// <param name="radius">圆的半径</param>
/// <param name="offsetAngle">偏移角度,即第一个扇形开始的角度</param>
/// <param name="sectorParts">扇形列表,扇形列表的SpanAngle之和应为360度</param>
/// <param name="ringParts">环列表</param>
/// <returns>构成饼图的形状列表</returns>
public static IEnumerable<Shape> GetPieChartShapes(Point center, double radius, double offsetAngle, IEnumerable<SectorPart> sectorParts, IEnumerable<RingPart> ringParts)
{
return GetEllipsePieChartShapes(center, radius, radius, offsetAngle, sectorParts, ringParts);
} /// <summary>
/// 获取椭圆形状的饼图的形状列表
/// </summary>
/// <param name="center">椭圆两个焦点的中点</param>
/// <param name="radiusX">椭圆的长轴</param>
/// <param name="radiusY">椭圆的短轴</param>
/// <param name="offsetAngle">偏移角度,即第一个扇形开始的角度</param>
/// <param name="sectorParts">扇形列表,扇形列表的SpanAngle之和应为360度</param>
/// <param name="ringParts">环列表</param>
/// <returns>构成饼图的形状列表</returns>
public static IEnumerable<Shape> GetEllipsePieChartShapes(Point center, double radiusX, double radiusY, double offsetAngle, IEnumerable<SectorPart> sectorParts, IEnumerable<RingPart> ringParts)
{
var shapes = new List<Shape>();
double startAngle = offsetAngle; foreach (var sectorPart in sectorParts)
{
// 扇形顺时针方向在椭圆上的第一个点
var firstPoint = center.GetEllipsePoint(radiusX, radiusY, startAngle); startAngle += sectorPart.SpanAngle; // 扇形顺时针方向在椭圆上的第二个点
var secondPoint = center.GetEllipsePoint(radiusX, radiusY, startAngle); var sectorFigure = new PathFigure { StartPoint = center }; // 添加中点到第一个点的弦
sectorFigure.Segments.Add(new LineSegment(firstPoint, false)); // 添加第一个点和第二个点之间的弧
sectorFigure.Segments.Add(
new ArcSegment(secondPoint, new Size(radiusX, radiusY), , false, SweepDirection.Clockwise, false));
var sectorGeometry = new PathGeometry();
sectorGeometry.Figures.Add(sectorFigure); var sectorPath = new Path { Data = sectorGeometry, Fill = sectorPart.FillBrush }; shapes.Add(sectorPath);
} var ringShapes = GetRingShapes(center, ringParts);
shapes.AddRange(ringShapes); return shapes;
} /// <summary>
/// 获取环的形状列表
/// </summary>
/// <param name="center">中心点,为圆表示圆形,为椭圆表示椭圆两个焦点的中点</param>
/// <param name="ringParts">环列表</param>
/// <returns>环的形状列表</returns>
private static IEnumerable<Shape> GetRingShapes(Point center, IEnumerable<RingPart> ringParts)
{
var shapes = new List<Shape>(); foreach (var ringPart in ringParts)
{
var innerEllipse = new EllipseGeometry(center, ringPart.RadiusX, ringPart.RadiusY);
var outterEllipse = new EllipseGeometry(center, ringPart.RadiusX + ringPart.SpanRadiusX, ringPart.RadiusY + ringPart.SpanRadiusY); // 根据里外椭圆求出圆环的形状
var ringGeometry = new CombinedGeometry(GeometryCombineMode.Xor, innerEllipse, outterEllipse);
var ringPath = new Path
{
Data = ringGeometry,
Fill = ringPart.FillBrush
}; shapes.Add(ringPath);
} return shapes;
}
}
}

WPF实现的简单饼图的更多相关文章

  1. WPF 3D:简单的Point3D和Vector3D动画创造一个旋转的正方体

    原文:WPF 3D:简单的Point3D和Vector3D动画创造一个旋转的正方体 运行结果: 事实上很简单,定义好一个正方体,处理好纹理.关于MeshGeometry3D的正确定义和纹理这里就不多讲 ...

  2. Wpf(Storyboard)动画简单实例

    原文:Wpf(Storyboard)动画简单实例 动画的三种变换方式 RotateTransform:旋转变换变化值:CenterX围绕转的圆心横坐标 CenterY纵坐标 Angle旋转角度(角度正 ...

  3. Prism for WPF 搭建一个简单的模块化开发框架 (一个节点)

    原文:Prism for WPF 搭建一个简单的模块化开发框架 (一个节点) 这里我就只贴图不贴代码了,看看这个节点之前的效果 觉得做的好的地方可以范之前的文章看看 有好的建议也可以说说   填充数据 ...

  4. Prism for WPF 搭建一个简单的模块化开发框架(六)隐藏菜单、导航

    原文:Prism for WPF 搭建一个简单的模块化开发框架(六)隐藏菜单.导航 这个实际上是在聊天之前做的,一起写了,也不分先后了 看一下效果图,上面是模块主导航,左侧是模块内菜单,现在加一下隐藏 ...

  5. Prism for WPF 搭建一个简单的模块化开发框架(四)异步调用WCF服务、WCF消息头添加安全验证Token

    原文:Prism for WPF 搭建一个简单的模块化开发框架(四)异步调用WCF服务.WCF消息头添加安全验证Token 为什么选择wcf?   因为好像wcf和wpf就是哥俩,,, 为什么选择异步 ...

  6. Prism for WPF 搭建一个简单的模块化开发框架(五)添加聊天、消息模块

    原文:Prism for WPF 搭建一个简单的模块化开发框架(五)添加聊天.消息模块 中秋节假期没事继续搞了搞 做了各聊天的模块,需要继续优化 第一步画页面 页面参考https://github.c ...

  7. Prism for WPF 搭建一个简单的模块化开发框架(三) 给TreeView加样式做成菜单

    原文:Prism for WPF 搭建一个简单的模块化开发框架(三) 给TreeView加样式做成菜单 昨天晚上把TreeView的样式做了一下,今天给TreeView绑了数据,实现了切换页面功能 上 ...

  8. Prism for WPF 搭建一个简单的模块化开发框架(二)

    原文:Prism for WPF 搭建一个简单的模块化开发框架(二) 今天又有时间了,再改改,加了一些控件全局的样式 样式代码 <ResourceDictionary xmlns="h ...

  9. Prism for WPF 搭建一个简单的模块化开发框架(一)

    原文:Prism for WPF 搭建一个简单的模块化开发框架(一) 最近闲来无事又想搞搞WPF..... 做个框架吧,可能又是半途而废....总是坚持不下来 不废话了, 先看一下工程结构 布局大概是 ...

随机推荐

  1. PHP中利用Redis管道加快执行

    $redis->muti($mode)->get($key)->set($key)->exec(): 既然是这样的, 也就是说当我要使用管道执行一万次操作的时候需要写一万次操作 ...

  2. java----session

    什么是session? 在WEB开发中,服务器可以为每个用户浏览器创建一个会话对象(session对象),也就是说他是保存在服务端的.注意:一个浏览器独占一个session对象(默认情况下).因此,在 ...

  3. 爬虫3:requests库

      一个简单易用的http库,多用于第一步,爬取网站源码   简单例子 import requests   response = requests.get('https://www.baidu.com ...

  4. 49.RocketMQ 双主搭建(本文非EamonSec原创)

    声明:本文非EamonSec原创,copy自网上下载的某个个文件 1.RocketMQ介绍 1.1. 简介 RocketMQ 是一款分布式.队列模型的消息中间件,具有以下特点: 能够保证严格的消息顺序 ...

  5. 钩子编程(HOOK) 屏蔽全部按键、鼠标及系统功能键 (4)

    摘要:上篇文章<钩子编程(HOOK) 安装系统全局钩子>已经具体的解说了全局钩子的安装.本文将增强一下钩子的功能.实现屏蔽全部按键鼠标与系统功能键.要实现这个功能.须要安装两个全局钩子,& ...

  6. 一个好用的ssh终端:MobaXterm

    WSL由于没有图形界面,所有操作都是在命令行里执行,平时用来编译和跑CFD代码其实还是挺方便.不过有时候要查看WSL里的文件就比较麻烦,这时可以用SFTP这类工具,连接过去后直接操作文件.试过几个这类 ...

  7. ator自动生成mybatis配置和类信息

    generator自动生成mybatis的xml配置.model.map等信息: 1.下载mybatis-generator-core-1.3.2.jar包.        网址:http://cod ...

  8. js数字动画

    项目中需要的数字动画效果,网上找不到需要的效果,所以自己写了一个. 不多说,直接上干货:

  9. Universal-Image-Loader完全解析(下)

    Universal-Image-Loader完全解析(下) 在这篇文章中,我会继续跟大家分享有关于Universal-Image-Loader框架的相关知识,这次主要分享的是框架中图片缓存方面的知识. ...

  10. 不依赖JQuery的入门Ajax代码

    今天看了head first ajax这本书里ajax的实例,讲的很好,这本书觉着很不错,推荐下. Ajax (Asynchronous Javascript and XML)即异步Javascrip ...