C#实现简易灰度图和酷炫HeatMap热力图winform(附DEMO)

简介

本教程将介绍如何使用C#实现简易的灰度图和酷炫的HeatMap热力图，本文不会涉及高级算法和复杂的图形渲染过程，并且提供代码示例和详细说明来帮助读者快速学习和应用。

实现

我们首先需要准备一个WinForm窗体，并安装Microsoft Chart controls和BitmapExtensions nuget包。

简易的灰度图

using System.Drawing;
using System.Windows.Forms.DataVisualization.Charting;
using Accord.Extensions.Imaging;

namespace GrayScaleImageDemo
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            var image = Properties.Resources.sample;
            var grayScaleImage = image.ToGray();
            DrawGraph(chart1, grayScaleImage, Color.Black);
        }

        private void DrawGraph(Chart chart, Color[,] image, Color color)
        {
            chart.Series.Clear();
            chart.Series.Add("Series1");
            chart.Series["Series1"].ChartType = SeriesChartType.Point;
            for (int i = 0; i < image.GetLength(0); i++)
            {
                for (int j = 0; j < image.GetLength(1); j++)
                {
                    if (image[i, j].R == color.R && image[i, j].G == color.G && image[i, j].B == color.B)
                    {
                        chart.Series["Series1"].Points.AddXY(j, i);
                    }
                }
            }
            chart.BackColor = color;
            chart.ChartAreas[0].AxisX.Enabled = AxisEnabled.False;
            chart.ChartAreas[0].AxisY.Enabled = AxisEnabled.False;
        }
    }
}

这段代码展示了如何将一个彩色图转换为灰度图，并使用Chart控件在窗体中绘制出来。可以看到整个过程非常简单，使用Accord.Extensions.Imaging包提供的ToGray()方法即可实现图像的灰度化，然后使用DrawGraph()方法将灰度图上的每个像素绘制出来即可，将黑色背景作为参数传递给DrawGraph()方法，以达到更好的效果。

酷炫的HeatMap热力图

using System.Drawing;
using System.Windows.Forms.DataVisualization.Charting;

namespace HeatMapDemo
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            var palette = new Color[] { Color.Blue, Color.Green, Color.Yellow, Color.Orange, Color.Red };
            var data = new[,] { { 1, 2, 3, 4 }, { 2, 3, 4, 1 }, { 3, 4, 1, 2 }, { 4, 1, 2, 3 } };
            DrawHeatMap(chart1, data, palette);
        }

        private void DrawHeatMap(Chart chart, int[,] data, Color[] palette, int cellSize = 30)
        {
            chart.Series.Clear();
            chart.ChartAreas.Clear();
            chart.ChartAreas.Add("HeatMap");
            int rowIndex = 0;
            int colIndex = 0;
            for (int i = 0; i < data.GetLength(0); i++)
            {
                for (int j = 0; j < data.GetLength(1); j++)
                {
                    chart.Series.Add($"Cell_{i}_{j}");
                    chart.Series[$"Cell_{i}_{j}"].ChartType = SeriesChartType.Point;
                    chart.Series[$"Cell_{i}_{j}"].Points.AddXY(colIndex * cellSize, rowIndex * cellSize);
                    chart.Series[$"Cell_{i}_{j}"].Color = palette[data[i, j]];
                    colIndex++;
                }
                rowIndex++;
                colIndex = 0;
            }
            chart.ChartAreas[0].AxisX.Enabled = AxisEnabled.False;
            chart.ChartAreas[0].AxisY.Enabled = AxisEnabled.False;
            chart.ClientSize = new Size(data.GetLength(1) * cellSize, data.GetLength(0) * cellSize);
            chart.BackColor = Color.White;
        }
    }
}

这段代码展示了如何在窗体中使用Chart控件绘制酷炫的HeatMap热力图。我们需要提供一份数据集，数据集中每个元素都会与一个颜色关联。同时还需要提供一个颜色数组来表示不同颜色与数据集中的元素对应关系。在代码中，我们首先创建一个Chart控件，并设置一个ChartArea，用于绘制表格。然后使用循环结构根据数据集中的元素绘制出对应的图形，最后将窗口大小设置为数据集的大小乘上每个单元格的大小即可。通过改变数据集和颜色数组，我们可以快速地实现不同的HeatMap热力图。

总结

本教程展示了如何使用C#实现简易的灰度图和酷炫的HeatMap热力图，可以通过代码示例和详细说明来帮助读者快速学习和应用。教程中所提及到的BitmapExtensions和Microsoft Chart controls nuget包可以帮助开发者更方便地完成图像处理和绘图任务。