Canvas点击检测问题：自定义饼图View如何识别点击的饼块？

嘿，我来帮你搞定饼图的点击检测问题！其实核心逻辑就是把点击点的坐标转换成相对于饼图中心的角度，再匹配到对应的分段，说起来简单，咱一步步拆解：

第一步：把触摸坐标转换成相对中心的坐标 #

触摸事件里的event.getX()和event.getY()是相对于View左上角的，咱得先把它转换成以饼图中心为原点的坐标：

// 假设你已经在onSizeChanged里算出了中心坐标和半径
float dx = event.getX() - centerX;
float dy = event.getY() - centerY;

第二步：过滤饼图外的无效点击 #

先判断点击点是不是在饼图范围内，避免处理空白区域的点击：

float distance = (float) Math.hypot(dx, dy);
if (distance > radius) {
    // 点击在饼图外面，直接返回
    return super.onTouchEvent(event);
}

第三步：计算点击点对应的角度 #

用Math.atan2(dy, dx)算出弧度，再转成角度。注意这个方法返回的是[-180°, 180°]，咱得把它转成[0°, 360°]的范围，方便和饼图分段匹配：

double radians = Math.atan2(dy, dx);
float angle = (float) Math.toDegrees(radians);
if (angle < 0) {
    angle += 360;
}

这里要注意：Android的坐标系y轴是向下的，所以默认0°是指向右侧，顺时针角度递增。而咱饼图一般是从顶部开始绘制的，所以得把角度调整一下，让顶部对应0°：

// 把右侧0°转换成顶部0°，相当于给角度加90°再取模360
float adjustedAngle = (angle + 90) % 360;

第四步：匹配到对应的饼图分段 #

你肯定有一个存储分段数据的列表吧？比如每个分段要记录startAngle（起始角度）和sweepAngle（扫过的角度）。遍历这个列表，检查adjustedAngle是否落在当前分段的角度区间里：

PieSegment clickedSegment = null;
for (PieSegment segment : segments) {
    float segmentEndAngle = segment.startAngle + segment.sweepAngle;
    // 处理最后一个分段角度超过360°的情况
    if ((adjustedAngle >= segment.startAngle && adjustedAngle < segmentEndAngle) ||
        (segmentEndAngle > 360 && adjustedAngle >= segment.startAngle - 360)) {
        clickedSegment = segment;
        break;
    }
}

第五步：旋转Canvas把分段移到顶部 #

找到点击的分段后，计算需要旋转的角度，让这个分段的中间位置对准顶部，然后更新旋转角度并重绘：

if (clickedSegment != null) {
    // 目标是让分段的中间点对准顶部（对应调整后的0°）
    float segmentMiddleAngle = clickedSegment.startAngle + clickedSegment.sweepAngle / 2;
    // 计算需要旋转的增量：把中间点转到0°，再加上当前已有的旋转角度
    float rotationDelta = -segmentMiddleAngle - currentRotation;
    currentRotation += rotationDelta;
    invalidate(); // 触发重绘
}

别忘了在onDraw里先旋转Canvas再绘制饼图：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.save();
    // 绕中心旋转指定角度
    canvas.rotate(currentRotation, centerX, centerY);
    // 这里放你原来的饼图绘制代码，注意起始角度要对应调整后的0°（也就是顶部）
    float currentStart = 0;
    for (PieSegment segment : segments) {
        paint.setColor(segment.color);
        canvas.drawArc(
            centerX - radius, centerY - radius,
            centerX + radius, centerY + radius,
            currentStart, segment.sweepAngle,
            true, paint
        );
        segment.startAngle = currentStart; // 更新分段的起始角度，方便下次点击检测
        currentStart += segment.sweepAngle;
    }
    canvas.restore();
}

一些要注意的细节 #

• 如果你的饼图是逆时针绘制的，角度匹配的逻辑要反过来；
• 要是做环形饼图，还要判断点击点距离中心的距离是否在内外圈半径之间；
• 触摸事件建议只处理ACTION_UP，避免重复触发旋转。

内容的提问来源于stack exchange，提问作者Patricks