MAUI/Xamarin中如何检测GraphicsView绘制的饼图切片点击与悬停

我在MAUI的GraphicsView中通过实现IDrawable绘制了饼图的不同圆弧切片，目前绘制功能正常，但希望检测这些切片的点击或悬停事件。尝试让PieChartDrawable继承View并添加TapGestureRecognizer，但Tapped事件未触发，且该方案也无法识别具体点击的切片。相关代码如下：

public class PieChartDrawable : View, IDrawable
{
    private readonly PieChart _chart;

    public PieChartDrawable(PieChart chart) 
    { 
        _chart = chart;

        var tapGestureRecognizer = new TapGestureRecognizer();

        tapGestureRecognizer.Tapped += OnTapped;

        GestureRecognizers.Add(tapGestureRecognizer);
    }

    private void OnTapped(object sender, EventArgs e)
    {
        // Does not trigger.
    }

    public void Draw(ICanvas canvas, RectF dirtyRect)
    {
        if (_chart.Entries == null)
            return;

        [...]
      
    } 
}

请问是我的实现方式有误，还是存在可行的解决方案？（寻求MAUI方案，兼容Xamarin.Forms亦可）

你的实现方式存在问题：PieChartDrawable继承View完全无效，因为GraphicsView只会调用IDrawable的Draw方法，不会将这个Drawable纳入视觉树，所以添加的手势识别器根本不会被触发。

正确的思路是在承载PieChartDrawable的GraphicsView上绑定手势，再通过坐标计算判断点击/悬停的切片，具体步骤如下：

1. 给GraphicsView绑定点击手势 #

在XAML中直接添加：

<GraphicsView x:Name="PieChartView">
    <GraphicsView.GestureRecognizers>
        <TapGestureRecognizer Tapped="OnPieChartTapped" />
    </GraphicsView.GestureRecognizers>
</GraphicsView>

或者在代码后台绑定：

var tapGesture = new TapGestureRecognizer();
tapGesture.Tapped += OnPieChartTapped;
PieChartView.GestureRecognizers.Add(tapGesture);

2. 计算点击位置对应的切片 #

在点击事件处理方法中，通过坐标转换和角度计算匹配目标切片：

private void OnPieChartTapped(object sender, TappedEventArgs e)
{
    if (PieChartView.Drawable is not PieChartDrawable drawable) return;
    var pieChart = drawable._chart; // 建议将_chart改为public或提供GetChart()方法
    if (pieChart.Entries == null || pieChart.Entries.Count == 0) return;

    // 获取相对于GraphicsView的点击坐标
    var point = e.GetPosition(PieChartView);
    if (point == null) return;
    var tapX = (float)point.Value.X;
    var tapY = (float)point.Value.Y;

    // 饼图中心与半径（需和Draw方法中的绘制逻辑保持一致）
    var centerX = PieChartView.Width / 2f;
    var centerY = PieChartView.Height / 2f;
    var radius = Math.Min(centerX, centerY) * 0.8f;

    // 判断点击是否在饼图范围内
    var dx = tapX - centerX;
    var dy = tapY - centerY;
    var distance = Math.Sqrt(dx * dx + dy * dy);
    if (distance > radius) return;

    // 计算点击点的角度（适配MAUI坐标系Y轴向下的特性）
    var angle = Math.Atan2(dy, dx);
    if (angle < 0) angle += 2 * Math.PI;
    var degree = angle * 180 / Math.PI;

    // 遍历切片匹配角度范围
    float currentStartAngle = 0;
    foreach (var entry in pieChart.Entries)
    {
        var sliceAngle = entry.Percentage * 360; // 假设entry.Percentage是0-1的占比
        if (degree >= currentStartAngle && degree < currentStartAngle + sliceAngle)
        {
            // 触发切片点击逻辑，比如更新UI或回调
            Console.WriteLine($"点击切片：{entry.Label}");
            break;
        }
        currentStartAngle += sliceAngle;
    }
}

3. 悬停事件处理（MAUI专属） #

MAUI支持PointerEntered/PointerExited事件，同样绑定在GraphicsView上，复用上述坐标计算逻辑即可：

PieChartView.PointerEntered += OnPieChartPointerEntered;
PieChartView.PointerExited += OnPieChartPointerExited;

private void OnPieChartPointerEntered(object sender, PointerEventArgs e)
{
    var point = e.GetPosition(PieChartView);
    // 复用点击逻辑中的角度计算，判断悬停切片
}

优化建议 #

• 在PieChartDrawable中保存绘制时的中心、半径、各切片角度范围等参数，避免手势处理时重复计算，减少误差
• 给PieChart.Entries补充必要字段（如标签、颜色、自定义数据），方便后续业务逻辑处理

内容的提问来源于stack exchange，提问作者Jeremy A.