WPF OpacityMask不像預期的那樣工作

我正在爲WPF應用程序進行倒計時控制。下面的XAML演示了我追求的：WPF OpacityMask不像預期的那樣工作

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

我不知道如何來形容正在發生什麼，或者爲什麼以這種方式表現，但它不是我想什麼也沒有人知道我的預期。有沒有簡單的我失蹤？或者任何人都可以提供一種替代方法來實現我想要的？

來源

2012-06-12 jon

我發現了這個問題。它與我用來創建不透明蒙版的視覺畫筆的視口/視圖框有關。下面是相關變化：

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

我不是在WPF的專家以任何手段，但我發生了什麼事情的理解錯誤如下。筆刷的默認視口從邊界容器的左上角開始。在我的情況下，邊界容器是我動畫的路徑。在動畫期間，容器的左上角正在改變。構成路徑的不同部分是相對於這個變化的左上角點而定義的。基本上，它們是相對於移動目標而繪製的。視圖框設置表示我們想要使用與其使用的相同座標系統一起處理整個原始視覺效果。

任何人都能更好地理解發生了什麼事，誰能給出更清晰的解釋，請隨時編輯此答案或添加評論。

來源

2012-06-13 11:49:34 jon

WPF OpacityMask不像預期的那樣工作

回答

相關問題