WPF實現的簡單餅圖
阿新 • • 發佈：2019-01-04
原文:
WPF實現的簡單餅圖
簡介
前段時間幫一個同事的忙，利用WPF實現的一個簡單餅圖，僅能看餅圖的比例，無文字檢視功能。效果圖如下：
用法：
var sectorParts = new List<SectorPart>(); sectorParts.Add(new SectorPart(90, Brushes.Red)); sectorParts.Add(new SectorPart(30, Brushes.Green)); sectorParts.Add(new SectorPart(120, Brushes.GreenYellow)); sectorParts.Add(new SectorPart(70, Brushes.HotPink)); sectorParts.Add(new SectorPart(50, Brushes.Yellow)); var ringParts = new List<RingPart>(); ringParts.Add(new RingPart(40, 20, 40, 20, Brushes.White)); varshapes = PieChartDrawer.GetEllipsePieChartShapes(midPoint, 180, 90, 30, 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(0, radius); // 旋轉角度所對應的矩陣 var rotateMatrix = new Matrix(); rotateMatrix.Rotate(180 + 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(0, radiusX); // 旋轉角度所對應的矩陣 var rotateMatrix = new Matrix(); rotateMatrix.Rotate(180 + 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), 0, 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; } } }