0

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>

何が起こっているのか、なぜこのように動作しているのかを説明する方法はわかりませんが、それは私が望むものでも期待したものでもありません. 私が見逃している簡単なものはありますか？または、私が望むものを達成する代替アプローチを誰かが提供できますか?

4

1 に答える 1

0

問題が見つかりました。これは、不透明マスクの作成に使用していたビジュアル ブラシのビューポート/ビューボックスに関連していました。関連する変更は次のとおりです。

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

私は決して WPF の専門家ではありませんが、何がうまくいかなかったのかについての私の理解は次のとおりです。ブラシの既定のビューポートは、バウンディング コンテナーの左上から始まります。私の場合、バウンディング コンテナーはアニメーション化するパスでした。アニメーション中、コンテナの左上が変化していました。パスを構成するさまざまなセグメントは、この変化する左上の点を基準にして定義されました。基本的に、それらは移動するターゲットに対して相対的に描かれていました。ビューボックスの設定は、元のビジュアル全体を同じ座標系で操作することを示すためにあります。

何が起こっているのかをよりよく理解していて、より明確な説明を提供できる人は誰でも、この回答を自由に編集するか、コメントを追加してください。

于 2012-06-13T11:49:34.000 に答える