c# - 具有径向渐变的 WPF 径向进度条

Question

在this question and answer的帮助下，我设法创建了一个径向进度条。这实现了圆弧绘制概念，其中圆弧绑定(bind)到起始角和结束角。

我现在遇到的问题是我希望进度条从圆弧中心开始呈放射状渐变。这使进度条从圆弧内部到圆弧外部具有“线性渐变”。我试图在圆弧的笔划上应用径向渐变(ProgressBar 的 Foreground 属性)，但这会在圆弧笔划的中心应用径向渐变，而不是圆弧对象的中心(如下所示)。

当弧度为 100%(或任何高于 75%)时，笔画的中心位于弧的中心，这会产生所需的结果。

我如何才能始终如一地将径向渐变的中心调整到圆弧的中心，以便在所有填充百分比下应用所需的渐变？或者是否有更好的解决方案/方法来解决这个问题？

Answer 1

由于您使用的 RadialGradient 很可能是 Relative，它会根据弧的实际大小更改其中心。

当圆弧处于 75% 或更高时，Arc 生成的Geometry 处于其最大Width 和 Height，因此稳定并覆盖整个控件。

您要做的是，绘制整个圆并遮盖“原始”圆弧之外的部分。在你的情况下，简单的方法是用这个替换 Arc.OnRender 方法:

Arc.cs

protected override void OnRender(DrawingContext drawingContext)
{
    // half the width and height of the Arc
    double radiusX = RenderSize.Width / 2;
    double radiusY = RenderSize.Height / 2;

    // the outlines of the "original" Arc geometry
    PathGeometry clip = GetArcGeometry().GetWidenedPathGeometry(
        new Pen(Stroke, StrokeThickness));

    // draw only in the area of the original arc
    drawingContext.PushClip(clip);
    drawingContext.DrawEllipse(Stroke, null, new Point(radiusX, radiusY), radiusX, radiusY);
    drawingContext.Pop();
}

解释

1. 获取原始代码 (GetArcGeometry) 计算得到的未修改的Geometry
2. 用之前用来画圆弧的Pen扩展它(GetWidenedPathGeometry)
3. 指示 DrawingContext 忽略该区域之外的任何内容 (Push(clip))
4. 用渐变画一个完整的圆(DrawEllipse)
5. 指示 DrawingContext 从现在开始忽略 clip (Pop)

结果