UWP放射状進捗バー画像塗りつぶし

Question

UWPツールキットから放射状進捗バーを使用しています。私はこの進歩を私が作ったゲームで使いたいです。プログレスバーの前景を塗り潰したい画像があります。私が何を試しても、プログレスバーがいっぱいになるように画像を取得することはできません。

私は現在、フォアグラウンドで画像を拡大しようとしていますが、それはあまり効果がありません。やりたい

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

は、上記のコードが作成する効果ありますか？ Win2dを使用してカスタム約1

Answer 1

私は、半径を使用してから離れて行くことにしましたプログレスバー。私は画像クリップについて学んだ。私は、希望の効果を得るためにRotation変換と共に画像クリップを使用しています。

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

Answer 2

どのように？

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

、それは次のようになります。