自定义带圆角的Hexagonal ImageView实现问题求助

首先，你的代码里主要问题出在圆弧的参数计算错误，包括arcTo的矩形范围、角度参数，还有六边形顶点的坐标逻辑混乱，导致圆弧根本没被正确绘制出来。我来帮你梳理正确的实现思路，同时提供更简洁可靠的代码。

先分析现有代码的问题 #

• triangleHeight的计算逻辑不对，六边形的顶点坐标应该基于外接圆半径用三角函数精确计算，而不是用halfRadius推导，容易出错
• arcTo的RectF范围完全没包围住要绘制的圆角区域，角度参数也不符合六边形圆角的需求
• 路径的点连接逻辑混乱，导致后续的边覆盖了本该显示的圆弧

更可靠的实现方式：分步绘制带圆角的六边形 #

核心思路是：先计算六边形的6个顶点，然后在每两个相邻顶点之间，用圆弧替代顶点的尖角，具体步骤如下：

1. 计算六边形的6个顶点坐标（基于View的中心和外接圆半径）
2. 对每个顶点，计算圆角圆弧的矩形范围和绘制角度
3. 依次连接边到圆弧起点，绘制圆弧，最终闭合路径

完整代码示例 #

private void calculatePath(float cornerRadius) {
    Path hexagonPath = new Path();
    int width = getMeasuredWidth();
    int height = getMeasuredHeight();
    float centerX = width / 2f;
    float centerY = height / 2f;
    // 六边形的外接圆半径（取View宽高中较小值的一半，保证六边形完全显示，预留圆角空间）
    float radius = Math.min(width, height) / 2f - cornerRadius;

    // 计算六边形的6个顶点坐标（从顶部顶点开始，顺时针生成）
    PointF[] vertices = new PointF[6];
    for (int i = 0; i < 6; i++) {
        // 每个顶点的角度：顶部是-90°，之后每次顺时针加60°
        float angle = (float) Math.toRadians(-90 + i * 60);
        float x = centerX + radius * (float) Math.cos(angle);
        float y = centerY + radius * (float) Math.sin(angle);
        vertices[i] = new PointF(x, y);
    }

    hexagonPath.reset();
    // 初始化路径：从第一个圆角的起点开始
    PointF firstVertex = vertices[0];
    PointF nextVertex = vertices[1];
    float startAngle = getAngleBetweenPoints(firstVertex, centerX, centerY) + 60;
    RectF firstRect = getCornerRect(firstVertex, nextVertex, centerX, centerY, cornerRadius);
    hexagonPath.moveTo(firstRect.left, firstRect.centerY());
    hexagonPath.arcTo(firstRect, startAngle, 60);

    // 循环处理剩下的5个圆角
    for (int i = 1; i < 6; i++) {
        int nextIndex = (i + 1) % 6;
        PointF currentVertex = vertices[i];
        PointF nextV = vertices[nextIndex];
        float angle = getAngleBetweenPoints(currentVertex, centerX, centerY) + 60;
        RectF rect = getCornerRect(currentVertex, nextV, centerX, centerY, cornerRadius);
        hexagonPath.lineTo(rect.left, rect.centerY());
        hexagonPath.arcTo(rect, angle, 60);
    }

    hexagonPath.close();
    this.hexagonPath = hexagonPath;
    invalidate();
}

// 计算顶点处圆角的矩形范围：让圆弧正好贴合六边形的两条边
private RectF getCornerRect(PointF vertex, PointF nextVertex, float centerX, float centerY, float cornerRadius) {
    // 计算从顶点指向中心的方向向量，用于确定圆角矩形的中心位置
    float dxCenter = centerX - vertex.x;
    float dyCenter = centerY - vertex.y;
    float length = (float) Math.hypot(dxCenter, dyCenter);
    // 归一化方向向量后乘以圆角半径，得到矩形中心相对于顶点的偏移
    float offsetX = (dxCenter / length) * cornerRadius;
    float offsetY = (dyCenter / length) * cornerRadius;
    float rectCenterX = vertex.x + offsetX;
    float rectCenterY = vertex.y + offsetY;
    // 返回包含圆角的正方形RectF
    return new RectF(rectCenterX - cornerRadius, rectCenterY - cornerRadius,
            rectCenterX + cornerRadius, rectCenterY + cornerRadius);
}

// 计算顶点相对于中心的角度，用于确定圆弧的起始绘制角度
private float getAngleBetweenPoints(PointF point, float centerX, float centerY) {
    float dx = point.x - centerX;
    float dy = point.y - centerY;
    return (float) Math.toDegrees(Math.atan2(dy, dx));
}

代码说明 #

• 用三角函数精确计算六边形顶点，避免手动推导坐标的误差
• getCornerRect方法根据顶点与中心的方向，精准定位圆角的矩形范围，保证圆弧完美替代尖角
• 每个圆角的绘制角度固定为60°，匹配六边形的内角特性，确保圆角弧度自然

额外提示 #

• 在onMeasure方法中调用calculatePath，保证View尺寸确定后再计算路径
• 绘制图片时，可以用canvas.clipPath(hexagonPath)（需开启硬件加速兼容）或者通过Paint的Xfermode实现裁剪效果

这样修改后，就能正确显示带圆角的六边形了，逻辑也更清晰，不容易出错～

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