3

円(楕円)をスムーズに描けるようにして、画面に描いている様子が見えるようにしたいです。

DoubleAnimation を使用してこれを行うことは可能ですか? そうでない場合、代替方法は何ですか?

私が持っているものの例:

  • 1 つの外側の楕円 (黒)
  • 内側の楕円 (白) - これは私がアニメートしたいものです

コード:

<Ellipse Width="200" Height="200" Stroke="Black" StrokeThickness="20"/>
    <Ellipse Width="190" Height="190" Stroke="White" StrokeThickness="10" Canvas.Left="5"    Canvas.Top="5" x:Name="animatedEllipse">
        <Ellipse.Triggers>
            <EventTrigger RoutedEvent="Ellipse.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Ellipse.Triggers>
    </Ellipse>

たとえば、いくつかの例を見てきました。

最初の 2 つは、WPF アニメーションが初めての私にとっては少し混乱しています。後者には「正解」として7票がありますが、「コレクション要素StrokeDashArray [0]は依存関係プロパティではありません」というエラーが発生するため、うまくいきません(また、ダッシュは必要ありません。上記の記事に従ってダッシュ付きの楕円で、それでもこのエラーで失敗しました。

アップデート:

コードを使用して動作する方法は次のとおりです。

public static class ExtensionMethods
{
    private static Action EmptyDelegate = delegate() { };

    public static void Refresh(this UIElement uiElement)
    {
        uiElement.Dispatcher.Invoke(DispatcherPriority.Render, EmptyDelegate);
    }
}

public partial class Page1 : Page
{
    private void Page_Loaded_1(object sender, RoutedEventArgs e)
    {
        path = new Path();
        group = new GeometryGroup();
        path.Data = group;

        path.Stroke = new SolidColorBrush(Colors.White);
        path.StrokeThickness = 3;

        canvas.Children.Add(path);
        BackgroundWorker worker = new BackgroundWorker();
        worker.DoWork += worker_DoWork;
        worker.RunWorkerAsync();
    }

    void worker_DoWork(object sender, DoWorkEventArgs e)
    {
        int radius = 90;
        for (double i = 0.0; i < 360.0; i += 1)
        {
            double angle = i * System.Math.PI / 180;
            double x = (int)(100 + radius * System.Math.Cos(angle));
            double y = (int)(100 + radius * System.Math.Sin(angle));
            canvas.Dispatcher.Invoke(new Action(delegate
            {
                group.Children.Add(new EllipseGeometry(new Point(x, y), 5, 5));
            }));
            canvas.Refresh();
            System.Threading.Thread.Sleep(1);

        }
    }
4

2 に答える 2

1

次の 3 つの要素が必要になる場合があります。

  1. 外側の円(塗りつぶしの色は薄い色になります)。

  2. 透明な塗りつぶし色の内側の円。

  3. 円弧セグメントには、それらの間に半径の厚さの違いがあります。

  4. 円弧は 45 度の角度で配置され、両方の円でアニメーション化できます。

これは単なるアイデアです。自分でテストする必要があるかもしれません。

于 2012-12-30T13:40:49.517 に答える
0

ArcSegment楕円の代わりに を使用すると、さらに進むことができます。

<PathFigure StartPoint="100,100">
    <PathFigure.Segments>
        <PathSegmentCollection>
            <ArcSegment Size="100,100" IsLargeArc="True"
                        SweepDirection="CounterClockwise" Point="200,200" />
        </PathSegmentCollection>
    </PathFigure.Segments>
</PathFigure>

PathFigure開始点を指定する -の一部である必要があります。

Point次に、始点から 360 度を通って終点に移動する円弧の終点をアニメートできます。

于 2012-12-30T13:09:55.147 に答える