ホームページ > バックエンド開発 > C++ > C# を使用して WPF キャンバス全体で線画をアニメーション化する方法

C# を使用して WPF キャンバス全体で線画をアニメーション化する方法

Mary-Kate Olsen
リリース: 2025-01-05 01:53:43
オリジナル
616 人が閲覧しました

How to Animate a Line Drawing Across a WPF Canvas Using C#?

C でキャンバス上の線をアニメーション化する方法

質問: 画面全体に線をゆっくりと描画するにはどうすればよいですか? WPF プロジェクトで C# コードを使用したいと考えています。

回答:

C# でキャンバス上の線をアニメーション化するには、次の手順に従います:

  1. WPF フォームにキャンバス コントロールを作成します。
  2. アニメーション化する線を表す LineViewModel クラス。
  3. LineViewModel をキャンバス コントロールにバインドします。
  4. LineViewModel クラスで、線のアニメーション化に使用される Timer を定義します。
  5. Timer_Tick イベント ハンドラーで、ラインの座標を更新してアニメーションを作成します効果。
  6. アニメーションを開始するには、Animate プロパティを true に設定します。

ここに、提供されたツールを使用してキャンバス上に線を作成しアニメーション化する方法を示すコード スニペットの例を示します。手順:

XAML:

<Canvas x:Name="MyCanvas" Height="500" Width="500">
  <Line x:Name="MyLine" X1="0" Y1="0" X2="100" Y2="100" Stroke="Black" StrokeThickness="2"/>
</Canvas>
ログイン後にコピー

C# コード:

public partial class MainWindow : Window
{
    private LineViewModel _lineViewModel;

    public MainWindow()
    {
        InitializeComponent();

        // Create the LineViewModel.
        _lineViewModel = new LineViewModel();

        // Bind the LineViewModel to the Line control.
        MyLine.SetBinding(Line.X1Property, new Binding("X1") { Source = _lineViewModel });
        MyLine.SetBinding(Line.Y1Property, new Binding("Y1") { Source = _lineViewModel });
        MyLine.SetBinding(Line.X2Property, new Binding("X2") { Source = _lineViewModel });
        MyLine.SetBinding(Line.Y2Property, new Binding("Y2") { Source = _lineViewModel });

        // Start the animation.
        _lineViewModel.Animate = true;
    }
}

public class LineViewModel : INotifyPropertyChanged
{
    #region Timer-based Animation

    private System.Threading.Timer Timer;
    private static Random Rnd = new Random();

    private bool _animate;
    public bool Animate
    {
        get { return _animate; }
        set
        {
            _animate = value;
            NotifyPropertyChanged("Animate");
            if (value)
                StartTimer();
            else
                StopTimer();
        }
    }

    private int _animationSpeed = 1;
    public int AnimationSpeed
    {
        get { return _animationSpeed; }
        set
        {
            _animationSpeed = value;
            NotifyPropertyChanged("AnimationSpeed");
            if (Timer != null)
                Timer.Change(0, 100 / value);
        }
    }

    private static readonly List<int> _animationSpeeds = new List<int> { 1, 2, 3, 4, 5 };
    public List<int> AnimationSpeeds
    {
        get { return _animationSpeeds; }
    }

    public void StartTimer()
    {
        StopTimer();
        Timer = new Timer(x => Timer_Tick(), null, 0, 100 / AnimationSpeed);
    }

    public void StopTimer()
    {
        if (Timer != null)
        {
            Timer.Dispose();
            Timer = null;
        }
    }

    private void Timer_Tick()
    {
        X1 = X1 + Rnd.Next(-2, 3);
        Y1 = Y1 + Rnd.Next(-2, 3);
        X2 = X2 + Rnd.Next(-2, 3);
        Y2 = Y2 + Rnd.Next(-2, 3);
    }

    #endregion

    #region Coordinates

    private double _x1;
    public double X1
    {
        get { return _x1; }
        set
        {
            _x1 = value;
            NotifyPropertyChanged("X1");
        }
    }

    private double _y1;
    public double Y1
    {
        get { return _y1; }
        set
        {
            _y1 = value;
            NotifyPropertyChanged("Y1");
        }
    }

    private double _x2;
    public double X2
    {
        get { return _x2; }
        set
        {
            _x2 = value;
            NotifyPropertyChanged("X2");
        }
    }

    private double _y2;
    public double Y2
    {
        get { return _y2; }
        set
        {
            _y2 = value;
            NotifyPropertyChanged("Y2");
        }
    }

    #endregion

    #region Other Properties

    private string _name;
    public string Name
    {
        get { return _name; }
        set
        {
            _name = value;
            NotifyPropertyChanged("Name");
        }
    }

    private double _thickness;
    public double Thickness
    {
        get { return _thickness; }
        set
        {
            _thickness = value;
            NotifyPropertyChanged("Thickness");
        }
    }

    public Color Color1 { get; set; }
    public Color Color2 { get; set; }

    private double _opacity = 1;
    public double Opacity
    {
        get { return _opacity; }
        set
        {
            _opacity = value;
            NotifyPropertyChanged("Opacity");
        }
    }

    #endregion

    #region INotifyPropertyChanged

    public event PropertyChangedEventHandler PropertyChanged;

    private void NotifyPropertyChanged(string propertyName)
    {
        Application.Current.Dispatcher.BeginInvoke((Action)(() =>
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }));
    }

    #endregion
}
ログイン後にコピー

このアプローチを使用すると、次のように作成できます。カスタマイズ可能な速度でキャンバス全体にゆっくりと再描画される線。

以上がC# を使用して WPF キャンバス全体で線画をアニメーション化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート