Java实现导航地图两侧透明中间有色的三色渐变方案

核心思路 #

根据道路线段端点的横坐标与窗口中间位置的距离，动态计算颜色透明度：中间区域保持完全不透明，向左右两侧逐渐降低透明度，直到边缘完全透明。

关键参数定义 #

先在代码中定义淡出相关的可控参数（可根据需求调整）：

// 窗口总宽度，需根据你的实际界面尺寸传入
int windowWidth = ...;
// 两侧淡出过渡区域的宽度，值越大淡出越平缓
int fadeWidth = windowWidth / 4;
// 基础道路颜色（替换成你需要的指定颜色x）
Color baseColor = Color.BLACK;

修改后的绘制代码 #

for(Street street : streets){
    if(street.distanceToCurrentPosition() * factor < width * 2){
        Integer last_x = null;
        Integer last_y = null;
        street.setupGraphicSettings(g2d);
        if(!street.getType().isEmpty()){
            for(WayPoint wayPoint : street.getWayPoints()){
                int waypoint_x = (int) (wayPoint.getDistanceLongitudeTo(current_position) * factor) + middle_x;
                int waypoint_y = - (int) (wayPoint.getDistanceLatitudeTo(current_position) * (double) factor) + middle_y;

                if(last_x != null && last_y != null){
                    // 计算两个端点的透明度
                    int alpha1 = calculateAlpha(last_x, middle_x, fadeWidth);
                    int alpha2 = calculateAlpha(waypoint_x, middle_x, fadeWidth);
                    // 取两个端点的平均透明度，保证线段过渡自然
                    int averageAlpha = (alpha1 + alpha2) / 2;
                    
                    // 创建带透明度的道路颜色
                    Color transparentColor = new Color(
                        baseColor.getRed(),
                        baseColor.getGreen(),
                        baseColor.getBlue(),
                        averageAlpha
                    );
                    g2d.setColor(transparentColor);
                    
                    g2d.drawLine(waypoint_x, waypoint_y, last_x, last_y);
                }
                last_x = waypoint_x;
                last_y = waypoint_y;
            }
        }
    }else return;
}

// 新增透明度计算方法
private int calculateAlpha(int x, int middleX, int fadeWidth) {
    int leftEdge = middleX - fadeWidth;
    int rightEdge = middleX + fadeWidth;
    
    if(x >= leftEdge && x <= rightEdge){
        // 中间区域完全不透明
        return 255;
    }else if(x < leftEdge){
        // 左侧区域：距离左边缘越远，透明度越低
        int distance = leftEdge - x;
        return Math.max(0, 255 - (255 * distance / fadeWidth));
    }else{
        // 右侧区域：距离右边缘越远，透明度越低
        int distance = x - rightEdge;
        return Math.max(0, 255 - (255 * distance / fadeWidth));
    }
}

代码说明 #

• calculateAlpha方法：根据点的横坐标计算对应的透明度值（范围0-255，0为完全透明，255为完全不透明）
• 线段透明度取两个端点的平均值：避免线段两端透明度差异过大导致的突兀感
• 可通过调整fadeWidth参数控制淡出的过渡范围：值越大，两侧淡出的过渡越平缓；值越小，淡出效果越急促

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