WPF OpacityMask не работает как ожидалось

Question

Я работаю над обратным отсчетом для приложения WPF. Следующий XAML демонстрирует, что я после:

<Canvas> 
    <Canvas> 
     <Ellipse Width="110" Height="110" Fill="Black" Canvas.Left="95" Canvas.Top="95" /> 
     <Ellipse Width="100" Height="100" Fill="Red" Canvas.Left="100" Canvas.Top="100" /> 
     <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="72" Canvas.Left="131" Canvas.Top="100">3</TextBlock> 
    </Canvas> 
    <Canvas> 
     <Path Stroke="Blue" Fill="White"> 
      <Path.Data> 
       <PathGeometry> 
        <PathFigure StartPoint="150,150"> 
         <LineSegment Point="200,150" /> 
         <ArcSegment x:Name="arc1" Point="200,150" Size="50,50" SweepDirection="Clockwise" /> 
         <ArcSegment x:Name="arc2" Point="200,150" Size="50,50" SweepDirection="Clockwise" /> 
         <LineSegment Point="150,150" /> 
        </PathFigure> 
       </PathGeometry> 
      </Path.Data> 
      <Path.Triggers> 
       <EventTrigger RoutedEvent="Path.Loaded"> 
        <BeginStoryboard> 
         <Storyboard Duration="0:0:1" Storyboard.TargetProperty="Point" RepeatBehavior="Forever"> 
          <PointAnimationUsingPath Duration="0:0:0.5" Storyboard.TargetName="arc1"> 
           <PointAnimationUsingPath.PathGeometry> 
            <PathGeometry> 
             <PathFigure StartPoint="200,150"> 
              <ArcSegment Size="50,50" Point="100,150" SweepDirection="Clockwise" /> 
             </PathFigure> 
            </PathGeometry> 
           </PointAnimationUsingPath.PathGeometry> 
          </PointAnimationUsingPath> 
          <PointAnimationUsingPath Duration="0:0:0.5" Storyboard.TargetName="arc2"> 
           <PointAnimationUsingPath.PathGeometry> 
            <PathGeometry> 
             <PathFigure StartPoint="200,150"> 
              <ArcSegment Size="50,50" Point="100,150" SweepDirection="Clockwise" /> 
             </PathFigure> 
            </PathGeometry> 
           </PointAnimationUsingPath.PathGeometry> 
          </PointAnimationUsingPath> 
          <PointAnimationUsingPath BeginTime="0:0:0.5" Duration="0:0:0.5" Storyboard.TargetName="arc2"> 
           <PointAnimationUsingPath.PathGeometry> 
            <PathGeometry> 
             <PathFigure StartPoint="100,150"> 
              <ArcSegment Size="50,50" Point="200,150" SweepDirection="Clockwise" /> 
             </PathFigure> 
            </PathGeometry> 
           </PointAnimationUsingPath.PathGeometry> 
          </PointAnimationUsingPath> 
         </Storyboard> 
        </BeginStoryboard> 
       </EventTrigger> 
      </Path.Triggers> 
     </Path>   
    </Canvas> 
</Canvas> 

Теперь, вместо того, чтобы все это белое, я хотел бы «раскрыть» следующее число в обратном отсчете. Я думал, что использование OpacityMask будет работать, но когда я попробовал, все стало странно. Вот XAML я работаю:

<Canvas> 
    <Canvas> 
     <Ellipse Width="110" Height="110" Fill="Black" Canvas.Left="95" Canvas.Top="95" /> 
     <Ellipse Width="100" Height="100" Fill="Red" Canvas.Left="100" Canvas.Top="100" /> 
     <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="72" Canvas.Left="131" Canvas.Top="100">3</TextBlock> 
    </Canvas> 
    <Canvas> 
     <Ellipse Width="110" Height="110" Fill="Black" Canvas.Left="95" Canvas.Top="95" /> 
     <Ellipse Width="100" Height="100" Fill="Yellow" Canvas.Left="100" Canvas.Top="100" /> 
     <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="72" Canvas.Left="131" Canvas.Top="100">2</TextBlock> 
     <Canvas.OpacityMask> 
      <VisualBrush> 
       <VisualBrush.Visual> 
        <Path Stroke="Blue" Fill="White"> 
         <Path.Data> 
          <PathGeometry> 
           <PathFigure StartPoint="150,150"> 
            <LineSegment Point="200,150" /> 
            <ArcSegment x:Name="arc1" Point="200,150" Size="50,50" SweepDirection="Clockwise" /> 
            <ArcSegment x:Name="arc2" Point="200,150" Size="50,50" SweepDirection="Clockwise" /> 
            <LineSegment Point="150,150" /> 
           </PathFigure> 
          </PathGeometry> 
         </Path.Data> 
         <Path.Triggers> 
          <EventTrigger RoutedEvent="Path.Loaded"> 
           <BeginStoryboard> 
            <Storyboard Duration="0:0:10" Storyboard.TargetProperty="Point" RepeatBehavior="Forever"> 
             <PointAnimationUsingPath Duration="0:0:5" Storyboard.TargetName="arc1"> 
              <PointAnimationUsingPath.PathGeometry> 
               <PathGeometry> 
                <PathFigure StartPoint="200,150"> 
                 <ArcSegment Size="50,50" Point="100,150" SweepDirection="Clockwise" /> 
                </PathFigure> 
               </PathGeometry> 
              </PointAnimationUsingPath.PathGeometry> 
             </PointAnimationUsingPath> 
             <PointAnimationUsingPath Duration="0:0:5" Storyboard.TargetName="arc2"> 
              <PointAnimationUsingPath.PathGeometry> 
               <PathGeometry> 
                <PathFigure StartPoint="200,150"> 
                 <ArcSegment Size="50,50" Point="100,150" SweepDirection="Clockwise" /> 
                </PathFigure> 
               </PathGeometry> 
              </PointAnimationUsingPath.PathGeometry> 
             </PointAnimationUsingPath> 
             <PointAnimationUsingPath BeginTime="0:0:5" Duration="0:0:5" Storyboard.TargetName="arc2"> 
              <PointAnimationUsingPath.PathGeometry> 
               <PathGeometry> 
                <PathFigure StartPoint="100,150"> 
                 <ArcSegment Size="50,50" Point="200,150" SweepDirection="Clockwise" /> 
                </PathFigure> 
               </PathGeometry> 
              </PointAnimationUsingPath.PathGeometry> 
             </PointAnimationUsingPath> 
            </Storyboard> 
           </BeginStoryboard> 
          </EventTrigger> 
         </Path.Triggers> 
        </Path> 
       </VisualBrush.Visual> 
      </VisualBrush> 
     </Canvas.OpacityMask>      
    </Canvas> 
</Canvas> 

Я не знаю, как описать то, что происходит, и почему он ведет себя таким образом, но это не то, что я хотел бы, ни то, что я ожидал. Есть что-то простое, чего я не хватает? Или может кто-нибудь предложить альтернативный подход, который выполнит то, что я хочу?

Answer 1

Я нашел проблему. Это было связано с viewport/viewbox визуальной кисти, которую я использовал, чтобы создать маску непрозрачности. Вот соответствующее изменение:

<Canvas.OpacityMask> 
      <VisualBrush Viewbox="0,0,300,300" ViewboxUnits="Absolute" Viewport="0,0,300,300" ViewportUnits="Absolute"> ... 

Я не являюсь экспертом в WPF с помощью любых средств, но мое понимание того, что происходит неправильно выглядит следующим образом. Видовое окно кисти по умолчанию начинается в верхнем левом углу ограничивающего контейнера. В моем случае ограничивающим контейнером был путь, который я анимировал. Во время анимации верхний левый контейнер менялся. Различные сегменты, составляющие путь, были определены относительно этой изменяющейся верхней левой точки. В основном, они тянутся относительно движущейся цели. Настройки виджетов указывают на то, что мы хотим работать со всем оригинальным изображением с той же системой координат, что и она.

Любой, кто лучше понимает, что происходит, кто может дать более четкое объяснение, не стесняйтесь отредактировать этот ответ или добавить комментарий.