WPF实现的简单饼图
简介
前段时间帮一个同事的忙,利用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实现的简单饼图的更多相关文章
- WPF 3D:简单的Point3D和Vector3D动画创造一个旋转的正方体
原文:WPF 3D:简单的Point3D和Vector3D动画创造一个旋转的正方体 运行结果: 事实上很简单,定义好一个正方体,处理好纹理.关于MeshGeometry3D的正确定义和纹理这里就不多讲 ...
- Wpf(Storyboard)动画简单实例
原文:Wpf(Storyboard)动画简单实例 动画的三种变换方式 RotateTransform:旋转变换变化值:CenterX围绕转的圆心横坐标 CenterY纵坐标 Angle旋转角度(角度正 ...
- Prism for WPF 搭建一个简单的模块化开发框架 (一个节点)
原文:Prism for WPF 搭建一个简单的模块化开发框架 (一个节点) 这里我就只贴图不贴代码了,看看这个节点之前的效果 觉得做的好的地方可以范之前的文章看看 有好的建议也可以说说 填充数据 ...
- Prism for WPF 搭建一个简单的模块化开发框架(六)隐藏菜单、导航
原文:Prism for WPF 搭建一个简单的模块化开发框架(六)隐藏菜单.导航 这个实际上是在聊天之前做的,一起写了,也不分先后了 看一下效果图,上面是模块主导航,左侧是模块内菜单,现在加一下隐藏 ...
- Prism for WPF 搭建一个简单的模块化开发框架(四)异步调用WCF服务、WCF消息头添加安全验证Token
原文:Prism for WPF 搭建一个简单的模块化开发框架(四)异步调用WCF服务.WCF消息头添加安全验证Token 为什么选择wcf? 因为好像wcf和wpf就是哥俩,,, 为什么选择异步 ...
- Prism for WPF 搭建一个简单的模块化开发框架(五)添加聊天、消息模块
原文:Prism for WPF 搭建一个简单的模块化开发框架(五)添加聊天.消息模块 中秋节假期没事继续搞了搞 做了各聊天的模块,需要继续优化 第一步画页面 页面参考https://github.c ...
- Prism for WPF 搭建一个简单的模块化开发框架(三) 给TreeView加样式做成菜单
原文:Prism for WPF 搭建一个简单的模块化开发框架(三) 给TreeView加样式做成菜单 昨天晚上把TreeView的样式做了一下,今天给TreeView绑了数据,实现了切换页面功能 上 ...
- Prism for WPF 搭建一个简单的模块化开发框架(二)
原文:Prism for WPF 搭建一个简单的模块化开发框架(二) 今天又有时间了,再改改,加了一些控件全局的样式 样式代码 <ResourceDictionary xmlns="h ...
- Prism for WPF 搭建一个简单的模块化开发框架(一)
原文:Prism for WPF 搭建一个简单的模块化开发框架(一) 最近闲来无事又想搞搞WPF..... 做个框架吧,可能又是半途而废....总是坚持不下来 不废话了, 先看一下工程结构 布局大概是 ...
随机推荐
- logstash-out-mongodb实现elasticsearch到Mongodb的数据同步
本文主要实现将Elasticsearch中的索引数据Index同步到Mongodb中的集合collection中. 0.前提 1)已经安装好源数据库:elasticsearch V2.X; 2)已经安 ...
- 继承Runnable 实现Synchronized 同步锁
在java编程中,经常需要用到同步,而用得最多的也许是synchronized关键字了,下面看看这个关键字的用法. 因为synchronized关键字涉及到锁的概念,所以先来了解一些相关的锁知识. j ...
- 性能测试 vs 负载测试 vs 压力测试
在做一些软件测试工作时,常常会被提及性能测试.负载测试.压力测试,这也是在软件测试方面最容易混淆的三个概念.之前和一个测试大牛聊天,他和我说常常面试一些测试人员会问一些这样的问题,大多人认为负载测试等 ...
- PXE+Kickstart 批量安装CentOS 7
安装之前 将需要安装 CentOS 的服务器与 PXE 服务器通过网络设备连接:PXE 服务器安装 CentOS,并且关闭firewalld.selinux,设置静态IP地址,本例设为10.0.0.1 ...
- hiho#1457 重复旋律7 求子串和 后缀自动机
题目传送门 题意: 给出若干个串,求所有子串的和,子串和的定义为十进制数,取模1e9+7. 思路: 对于一个串来说,一个状态p就代表着$right$相同的集合,假设我们已经知道了状态p的$sum$,以 ...
- 100道C#面试题(.net开发人员必备)
1. .NET和C#有什么区别 答:.NET一般指 .NET FrameWork框架,它是一种平台,一种技术. C#是一种编程语言,可以基于.NET平台的应用. 2.一列数的规则如下: 1.1.2.3 ...
- python的面向对象和类
目录 一.基本知识点 1.面向过程编程 2.面向对象编程 3.注意 二.类的结构 1.类的理解 2.代码形式 3.类和函数的一些区别 4.类中的数据 5.类中的方法(基础) 三.类的实例化 四.类的继 ...
- maevn HelloWorld 基本命令
总结: Mvn clean compile:编译主代码 Mvn clean test:执行测试代码 Mvn clean package:打包 Mvn clean install: 安装到本地仓库 执行 ...
- reifiable type与raw type
下面的逻辑需要明白如下两个概念: 4.7. Reifiable Types 4.8. Raw Types 举几个是Reifiable Types的例子,如下: class A{} class B< ...
- linux mint 19安装最新社区版docker
sudo apt-get update sudo apt-get install \ apt-transport-https \ ca-certificates \ curl \ software-p ...