在 WPF 中更新 canvas

Question

我想在 canvas 上显示我移动的蚂蚁的动画。因此应该改变椭圆的位置。步骤的计算有效，但我无法在主窗口中显示椭圆位置的变化。只有在所有蚂蚁步骤计算完成后，才会显示canvas。

XAML-代码:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Canvas Name="myCanvas">
        <Ellipse x:Name="ant1" Width="11" Height="11" Stroke="Black" Fill="Red"/>
    </Canvas>
</Window>

C#代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Threading;
using System.Diagnostics;
using System.Windows.Threading;

namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();




            var random = new Random();

            var iterations = 10000;

            var numberOfAnts = 10;
            var ants = CreateAntCollection(numberOfAnts);

            // time-loop
            for (var iteration = 0; iteration < iterations; iteration++)
            {

                // move ants
                foreach (var ant in ants)
                {
                    var x = (random.Next(3) - 1) + ant.Position.X;
                    var y = (random.Next(3) - 1) + ant.Position.Y;

                    ant.Move(x, y);
                }

                // animate the ant
                // test - todo
                Debug.WriteLine(ants[0].Position.X);
                Canvas.SetLeft(ant1, ants[0].Position.X);   // movement not shown
            }
        }

        private static List<Ant> CreateAntCollection(int count)
        {
            var ants = new List<Ant>(count);

            for (var i = 0; i < count; i++)
            {
                var name = string.Format("ant-{0}", i);

                var ant = new Ant(name);

                ants.Add(ant);
            }

            return ants;
        }

    }


    class Ant
    {
        public Ant(string name)
        {
            Name = name;
            Position = new Position(80, 80);
        }

        public string Name { get; private set; }

        public Position Position { get; private set; }

        public void Move(int x, int y)
        {
            Position = new Position(x, y);
        }

        public override string ToString()
        {
            return Name;
        }
    }


    struct Position
    {
        public readonly int X;

        public readonly int Y;

        public Position(int x, int y)
        {
            X = x;
            Y = y;
        }

        public override string ToString()
        {
            return string.Format("{0},{1}", X, Y);
        }
    }
}

这 "solution" 不起作用：element.InvalidateVisual();

Answer 1

你从哪里打电话给 element.InvalidateVisual？更具体地说，哪个线程？如果您运行在 UI 线程上进行模拟，则 canvas 在完成之前不会更新。通常推荐的是使用 Dispatcher class by calling either Invoke or BeginInvoke.

正如我所说，我不知道你从哪里打来的电话，但渲染可能看起来像这样：

private void Render()
{
    Dispatcher.Invoke((Action)(() =>
    {
        element.InvalidateVisual();
    }));
}

This 似乎是从另一个线程更新 GUI 的另一个好（虽然老）问题。

仔细研究您的问题，您也应该将更新代码移至另一个线程。像现在这样在构造函数中进行所有迭代肯定会阻塞其他一切。基本上 InitializeComponent() 之后的所有内容都应该使用回调或线程来处理。

Answer 2

问题是你在运行同步运动。您需要在另一个线程中执行它。像这样：

Task.Run(() => {
    for (var iteration = 0; iteration < iterations; iteration++)
    {
        // move ants
        foreach (var ant in ants)
        {
            var x = (random.Next(3) - 1) + ant.Position.X;
            var y = (random.Next(3) - 1) + ant.Position.Y;
            ant.Move(x, y);
        }

        // animate the ant
        Debug.WriteLine(ants[0].Position.X);
        this.Dispatcher.Invoke((Action)(() =>
        {
            Canvas.SetLeft(ant1, ants[0].Position.X);
        }));
    }
});

在 WPF 中更新 canvas

Update canvas in WPF

c#

wpf

animation

canvas

redraw