Question

我使用的是UWP ToolKit的Radial Progress Bar。我想在我创建的游戏中使用这个进步。我有一个图像，我想填充进度条的前景。无论我尝试什么，我都无法以进度条填充的方式将图像填入进度条。

我目前正在尝试在前景中缩放图像，但这并不是我想要的效果。

XAML：

<toolKit:RadialProgressBar Width="316" Height="316" Minimum="0" Maximum="100" Value="{Binding Value}" Thickness="36"

                                   BorderBrush="Transparent" >
            <toolKit:RadialProgressBar.Foreground>
                <ImageBrush ImageSource="ms-appx:///Assets/progress2.png" >
                    <ImageBrush.Transform>
                        <ScaleTransform CenterX="0" CenterY="0" ScaleX="{Binding Scale}" ScaleY="{Binding Scale}" />
                    </ImageBrush.Transform>
                </ImageBrush>
            </toolKit:RadialProgressBar.Foreground>
        </toolKit:RadialProgressBar>

C＃：

private int _value;
        public int Value
        {
            get => _value;
            set
            {
                if (_value != value)
                {
                    _value = value;
                    RaisePropertyChanged(nameof(Value));
                    Scale = 1.0-(100.0 - (316.0 * (Convert.ToDouble(value) / 100.0) / 316.0 * 100.0))/100.0;

                }
            }
        }

        private double _scale;
        public double Scale
        {
            get => _scale;
            set
            {
                if (_scale != value)
                {
                    _scale = value;
                    RaisePropertyChanged(nameof(Scale));
                }
            }
        }

以下是上述代码创建的效果：

有没有办法用图像填充进度条？

Answer 1

如何使用 Win2d 自定义

XAML：

<Grid Width="500" Height="500">
    <xaml:CanvasControl x:Name="CanvasControl" Draw="CanvasControl_OnDraw"/>

    <Slider Width="500" VerticalAlignment="Center" ValueChanged="RangeBase_OnValueChanged"/>
</Grid>

及其背后：

    private static Vector2 _centerPoint = new Vector2(250);
    private static float _radius = 200;
    private int _currentValue;
    private readonly List<Vector2> _points = new List<Vector2>();
    private readonly CanvasStrokeStyle _strokeStyle = new CanvasStrokeStyle
    {
        StartCap = CanvasCapStyle.Round,
        EndCap = CanvasCapStyle.Round
    };

    public MainPage()
    {
        InitializeComponent();
        GetPoints(100);
    }

    private void GetPoints(int i)
    {
        var radFactor = Math.PI / 180;
        var angleStep = 360f / i;

        for (int j = 0; j < i + 1; j++)
        {
            _points.Add(new Vector2(_centerPoint.X + _radius * (float)Math.Cos((angleStep * j + 90) * radFactor), 
                _centerPoint.Y + _radius * (float)Math.Sin((angleStep * j + 90) * radFactor)));
        }
    }

    private void CanvasControl_OnDraw(CanvasControl sender, CanvasDrawEventArgs args)
    {
        for (int i = 0; i < _currentValue; i++)
        {
            args.DrawingSession.DrawLine(_points[i], _points[i + 1], Colors.LimeGreen, 24, _strokeStyle);
        }
    }

    private void RangeBase_OnValueChanged(object sender, RangeBaseValueChangedEventArgs e)
    {
        _currentValue = (int) e.NewValue;
        CanvasControl.Invalidate();
    }

它应该是这样的：

Answer 2

我决定放弃使用径向进度条。我已经了解了图像剪辑。我正在使用图像剪辑和旋转变换来获得所需的效果。

XAML：

 <Image Source="ms-appx:///Assets/Progress.png" Width="{Binding ImageWidth}" Height="{Binding ImageHeight}" >
                <Image.Clip>
                    <RectangleGeometry Rect="{Binding Rect}" >
                        <RectangleGeometry.Transform>
                            <RotateTransform CenterX="{Binding CenterXY}" CenterY="{Binding CenterXY}" Angle="{Binding Angle}" />
                        </RectangleGeometry.Transform>
                    </RectangleGeometry>
                </Image.Clip>
            </Image>

C＃：

private int _value;
        public int Value
        {
            get => _value;
            set
            {
                if (_value != value)
                {
                    _value = value;
                    RaisePropertyChanged(nameof(Value));
                    Angle = 144 - 1.44 * value;
                }
            }
        }

UWP径向进度条图像填充

2 个答案: