具有径向渐变的WPF径向进度栏 [英] WPF Radial Progress Bar with Radial Gradient

问题描述

在此问题和答案的帮助下，我有了设法创建了一个径向进度条.这实现了圆弧绘制概念，其中圆弧绑定到起始角度和终止角度.

我现在遇到的问题是，我希望进度条具有从圆弧中心开始的径向渐变.这使进度条从弧的内部到弧的外部具有线性梯度".我正在尝试在弧线的笔触上应用径向渐变(ProgressBar的Foreground属性)，但是这将弧线渐变应用到弧线笔触的中心，而不是弧线对象的中心(如下所示).

当圆弧位于100％(或大于75％的任何值)时，笔划的中心位于圆弧的中心，从而产生所需的结果.

我如何始终将径向渐变的中心调整到圆弧的中心，以便在所有填充百分比上都应用所需的渐变?还是对此问题有更好的解决方案/方法?

解决方案

由于您使用的RadialGradient很可能是Relative，因此它将根据圆弧的实际大小更改其中心.

当圆弧位于 75％或更高时，由Arc生成的Geometry处于其最大Width和Height的最大值，因此稳定并且覆盖了整个控件./p>

您要做的是绘制整个圆并遮盖原始"圆弧之外的部分.在这种情况下，简便的方法是用以下方法替换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. 用以前用来绘制圆弧(GetWidenedPathGeometry)的Pen进行扩展
3. 指示DrawingContext忽略该区域(Push(clip))以外的任何内容
4. 用渐变(DrawEllipse)画一个完整的圆
5. 指示DrawingContext从现在开始(Pop)忽略clip

结果

With the help of this question and answer, I have managed to create a radial progress bar. This implements the arc drawing concept where the arc binds to the start and end angles.

The problem I have now is that I would like the progress bar to have radial gradient from the center of the arc. This gives the progress bar a "linear gradient" from the inside of the arc to the outside of the arc. I am trying to apply the radial gradient on the stroke of the arc (the Foreground property of the ProgressBar), but this applies the radial gradient at the center of the arc stroke, not the center of the arc object (as seen below).

When the arc is at 100% (or anything above 75%), the center of the stroke is at the center of the arc, which produces the desired result.

How can I consistently adjust the center of the radial gradient to the center of the arc so that the desired gradient is applied at all fill percentages? Or is there a better solution/approach to this problem?

解决方案

Since the RadialGradient you are using is most likely Relative, it will change its center depending on the actual size of the arc.

When the arc is at 75% or higher, the Geometry generated by Arc is at its maximum Width and Height and therefore stable and covering the entire control.

What you want to do is, draw the entire circle and mask out the parts that are outside of the "original" arc. Easies way to do that in your case is to replace the Arc.OnRender method with this:

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();
}

Explanation

1. Get the unmodified Geometry as calculated by the original code (GetArcGeometry)
2. Extend it with the Pen that was previously used to draw the arc (GetWidenedPathGeometry)
3. Instruct the DrawingContext to ignore anything outside of that area (Push(clip))
4. Draw a full circle with the gradient (DrawEllipse)
5. Instruct the DrawingContext to ignore the clip from now on (Pop)

Result

这篇关于具有径向渐变的WPF径向进度栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！