C# WinForm編寫一個六邊形菜單

更新時間：2023年09月14日 14:36:18 作者：開發(fā)者精選資訊

這篇文章主要為大家詳細介紹了如何利用C# WinForm編寫一個六邊形菜單,文中的示例代碼講解詳細,具有一定的學(xué)習(xí)價值,有興趣的可以參考下

背景

閑來無事逛群聊，看到一網(wǎng)友發(fā)來這么一個需求：

純色圖下面是一張六邊形布局的背景圖層，具體圖片背景內(nèi)容不便透露，所以這里采用色塊形式模擬，ZF類的項目都喜歡這種給人新奇的東西，這每一個色塊，都是一個可以點擊進入的菜單。

分析

乍一看這圖，就是三個正六邊形嵌套。所以就根據(jù)公式 2 * Math.PI / 6計算出每個6邊形每個頂點偏移角度，再根據(jù)公式計算出每個頂點的坐標(biāo)位置。算法如下：

private?static?Point[]?CalculateHexagonVertices(int?sideLength,?int?offset?=?0)
{
????Point[]?vertices?=?new?Point[6];
????double?angle?=?2?*?Math.PI?/?6;
????for?(int?i?=?0;?i?<?6;?i++)
????{
????????int?x?=?offset?+?(int)(sideLength?*?Math.Cos(i?*?angle));
????????int?y?=?offset?+?(int)(sideLength?*?Math.Sin(i?*?angle));
????????vertices[i]?=?new?Point(x,?y);
????}
????return?vertices;
}

首先根據(jù) sideLength 邊長，計算出最外層正六邊形6個頂點的位置。注意這個時候因為頂點是從 (0,0) 計算的，所以這里要加入 offset 設(shè)置頂點位置，讓每一頂點平移指定的像素。再計算中間那個小正六邊形（包括藍色間隙）的頂點位置。最后再計算最中間不包括間隙的紫色小正六邊形頂點位置。這時候有人可能要問中間那些色塊的位置怎么確定，這是個好問題，仔細看就知道了，這每一塊都是一個等腰梯形，而且每個等腰梯形，都可以根據(jù)最外層的大正六邊形和中間那個小正六邊形（包括藍色間隙）頂點位置計算出來。

實現(xiàn)

先定義一個梯形類：

internal?sealed?class?Trapezoid
{
????public?Point?TopLeft?{?get;?set;?}
????public?Point?TopRight?{?get;?set;?}
????public?Point?BottomLeft?{?get;?set;?}
????public?Point?BottomRight?{?get;?set;?}
????public?Point[]?Points
????{
????????get
????????{
????????????return?new?Point[]?{?TopLeft,?TopRight,?BottomRight,?BottomLeft?};
????????}
????}
????public?Trapezoid(Point?topLeft,?Point?topRight,?Point?bottomLeft,?Point?bottomRight)
????{
????????TopLeft?=?topLeft;
????????TopRight?=?topRight;
????????BottomLeft?=?bottomLeft;
????????BottomRight?=?bottomRight;
????}
}

然后通過外層的兩個正六邊形頂點位置計算梯形位置，演示代碼如下：

private?static?Trapezoid[]?CalculateTrapezoids(Point[]?hexagonVertices,?Point[]?smallHexagonVertices)
{
????Trapezoid[]?trapezoids?=?new?Trapezoid[6];
????for?(int?i?=?0;?i?<?6;?i++)
????{
????????Point?topLeft?=?hexagonVertices[i];
????????Point?topRight?=?hexagonVertices[(i?+?1)?%?6];
????????Point?bottomLeft?=?smallHexagonVertices[i];
????????Point?bottomRight?=?smallHexagonVertices[(i?+?1)?%?6];
????????trapezoids[i]?=?new?Trapezoid(topLeft,?topRight,?bottomLeft,?bottomRight);
????}
????return?trapezoids;
}

我寫了一個繼承自 PictureBox 的控件類，重寫了 OnPaint 方法，實現(xiàn)了以上色塊的展示。演示代碼如下：

protected?override?void?OnPaint(PaintEventArgs?e)
{
????base.OnPaint(e);
????var?g?=?e.Graphics;
????//centerHexagon?是中間最小的不包括間隙的紫色的六邊形頂點位置
????g.FillPolygon(new?SolidBrush(Color.FromArgb(180,?Color.Red)),?centerHexagon);
????for?(int?i?=?0;?i?<?trapezoids.Length;?i++)
????{
????????//trapezoids?是6個梯形位置
????????var?trapezoid?=?trapezoids[i];
????????g.FillPolygon(new?SolidBrush(Color.FromArgb(10?*?(i?+?1),?Color.Yellow)),?trapezoid.Points);
????}
}

需要實現(xiàn)鼠標(biāo)點擊事件，我們需要定義一個事件，記錄鼠標(biāo)當(dāng)前位置，然后在 OnMouseClick 方法中檢測鼠標(biāo)位置是否在某個梯形或者最中間位置，然后觸發(fā)事件。演示代碼如下：

//0-6?每個梯形位置，-1?中間位置
//??????????4?
//?????3?????????5
//?????????-1
//?????2?????????0
//??????????1
///?<summary>
///?菜單點擊事件處理
///?</summary>
public?event?Action<object,?int>?OnMenuClicked;
///?<summary>
///?鼠標(biāo)當(dāng)前位置
///?</summary>
private?Point??mouseHoverLocation?=?null;
///?<summary>
///?鼠標(biāo)滑過的時候，重繪界面，然后設(shè)置鼠標(biāo)位置
///?</summary>
///?<param?name="e"></param>
protected?override?void?OnMouseMove(MouseEventArgs?e)
{
????base.OnMouseMove(e);
????mouseHoverLocation?=?e.Location;
????Invalidate();
}
///?<summary>
///?鼠標(biāo)移除
///?</summary>
///?<param?name="e"></param>
protected?override?void?OnMouseLeave(EventArgs?e)
{
????base.OnMouseLeave(e);
????mouseHoverLocation?=?null;
}
///?<summary>
///?菜單點擊事件
///?</summary>
///?<param?name="e"></param>
protected?override?void?OnMouseClick(MouseEventArgs?e)
{
????var?mouseLocation?=?e.Location;
????//檢測鼠標(biāo)是否在中間的六邊形中：
????if?(IsPointInPolygon(mouseLocation,?centerHexagon))
????{
????????OnMenuClicked?.Invoke(this,?-1);
????????return;
????}
????//檢測是否在某個梯形內(nèi)部
????for?(int?i?=?0;?i?<?trapezoids.Length;?i++)
????{
????????var?trapezoid?=?trapezoids[i];
????????if?(IsPointInTrapezoid(mouseLocation,?trapezoid))
????????{
????????????OnMenuClicked?.Invoke(this,?i);
????????????return;
????????}
????}
}

里面有一個 IsPointInPolygon 方法，用于檢測某一點是否在某個多邊形內(nèi)，這里的算法抄襲了某N上的代碼，如下：

///?<summary>
///?判斷點是否在多邊形內(nèi).
///?來源：https://blog.csdn.net/xxdddail/article/details/49093635
///?----------原理----------
///?注意到如果從P作水平向左的射線的話，如果P在多邊形內(nèi)部，那么這條射線與多邊形的交點必為奇數(shù)，
///?如果P在多邊形外部，則交點個數(shù)必為偶數(shù)(0也在內(nèi))。
///?</summary>
///?<param?name="checkPoint">要判斷的點</param>
///?<param?name="polygonPoints">多邊形的頂點</param>
///?<returns></returns>
private?static?bool?IsPointInPolygon(Point?checkPoint,?Point[]?polygonPoints)
{
????bool?inside?=?false;
????int?pointCount?=?polygonPoints.Length;
????Point?p1,?p2;
????for?(int?i?=?0,?j?=?pointCount?-?1;?i?<?pointCount;?j?=?i,?i++)//第一個點和最后一個點作為第一條線，之后是第一個點和第二個點作為第二條線，之后是第二個點與第三個點，第三個點與第四個點...
????{
????????p1?=?polygonPoints[i];
????????p2?=?polygonPoints[j];
????????if?(checkPoint.Y?<?p2.Y)
????????{//p2在射線之上
????????????if?(p1.Y?<=?checkPoint.Y)
????????????{//p1正好在射線中或者射線下方
????????????????if?((checkPoint.Y?-?p1.Y)?*?(p2.X?-?p1.X)?>?(checkPoint.X?-?p1.X)?*?(p2.Y?-?p1.Y))//斜率判斷,在P1和P2之間且在P1P2右側(cè)
????????????????{
????????????????????//射線與多邊形交點為奇數(shù)時則在多邊形之內(nèi)，若為偶數(shù)個交點時則在多邊形之外。
????????????????????//由于inside初始值為false，即交點數(shù)為零。所以當(dāng)有第一個交點時，則必為奇數(shù)，則在內(nèi)部，此時為inside=(!inside)
????????????????????//所以當(dāng)有第二個交點時，則必為偶數(shù)，則在外部，此時為inside=(!inside)
????????????????????inside?=?(!inside);
????????????????}
????????????}
????????}
????????else?if?(checkPoint.Y?<?p1.Y)
????????{
????????????//p2正好在射線中或者在射線下方，p1在射線上
????????????if?((checkPoint.Y?-?p1.Y)?*?(p2.X?-?p1.X)?<?(checkPoint.X?-?p1.X)?*?(p2.Y?-?p1.Y))//斜率判斷,在P1和P2之間且在P1P2右側(cè)
????????????{
????????????????inside?=?(!inside);
????????????}
????????}
????}
????return?inside;
}

大致就是這樣，再就是縮放窗體時自動計算位置的細節(jié)處理，這里先貼一下全部代碼：

using?System;
using?System.Drawing;
using?System.Windows.Forms;
namespace?HexagonButton
{
????public?partial?class?HButton?:?PictureBox
????{
????????//0-6?每個梯形位置，-1?中間位置
????????//??????????4?
????????//?????3?????????5
????????//?????????-1
????????//?????2?????????0
????????//??????????1
????????///?<summary>
????????///?菜單點擊事件處理
????????///?</summary>
????????public?event?Action<object,?int>?OnMenuClicked;
????????///?<summary>
????????///?每個梯形位置
????????///?</summary>
????????private?Trapezoid[]?trapezoids?=?new?Trapezoid[6];
????????///?<summary>
????????///?中間的小正六邊形位置
????????///?</summary>
????????private?Point[]?centerHexagon?=?new?Point[6];
????????///?<summary>
????????///?鼠標(biāo)當(dāng)前位置
????????///?</summary>
????????private?Point??mouseHoverLocation?=?null;
????????///?<summary>
????????///?鼠標(biāo)滑過時的層背景
????????///?</summary>
????????private?SolidBrush?mouseHoverLayerBrush?=?new?SolidBrush(Color.FromArgb(50,?Color.White));
????????public?HButton()
????????{
????????????InitializeComponent();
????????????DoubleBuffered?=?true;
????????}
????????///?<summary>
????????///?縮放窗體時（調(diào)用），自動修正位置
????????///?</summary>
????????///?<param?name="formWidth"></param>
????????///?<param?name="formHeight"></param>
????????public?void?ResetSizeByForm(int?formWidth,?int?formHeight)
????????{
????????????var?hHeight?=?(int)(formHeight?*?0.8);
????????????var?hWidth?=?hHeight;
????????????var?hLeft?=?(formWidth?-?hWidth)?/?2;
????????????var?hTop?=?(formHeight?-?hHeight)?/?2;
????????????this.Location?=?new?Point(hLeft,?hTop);
????????????this.Width?=?hWidth;
????????????this.Height?=?hHeight;
????????}
????????private?void?InitHexagonMenus()
????????{
????????????this.BackColor?=?Color.Transparent;
????????????//this.Image?=?Properties.Resources.button_bg;
????????????this.SizeMode?=?PictureBoxSizeMode.Zoom;
????????????this.Cursor?=?Cursors.Hand;
????????????//計算圖片縮放級別
????????????//var?scale?=?Properties.Resources.button_bg.Width?/?this.Width;
????????????//計算原始圖片高度和寬度之差，因為該背景非正六邊形，所以計算一下寬度和高度之差，用以計算正確得位置
????????????//var?diffOfImageSize?=?(Properties.Resources.button_bg.Width?-?Properties.Resources.button_bg.Height)?/?scale;
????????????var?diffOfImageSize?=?0;
????????????var?sideWidth?=?(this.Width?-?diffOfImageSize)?/?2;
????????????var?offset?=?this.Width?/?2;
????????????//計算最外層大六邊形頂點位置
????????????var?big?=?CalculateHexagonVertices((this.Width?+?diffOfImageSize?/?2)?/?2,?offset);
????????????//計算內(nèi)部小六邊形頂點位置
????????????var?small?=?CalculateHexagonVertices(sideWidth?/?2,?offset);
????????????//計算兩個六邊形相交之后，形成得六邊形環(huán)，分割為6個等腰梯形，用以檢測點擊事件
????????????trapezoids?=?CalculateTrapezoids(big,?small);
????????????//計算內(nèi)部小的正六邊形，用以檢測點擊事件
????????????centerHexagon?=?CalculateHexagonVertices(sideWidth?/?2?-?20,?offset);
????????}
????????///?<summary>
????????///?鼠標(biāo)滑過的時候，重繪界面，然后設(shè)置鼠標(biāo)位置
????????///?</summary>
????????///?<param?name="e"></param>
????????protected?override?void?OnMouseMove(MouseEventArgs?e)
????????{
????????????base.OnMouseMove(e);
????????????mouseHoverLocation?=?e.Location;
????????????Invalidate();
????????}
????????///?<summary>
????????///?鼠標(biāo)移除
????????///?</summary>
????????///?<param?name="e"></param>
????????protected?override?void?OnMouseLeave(EventArgs?e)
????????{
????????????base.OnMouseLeave(e);
????????????mouseHoverLocation?=?null;
????????}
????????///?<summary>
????????///?菜單點擊事件
????????///?</summary>
????????///?<param?name="e"></param>
????????protected?override?void?OnMouseClick(MouseEventArgs?e)
????????{
????????????var?mouseLocation?=?e.Location;
????????????//檢測鼠標(biāo)是否在中間的六邊形中：
????????????if?(IsPointInPolygon(mouseLocation,?centerHexagon))
????????????{
????????????????OnMenuClicked?.Invoke(this,?-1);
????????????????return;
????????????}
????????????//檢測是否在某個梯形內(nèi)部
????????????for?(int?i?=?0;?i?<?trapezoids.Length;?i++)
????????????{
????????????????var?trapezoid?=?trapezoids[i];
????????????????if?(IsPointInTrapezoid(mouseLocation,?trapezoid))
????????????????{
????????????????????OnMenuClicked?.Invoke(this,?i);
????????????????????return;
????????????????}
????????????}
????????}
????????protected?override?void?OnPaint(PaintEventArgs?e)
????????{
????????????base.OnPaint(e);
????????????var?g?=?e.Graphics;
#if?DEBUG
????????????//以下的代碼可以直接刪除，這里是作為標(biāo)識多邊形位置
????????????g.FillPolygon(new?SolidBrush(Color.FromArgb(180,?Color.Red)),?centerHexagon);
????????????for?(int?i?=?0;?i?<?trapezoids.Length;?i++)
????????????{
????????????????var?trapezoid?=?trapezoids[i];
????????????????g.FillPolygon(new?SolidBrush(Color.FromArgb(10?*?(i?+?1),?Color.Yellow)),?trapezoid.Points);
????????????}
#endif
????????????if?(mouseHoverLocation?==?null)
????????????{
????????????????return;
????????????}
????????????//檢測鼠標(biāo)是否在中間的六邊形中：
????????????if?(IsPointInPolygon(mouseHoverLocation.Value,?centerHexagon))
????????????{
????????????????g.FillPolygon(mouseHoverLayerBrush,?centerHexagon);
????????????????return;
????????????}
????????????//檢測是否在某個梯形內(nèi)部
????????????for?(int?i?=?0;?i?<?trapezoids.Length;?i++)
????????????{
????????????????var?trapezoid?=?trapezoids[i];
????????????????if?(IsPointInTrapezoid(mouseHoverLocation.Value,?trapezoid))
????????????????{
????????????????????g.FillPolygon(mouseHoverLayerBrush,?trapezoid.Points);
????????????????????return;
????????????????}
????????????}
????????}
????????///?<summary>
????????///?計算正六邊形的頂點坐標(biāo)
????????///?</summary>
????????///?<param?name="sideLength"></param>
????????///?<param?name="offset"></param>
????????///?<returns></returns>
????????private?static?Point[]?CalculateHexagonVertices(int?sideLength,?int?offset?=?0)
????????{
????????????Point[]?vertices?=?new?Point[6];
????????????double?angle?=?2?*?Math.PI?/?6;
????????????for?(int?i?=?0;?i?<?6;?i++)
????????????{
????????????????int?x?=?offset?+?(int)(sideLength?*?Math.Cos(i?*?angle));
????????????????int?y?=?offset?+?(int)(sideLength?*?Math.Sin(i?*?angle));
????????????????vertices[i]?=?new?Point(x,?y);
????????????}
????????????return?vertices;
????????}
????????///?<summary>
????????///?計算每個梯形的坐標(biāo)
????????///?</summary>
????????///?<param?name="hexagonVertices"></param>
????????///?<param?name="smallHexagonVertices"></param>
????????///?<returns></returns>
????????private?static?Trapezoid[]?CalculateTrapezoids(Point[]?hexagonVertices,?Point[]?smallHexagonVertices)
????????{
????????????Trapezoid[]?trapezoids?=?new?Trapezoid[6];
????????????for?(int?i?=?0;?i?<?6;?i++)
????????????{
????????????????Point?topLeft?=?hexagonVertices[i];
????????????????Point?topRight?=?hexagonVertices[(i?+?1)?%?6];
????????????????Point?bottomLeft?=?smallHexagonVertices[i];
????????????????Point?bottomRight?=?smallHexagonVertices[(i?+?1)?%?6];
????????????????trapezoids[i]?=?new?Trapezoid(topLeft,?topRight,?bottomLeft,?bottomRight)
????????????????{
????????????????????Index?=?i
????????????????};
????????????}
????????????return?trapezoids;
????????}
????????///?<summary>
????????///?判斷點是否在梯形內(nèi)
????????///?</summary>
????????///?<param?name="checkPoint"></param>
????????///?<param?name="trapezoid"></param>
????????///?<returns></returns>
????????private?static?bool?IsPointInTrapezoid(Point?checkPoint,?Trapezoid?trapezoid)
????????{
????????????return?IsPointInPolygon(checkPoint,?trapezoid.Points);
????????}
????????///?<summary>
????????///?判斷點是否在多邊形內(nèi).
????????///?來源：https://blog.csdn.net/xxdddail/article/details/49093635
????????///?----------原理----------
????????///?注意到如果從P作水平向左的射線的話，如果P在多邊形內(nèi)部，那么這條射線與多邊形的交點必為奇數(shù)，
????????///?如果P在多邊形外部，則交點個數(shù)必為偶數(shù)(0也在內(nèi))。
????????///?</summary>
????????///?<param?name="checkPoint">要判斷的點</param>
????????///?<param?name="polygonPoints">多邊形的頂點</param>
????????///?<returns></returns>
????????private?static?bool?IsPointInPolygon(Point?checkPoint,?Point[]?polygonPoints)
????????{
????????????bool?inside?=?false;
????????????int?pointCount?=?polygonPoints.Length;
????????????Point?p1,?p2;
????????????for?(int?i?=?0,?j?=?pointCount?-?1;?i?<?pointCount;?j?=?i,?i++)//第一個點和最后一個點作為第一條線，之后是第一個點和第二個點作為第二條線，之后是第二個點與第三個點，第三個點與第四個點...
????????????{
????????????????p1?=?polygonPoints[i];
????????????????p2?=?polygonPoints[j];
????????????????if?(checkPoint.Y?<?p2.Y)
????????????????{//p2在射線之上
????????????????????if?(p1.Y?<=?checkPoint.Y)
????????????????????{//p1正好在射線中或者射線下方
????????????????????????if?((checkPoint.Y?-?p1.Y)?*?(p2.X?-?p1.X)?>?(checkPoint.X?-?p1.X)?*?(p2.Y?-?p1.Y))//斜率判斷,在P1和P2之間且在P1P2右側(cè)
????????????????????????{
????????????????????????????//射線與多邊形交點為奇數(shù)時則在多邊形之內(nèi)，若為偶數(shù)個交點時則在多邊形之外。
????????????????????????????//由于inside初始值為false，即交點數(shù)為零。所以當(dāng)有第一個交點時，則必為奇數(shù)，則在內(nèi)部，此時為inside=(!inside)
????????????????????????????//所以當(dāng)有第二個交點時，則必為偶數(shù)，則在外部，此時為inside=(!inside)
????????????????????????????inside?=?(!inside);
????????????????????????}
????????????????????}
????????????????}
????????????????else?if?(checkPoint.Y?<?p1.Y)
????????????????{
????????????????????//p2正好在射線中或者在射線下方，p1在射線上
????????????????????if?((checkPoint.Y?-?p1.Y)?*?(p2.X?-?p1.X)?<?(checkPoint.X?-?p1.X)?*?(p2.Y?-?p1.Y))//斜率判斷,在P1和P2之間且在P1P2右側(cè)
????????????????????{
????????????????????????inside?=?(!inside);
????????????????????}
????????????????}
????????????}
????????????return?inside;
????????}
????????///?<summary>
????????///?當(dāng)窗體改變時，自動計算大小
????????///?</summary>
????????///?<param?name="e"></param>
????????protected?override?void?OnClientSizeChanged(EventArgs?e)
????????{
????????????base.OnClientSizeChanged(e);
????????????InitHexagonMenus();
????????}
????}
????///?<summary>
????///?梯形類
????///?</summary>
????internal?sealed?class?Trapezoid
????{
????????public?int?Index?{?get;?set;?}
????????public?Point?TopLeft?{?get;?set;?}
????????public?Point?TopRight?{?get;?set;?}
????????public?Point?BottomLeft?{?get;?set;?}
????????public?Point?BottomRight?{?get;?set;?}
????????public?Point[]?Points
????????{
????????????get
????????????{
????????????????return?new?Point[]?{?TopLeft,?TopRight,?BottomRight,?BottomLeft?};
????????????}
????????}
????????public?Trapezoid(Point?topLeft,?Point?topRight,?Point?bottomLeft,?Point?bottomRight)
????????{
????????????TopLeft?=?topLeft;
????????????TopRight?=?topRight;
????????????BottomLeft?=?bottomLeft;
????????????BottomRight?=?bottomRight;
????????}
????????public?override?string?ToString()
????????{
????????????return?$"Trapezoid?{{?Index={Index},?TopLeft={TopLeft},?TopRight={TopRight},?BottomLeft={BottomLeft},?BottomRight={BottomRight}?}}";
????????}
????}
}

窗體代碼：

using?System;
using?System.Collections.Generic;
using?System.ComponentModel;
using?System.Data;
using?System.Drawing;
using?System.Linq;
using?System.Text;
using?System.Windows.Forms;
namespace?HexagonButton
{
????public?partial?class?Form1?:?Form
????{
????????private?HButton?HButton;
????????public?Form1()
????????{
????????????InitializeComponent();
????????????this.WindowState?=?FormWindowState.Maximized;
????????????//這個窗體里面把那個純色的背景圖放進去
????????????this.BackColor?=?Color.FromArgb(9,?56,?128);
????????}
????????protected?override?void?OnSizeChanged(EventArgs?e)
????????{
????????????base.OnSizeChanged(e);
????????????if?(HButton?==?null)
????????????{
????????????????HButton?=?new?HButton();
????????????????HButton.OnMenuClicked?+=?(s,?index)?=>
????????????????{
????????????????????MessageBox.Show($"點擊了菜單：#{index}");
????????????????};
????????????????this.Controls.Add(HButton);
????????????}
????????????else
????????????{
????????????????HButton.ResetSizeByForm(this.Width,?this.Height);
????????????}
????????}
????}
}

就是在窗體縮放時，把六邊形菜單動態(tài)加進去。