過年結束了，雖然還是學生所以其實還有兩個禮拜的假期，不過為了不讓自己發慌，趁著假期多利用充實自己，所以提早回到開工狀態，而這次總算要把一直說的自己動手繪製猜色直方圖文章寫出。
在很之前[EmguCV|WinForm] 使用EmguCV內建直方圖工具繪製直方圖(Histogram)－直方圖(Histogram)系列 (1) 篇中，可以透過EmguCV內建的HistogramBox與HistogramViewer來幫助我們呈現一張圖像的直方圖資訊
不過有時後，我們仍希望可以直接用顏色來呈現一張圖像的色彩分布，而這篇便是要來實作這部分。
前言
過年結束了，雖然還是學生所以其實還有兩個禮拜的假期，不過為了不讓自己發慌，趁著假期多利用充實自己，所以提早回到開工狀態，而這次總算要把一直說的自己動手繪製猜色直方圖文章寫出。
在很之前[EmguCV|WinForm] 使用EmguCV內建直方圖工具繪製直方圖(Histogram)－直方圖(Histogram)系列 (1) 篇中，可以透過EmguCV內建的HistogramBox與HistogramViewer來幫助我們呈現一張圖像的直方圖資訊
不過有時後，我們仍希望可以直接用顏色來呈現一張圖像的色彩分布，而這篇便是要來實作這部分。
PS:建議先看過[EmguCV|C#]使用EmguCV的DenseHistogram類別計算與紀錄圖像直方圖－直方圖(Histogram)系列(2)
繪製值方圖
1.繪製的呈現結果
這篇文章會教導如何手動繪製完如下值方圖圖像：
上述的圖為hue色相的色彩分佈圖，因為我把Bin值設定為16，所以量化後的顏色區間的變化比較簡單－至於Bin是什麼可以參考先前的文章 [EmguCV|C#]使用EmguCV的DenseHistogram類別計算與紀錄圖像直方圖－直方圖(Histogram)系列(2)
不過由於2維能呈現的資訊比較少，所以在繪製這樣的直方圖圖像時，我是採用HSV色彩空間，因為HSV色彩空間可以把色相分離出來，純看色彩的基本顏色(可見光)，而原先的RGB色彩空間由於顏色是混在一起，所以難以呈現(如下RGB色彩空間示意圖)
另外本篇的繪製會搭配[EmguCV|C#]使用EmguCV的CvInvoke計算值方圖(Histogram)－直方圖(Histogram)系列(3)文章，使用CvInvoke來計算圖像的值方圖資訊到DenseHistogarm，那麼接下來我們來看一下如何繪製吧
2.繪製的方式
我們在做值方圖的繪製時，其實是把計算好的DenseHistogarm資料拿取出來，一一取得各個Bin所計算好的資訊，並把它繪製到一張Image<Bgr,byte>型態的圖像上，所以最後呈現時，其實是在呈現一張圖片。
這邊我們先來看繪製Hue色相的直方圖：
1.初始化參數
這邊我們需要在乎的是max_value ，此變數是用來存放直方圖中所找到的最高累積區塊的數值，例如上述的粉筆圖像的值方圖中，左邊紅色的區塊所累積的顏色是最多，假設他是300，表示在這張圖中，有300個落在這個紅色區塊中的顏色。
而這個數值可以用來做為之後繪製到圖上時，用來計算出個顏色區塊顯示在圖像上的座標位置；h_bins 則是取得我們之前計算時所設定的顏色區間設定區塊。
float max_value = 0.0f;
int[] a1 = new int[100];
int[] b1 = new int[100];
float ax = 0;
int h_bins = histDense.BinDimension[0].Size;
2.取得直方圖的最大與最小累積值的區塊(Bin)
CvInvoke.cvGetMinMaxHistValue(histDense, ref ax, ref max_value, a1, b1);
3.設定一個要把直方圖資料繪製到的圖像的寬高，並初始化
//設定值方圖圖像顯示的寬高
int height = 240;
int width = 800;
IntPtr hist_img = CvInvoke.cvCreateImage(new System.Drawing.Size(width, height), Emgu.CV.CvEnum.IPL_DEPTH.IPL_DEPTH_8U, 3);
CvInvoke.cvZero(hist_img);
4.計算出顯示在圖像上的bin寬度
這是為了讓我們原先所設定的Bin數量可以合理的顯示在一張我們所想要設定的寬度圖像上，例如我們這邊打算顯示到800*240圖像上，因為寬是800，為了可以讓我所設定的50個bins合理的完整顯示，所以要做個計算
int bin_w = width / (h_bins); //h_bin設定為50
5.依序取得值方圖中的每個Bin區塊資料並計算危險是到圖像上的位置與顏色
依序尋訪每一個Bin區塊，並擷取bin的數值（顏色區塊的累積值），並計算如果顯示到240高的圖像上，要顯示的位置以及要顯示的顏色
for (int h = 0; h < h_bins; h++)
{
/** 取得直方圖的統計資料，計算值方圖中的所有顏色中最高統計的數值，作為實際顯示時的圖像高 */
//取得值方圖的數值位置,以便之後存成檔案
double bin_val = CvInvoke.cvQueryHistValue_1D(histDense, h);
//計算取得的bin值要顯示在240高的圖像上時的位置
int intensity = (int)System.Math.Round(bin_val * height / max_value);
/** 取得現在抓取的直方圖的hue顏色，並為了顯示成圖像可觀看，轉換成RGB色彩 */
CvInvoke.cvRectangle(hist_img, new System.Drawing.Point(h * bin_w, height),
new System.Drawing.Point((h + 1) * bin_w, height - intensity),
HueToBgr(h * 180.0d / h_bins), -1, Emgu.CV.CvEnum.LINE_TYPE.EIGHT_CONNECTED, 0);
}
其中，HueToBgr的方法如下：
用來將色相的數值轉換成RGB顏色
/// <summary>
/// hue色相轉換成rgb color
/// </summary>
/// <param name="hue"></param>
/// <returns></returns>
private static MCvScalar HueToBgr(double hue)
{
int[] rgb = new int[3];
int p, sector;
int[,] sector_data = { { 0, 2, 1 }, { 1, 2, 0 }, { 1, 0, 2 }, { 2, 0, 1 }, { 2, 1, 0 }, { 0, 1, 2 } };
hue *= 0.033333333333333333333333333333333f;
sector = (int)Math.Floor(hue);
p = (int)Math.Round(255 * (hue - sector));
//p ^= sector & 1 ? 255 : 0;
if ((sector & 1) == 1) p ^= 255;
else p ^= 0;
rgb[sector_data[sector, 0]] = 255;
rgb[sector_data[sector, 1]] = 0;
rgb[sector_data[sector, 2]] = p;
MCvScalar scalar = new MCvScalar(rgb[2], rgb[1], rgb[0], 0);
return scalar;
}
6.把得到的值方圖圖像轉換為EmguCV使用的image<Bgr,Byte>型態
原先我們在計算時所用的存放型態是Intptr，可以參考[EmguCV|OpenCV|C#] 轉換支援存取OpenCV Iplmage的IntPtr型態為EmguCV儲存圖像的型態所寫的內容
以下是其中一種方式：
Image<Bgr, Byte> hist_emgu_img = new Image<Bgr, Byte>(new System.Drawing.Size(width, height));
CvInvoke.cvCopy(hist_img, hist_emgu_img.Ptr, IntPtr.Zero);
return hist_emgu_img;
3.繪製HS直方圖的方法
這邊我們來快速帶一下如何繪製HS直方圖，至於為什麼會需要用到S(飽和度)呢？
有可能我們會希望透過飽和度增加可以分析有亮度時，影像的辨識穩定度，不過如果分太細，因為細緻度增加過頭了，反而只會讓辨識下降。
1.初始化參數
這邊多了s_bin，因為我們也會需要看到飽和度的變化
float max_value = 0.0f;
int[] a1 = new int[100];
int[] b1 = new int[100];
float ax = 0;
int h_bins = histDense.BinDimension[0].Size;
int s_bins = histDense.BinDimension[1].Size;
2.取得直方圖的最大與最小累積值的區塊(Bin)
CvInvoke.cvGetMinMaxHistValue(histDense, ref ax, ref max_value, a1, b1);
3.設定一個要把直方圖資料繪製到的圖像的寬高，並初始化
因為除了顯示色相的Bin之外，我們還需要顯示飽和度，所以可能原先的寬會超過，如果超過在而外計算一個剛好的寬做為顯示的影像大小
//設定值方圖圖像顯示的寬高
int height = 300;
int width;
//如果設定的bins超過視窗設定的顯示範圍,另外給予可以符合用額外的彈出視窗顯示的值,因為要同時看到h與s的bin值，顯示的圖像寬可能會太寬
if (h_bins * s_bins > 800)
{
width = h_bins * s_bins * 2;
}
else
{
width = 800;
}
IntPtr hist_img = CvInvoke.cvCreateImage(new System.Drawing.Size(width, height), Emgu.CV.CvEnum.IPL_DEPTH.IPL_DEPTH_8U, 3);
CvInvoke.cvZero(hist_img);
4.初始化用來存放把色相值方圖的資料，轉換成要顯示出來的RGB數值空間
因為我們原先的直方圖是Hsv空間，但是當我們要繪製到圖像來看時，因為所記錄的RGB空間(Image<Bgr,byte>型態)，為了能夠做正確的顯示，所以我們之後需要做一個色彩空間轉換
//用來存放從Hsv轉回RGB圖像時用的空間
IntPtr hsv_color = CvInvoke.cvCreateImage(new System.Drawing.Size(1, 1), Emgu.CV.CvEnum.IPL_DEPTH.IPL_DEPTH_8U, 3);
IntPtr rgb_color = CvInvoke.cvCreateImage(new System.Drawing.Size(1, 1), Emgu.CV.CvEnum.IPL_DEPTH.IPL_DEPTH_8U, 3);
5.計算出顯示在圖像上的bin寬度
int bin_w = width / (h_bins * s_bins);
6.依序取得值方圖中的每個Bin區塊資料並計算危險是到圖像上的位置與顏色
for (int h = 0; h < h_bins; h++)
{
for (int s = 0; s < s_bins; s++)
{
int i = h * s_bins + s;
/** 取得直方圖的統計資料，計算值方圖中的所有顏色中最高統計的數值，作為實際顯示時的圖像高 */
//取得值方圖的數值位置,以便之後存成檔案
double bin_val = CvInvoke.cvQueryHistValue_2D(histDense, h, s);
int intensity = (int)System.Math.Round(bin_val * height / max_value);
/** 取得現在抓取的直方圖的hue顏色，並為了顯示成圖像可觀看，轉換成RGB色彩 */
CvInvoke.cvSet2D(hsv_color, 0, 0, new Emgu.CV.Structure.MCvScalar(h * 180.0f / h_bins, s * 255.0f / s_bins, 255, 0)); //這邊用來計算色相與飽和度的統計資料轉換到圖像上 hsv_color的數值
CvInvoke.cvCvtColor(hsv_color, rgb_color, COLOR_CONVERSION.CV_HSV2BGR); //在把hsv顏色空間轉換為RGB
Emgu.CV.Structure.MCvScalar color = CvInvoke.cvGet2D(rgb_color, 0, 0);
CvInvoke.cvRectangle(hist_img, new System.Drawing.Point(i * bin_w, height), new System.Drawing.Point((i + 1) * bin_w, height - intensity), color, -1, Emgu.CV.CvEnum.LINE_TYPE.EIGHT_CONNECTED, 0);
}
}
7.把得到的值方圖圖像轉換為EmguCV使用的image<Bgr,Byte>型態
原先我們在計算時所用的存放型態是Intptr，可以參考[EmguCV|OpenCV|C#] 轉換支援存取OpenCV Iplmage的IntPtr型態為EmguCV儲存圖像的型態所寫的內容
以下是其中一種方式：
Image<Bgr, Byte> hist_emgu_img = new Image<Bgr, Byte>(new System.Drawing.Size(width, height));
CvInvoke.cvCopy(hist_img, hist_emgu_img.Ptr, IntPtr.Zero);
return hist_emgu_img;
顯示結果
心得
希望這篇可以幫助想要呈現色彩的人一個幫助=)
也是給自己一個紀錄
程式碼範例檔在這
參考資料：
顏色直方圖的計算、顯示、處理、對比及反向投影(How to Use Histogram? Calculate, Show, Process, Compare and BackProject)
文章中的敘述如有觀念不正確錯誤的部分，歡迎告知指正 謝謝 =)
另外要轉載請附上出處 感謝