如何在MAUI中实现可点击的六边形地图？

一、自定义六边形控件（推荐） #

自己封装可复用的六边形控件，既解决绘制问题，又内置点击逻辑，比零散用Polygon更高效。

1. 自动计算六边形顶点 #

不用手动算每个点，把计算逻辑封装到控件里：

• 定义六边形的SideLength（边长）、中心坐标
• 通过三角函数固定公式生成6个顶点：每个顶点对应角度为60°×n（n从0到5），结合中心坐标算出具体点位（注意MAUI坐标系Y轴向下，起始角度可调整为让六边形上下边水平）

2. 内置点击判断与事件 #

给控件添加点击手势，同时可通过几何判断确保点击范围精准：

• 用TapGestureRecognizer绑定点击事件
• 若需要更精准的点击命中判断，可在触摸事件里用多边形的FillContains方法，或者通过坐标转换判断点击点是否在六边形范围内

示例代码片段：

public class HexagonView : View
{
    public static readonly BindableProperty SideLengthProperty =
        BindableProperty.Create(nameof(SideLength), typeof(double), typeof(HexagonView), 50.0);

    public double SideLength
    {
        get => (double)GetValue(SideLengthProperty);
        set => SetValue(SideLengthProperty, value);
    }

    public event EventHandler Tapped;

    protected override void OnDraw(ICanvas canvas, RectF dirtyRect)
    {
        base.OnDraw(canvas, dirtyRect);
        var centerX = dirtyRect.Center.X;
        var centerY = dirtyRect.Center.Y;
        float[] points = new float[12];
        
        // 计算6个顶点坐标，调整起始角度让六边形上下边水平
        for (int i = 0; i < 6; i++)
        {
            double angle = Math.PI / 3 * i - Math.PI / 6;
            points[2*i] = (float)(centerX + SideLength * Math.Cos(angle));
            points[2*i+1] = (float)(centerY + SideLength * Math.Sin(angle));
        }
        
        // 绘制填充与边框
        canvas.FillColor = Colors.LightBlue;
        canvas.FillPolygon(points);
        canvas.StrokeColor = Colors.DarkBlue;
        canvas.StrokeSize = 2;
        canvas.DrawPolygon(points);
    }

    public HexagonView()
    {
        var tapGesture = new TapGestureRecognizer();
        tapGesture.Tapped += (s, e) => Tapped?.Invoke(this, EventArgs.Empty);
        GestureRecognizers.Add(tapGesture);
    }
}

二、网格布局自动排列六边形 #

如果要生成网格状地图，自定义一个布局容器来自动排列所有六边形控件：

• 布局逻辑：奇数行的六边形相对于偶数行偏移半个六边形宽度，避免错位
• 批量创建HexagonView并添加到布局，统一绑定点击事件处理逻辑

三、更灵活的替代方案：SkiaSharp绘制 #

如果需要纹理、动态变色等复杂效果，可用MAUI的SkiaSharp库：

• 用SKCanvas绘制六边形路径，同样通过三角函数计算顶点
• 监听触摸事件，用SKPath.Contains方法判断点击点是否在六边形范围内

四、点击事件的两种处理方式 #

• 给每个六边形控件单独绑定TapGestureRecognizer，适合需要单独处理每个六边形点击逻辑的场景
• 在父容器监听触摸事件，根据点击坐标批量判断命中的六边形，适合统一处理批量六边形的场景

内容的提问来源于stack exchange，提问作者Cedric Royer-Bertrand