如何在Canvas圆弧描边上应用RadialGradient径向渐变

阿华AIGC实验室

2026-5-14

如何为圆弧描边添加渐变效果？

我来帮你搞定这个问题！你现在遇到的情况，是因为两个关键点没处理好：一是drawArc的useCenter参数设置，二是Shader和描边路径的适配逻辑。咱们一步步来调整：

问题根源

当你把Paint.Style设为STROKE，同时drawArc的useCenter传true时，Canvas绘制的是扇形的轮廓（圆弧+两条连接圆心的半径）。而Shader的渐变计算是基于这个轮廓包围的填充区域来的，所以渐变效果会覆盖整个扇形范围，而不是只作用在圆弧的描边上。

解决步骤

修改drawArc的useCenter参数：把最后一个参数改成false，这样Canvas只会绘制纯圆弧，不会添加连接圆心的半径，让描边路径只保留圆弧部分。
调整径向渐变的参数：因为描边有宽度，所以需要让渐变覆盖整个描边的范围。比如圆弧半径是mRadius，描边宽度是strokeWidth，那么径向渐变的半径应该设为mRadius + strokeWidth/2，这样渐变会从圆弧中心延伸到描边的外边缘，完美覆盖整个圆弧描边。
确保Paint的配置正确：保持STROKE样式，同时确认strokeWidth的计算没问题。

修改后的完整代码

Paint paint = new Paint();
paint.setStyle(Paint.Style.STROKE);
// 计算描边宽度（保留你原来的DIP转PX逻辑）
float strokeWidth = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, getResources().getDisplayMetrics());
paint.setStrokeWidth(strokeWidth);

// 调整径向渐变的半径，覆盖整个描边范围
float gradientRadius = mRadius + strokeWidth / 2;
paint.setShader(new RadialGradient(
        getWidth()/2, getHeight()/2, 
        gradientRadius, 
        Color.BLUE, Color.YELLOW, 
        Shader.TileMode.CLAMP
));

// 把useCenter改为false，只绘制圆弧
RectF arcRect = new RectF(
        getWidth()/2 - mRadius, 
        getHeight()/2 - mRadius, 
        getWidth()/2 + mRadius, 
        getHeight()/2 + mRadius
);
canvas.drawArc(arcRect, 270f, mProgressDegree, false, paint);