3

这个问题与我最近发布的一个问题直接相关,但我觉得方向已经发生了足够的变化,需要一个新的问题。我试图找出在画布上实时移动大量图像的最佳方法。我的 XAML 目前看起来像这样:

<UserControl.Resources>
    <DataTemplate DataType="{x:Type local:Entity}">
        <Canvas>
            <Image Canvas.Left="{Binding Location.X}"
                   Canvas.Top="{Binding Location.Y}"
                   Width="{Binding Width}"
                   Height="{Binding Height}"
                   Source="{Binding Image}" />
        </Canvas>
    </DataTemplate>
</UserControl.Resources>

<Canvas x:Name="content"
        Width="2000"
        Height="2000"
        Background="LightGreen">
    <ItemsControl Canvas.ZIndex="2" ItemsSource="{Binding Entities}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas IsItemsHost="True" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>

实体类:

[Magic]
public class Entity : ObservableObject
{
    public Entity()
    {
        Height = 16;
        Width = 16;
        Location = new Vector(Global.rand.Next(800), Global.rand.Next(800));
        Image = Global.LoadBitmap("Resources/Thing1.png");
    }

    public int Height { get; set; }
    public int Width { get; set; }
    public Vector Location { get; set; }
    public WriteableBitmap Image { get; set; }        
}

要移动对象:

private Action<Entity> action = (Entity entity) =>
{
    entity.Location = new Vector(entity.Location.X + 1, entity.Location.Y);
};

void Timer_Tick(object sender, EventArgs e)
{
    Task.Factory.StartNew(() =>
    {
        foreach (var entity in Locator.Container.Entities)
        {
            action(entity);
        }
    });
}

如果集合中的条目少于大约 400 个,则Entities移动很顺畅,但我希望能够将这个数字增加很多。如果我超过 400,运动会变得越来越不稳定。起初我认为这是运动逻辑的问题(在这一点上这并不是什么大问题),但我发现这不是问题。我添加了另一个包含 10,000 个条目的集合,并将该集合添加到与第一个集合相同的计时器循环中,但未将其包含在 XAML 中,并且 UI 的反应没有任何不同。然而,我觉得奇怪的是,如果我将 400 个条目添加到集合中,然后在 Image 设置为 400 的情况下再添加 400 个条目,null即使有一半的项目没有被绘制,移动也会变得不稳定。

那么,我该怎么做才能在画布上绘制和平滑移动更多图像呢?这是我可能想回避 WPF 和 XAML 的情况吗?如果您需要更多代码,我很乐意发布。


更新:根据 Clemens 的建议,我的EntityDataTemplate 现在看起来像这样:

<DataTemplate DataType="{x:Type local:Entity}">
    <Image Width="{Binding Width}"
           Height="{Binding Height}" 
           Source="{Binding Image}">
        <Image.RenderTransform>
            <TranslateTransform X="{Binding Location.X}" Y="{Binding Location.Y}" />
        </Image.RenderTransform>
    </Image>
</DataTemplate>

使用它可能会提高性能,但如果有的话,它是非常微妙的。另外,我注意到如果我使用DispatcherTimerfor 循环并将其设置为:

private DispatcherTimer dTimer = new DispatcherTimer();

public Loop()
{
    dTimer.Interval = TimeSpan.FromMilliseconds(30);
    dTimer.Tick += Timer_Tick;
    dTimer.Start();
}

void Timer_Tick(object sender, EventArgs e)
{
    foreach (var entity in Locator.Container.Entities)
    {
        action(entity);
    }
}

...即使有几千个项目,运动也很流畅,但无论间隔如何,都非常缓慢。如果DispatcherTimer使用 a 并且Timer_Tick看起来像这样:

void Timer_Tick(object sender, EventArgs e)
{
    Task.Factory.StartNew(() =>
    {
        foreach (var entity in Locator.Container.Entities)
        {
            action(entity);
        }
    });
}

...运动非常不稳定。我觉得奇怪的是,如果有 5,000 个条目,则 aStopwatch表明Task.Factory需要 1000 到 1400 个滴答来迭代集合。标准foreach循环需要超过 3,000 个滴答声。Task.Factory当它的速度是原来的两倍时,为什么会表现得如此糟糕?是否有不同的方法来遍历集合和/或不同的计时方法,可以允许平滑移动而不会出现任何重大减速?


更新:如果有人可以帮助我提高画布上对象实时移动的性能,或者可以在 WPF 中提出另一种实现类似结果的方法,100 赏金等待。

4

6 回答 6

3

有这么多控件在屏幕上移动,这经常不会产生平滑的结果。你需要一种完全不同的方法——自己渲染。我不确定这是否适合您,因为现在您将无法使用每个项目的控制功能(例如接收事件、拥有工具提示或使用数据模板。)但是对于如此大量的项目,其他方法是不切实际的。

这是可能看起来像的(非常)基本的实现:

更新:我已经修改了渲染器类以使用CompositionTarget.Rendering事件而不是DispatcherTimer. 每次 WPF 呈现帧(通常约为 60 fps)时都会触发此事件。虽然这会提供更平滑的结果,但它也更占用 CPU,因此请确保在不再需要动画时关闭动画。

public class ItemsRenderer : FrameworkElement
{
    private bool _isLoaded;

    public ItemsRenderer()
    {
        Loaded += OnLoaded;
        Unloaded += OnUnloaded;
    }

    private void OnLoaded(object sender, RoutedEventArgs routedEventArgs)
    {
        _isLoaded = true;
        if (IsAnimating)
        {
            Start();
        }
    }

    private void OnUnloaded(object sender, RoutedEventArgs routedEventArgs)
    {
        _isLoaded = false;
        Stop();
    }

    public bool IsAnimating
    {
        get { return (bool)GetValue(IsAnimatingProperty); }
        set { SetValue(IsAnimatingProperty, value); }
    }

    public static readonly DependencyProperty IsAnimatingProperty =
        DependencyProperty.Register("IsAnimating", typeof(bool), typeof(ItemsRenderer), new FrameworkPropertyMetadata(false, (d, e) => ((ItemsRenderer)d).OnIsAnimatingChanged((bool)e.NewValue)));

    private void OnIsAnimatingChanged(bool isAnimating)
    {
        if (_isLoaded)
        {
            Stop();
            if (isAnimating)
            {
                Start();
            }
        }
    }

    private void Start()
    {
        CompositionTarget.Rendering += CompositionTargetOnRendering;
    }

    private void Stop()
    {
        CompositionTarget.Rendering -= CompositionTargetOnRendering;
    }

    private void CompositionTargetOnRendering(object sender, EventArgs eventArgs)
    {
        InvalidateVisual();
    }

    public static readonly DependencyProperty ImageSourceProperty =
        DependencyProperty.Register("ImageSource", typeof (ImageSource), typeof (ItemsRenderer), new FrameworkPropertyMetadata());

    public ImageSource ImageSource
    {
        get { return (ImageSource) GetValue(ImageSourceProperty); }
        set { SetValue(ImageSourceProperty, value); }
    }

    public static readonly DependencyProperty ImageSizeProperty =
        DependencyProperty.Register("ImageSize", typeof(Size), typeof(ItemsRenderer), new FrameworkPropertyMetadata(Size.Empty));

    public Size ImageSize
    {
        get { return (Size) GetValue(ImageSizeProperty); }
        set { SetValue(ImageSizeProperty, value); }
    }

    public static readonly DependencyProperty ItemsSourceProperty =
        DependencyProperty.Register("ItemsSource", typeof (IEnumerable), typeof (ItemsRenderer), new FrameworkPropertyMetadata());

    public IEnumerable ItemsSource
    {
        get { return (IEnumerable) GetValue(ItemsSourceProperty); }
        set { SetValue(ItemsSourceProperty, value); }
    }

    protected override void OnRender(DrawingContext dc)
    {
        ImageSource imageSource = ImageSource;
        IEnumerable itemsSource = ItemsSource;

        if (itemsSource == null || imageSource == null) return;

        Size size = ImageSize.IsEmpty ? new Size(imageSource.Width, imageSource.Height) : ImageSize;
        foreach (var item in itemsSource)
        {
            dc.DrawImage(imageSource, new Rect(GetPoint(item), size));
        }
    }

    private Point GetPoint(object item)
    {
        var args = new ItemPointEventArgs(item);
        OnPointRequested(args);
        return args.Point;
    }

    public event EventHandler<ItemPointEventArgs> PointRequested;

    protected virtual void OnPointRequested(ItemPointEventArgs e)
    {
        EventHandler<ItemPointEventArgs> handler = PointRequested;
        if (handler != null) handler(this, e);
    }
}


public class ItemPointEventArgs : EventArgs
{
    public ItemPointEventArgs(object item)
    {
        Item = item;
    }

    public object Item { get; private set; }

    public Point Point { get; set; }
}

用法:

<my:ItemsRenderer x:Name="Renderer"
                  ImageSize="8 8"
                  ImageSource="32.png"
                  PointRequested="OnPointRequested" />

代码背后:

Renderer.ItemsSource = Enumerable.Range(0, 2000)
            .Select(t => new Item { Location = new Point(_rng.Next(800), _rng.Next(800)) }).ToArray();

private void OnPointRequested(object sender, ItemPointEventArgs e)
{
    var item = (Item) e.Item;
    item.Location = e.Point = new Point(item.Location.X + 1, item.Location.Y);
}

您可以使用该OnPointRequested方法从项目中获取任何数据(例如图像本身)。此外,不要忘记冻结图像并预先调整它们的大小。

附带说明,关于先前解决方案中的线程。当您使用 aTask时,您实际上是在将属性更新发布到另一个线程。由于您已将图像绑定到该属性,并且 WPF 元素只能从创建它们的线程更新,因此 WPF 会自动将每个更新发布到调度程序队列以在该线程上执行。这就是循环结束得更快的原因,而且您没有为更新 UI 的实际工作计时。它只会增加更多的工作。

于 2013-09-23T05:43:27.627 回答
2

在第一种优化方法中,您可以通过从 DataTemplate 中删除 Canvas 并设置Canvas.LeftCanvas.Top在一个中将 Canvas 的数量减少到一个ItemContainerStyle

<DataTemplate DataType="{x:Type local:Entity}">
    <Image Width="{Binding Width}" Height="{Binding Height}" Source="{Binding Image}"/>
</DataTemplate>

<ItemsControl ItemsSource="{Binding Entities}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas IsItemsHost="True" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Canvas.Left" Value="{Binding Location.X}"/>
            <Setter Property="Canvas.Top" Value="{Binding Location.Y}"/>
        </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl>

然后您可以替换设置Canvas.LeftCanvas.Top应用 TranslateTransform:

<ItemsControl.ItemContainerStyle>
    <Style TargetType="ContentPresenter">
        <Setter Property="RenderTransform">
            <Setter.Value>
                <TranslateTransform X="{Binding Location.X}" Y="{Binding Location.Y}"/>
            </Setter.Value>
        </Setter>
    </Style>
</ItemsControl.ItemContainerStyle>

现在,这可以类似地应用于 DataTemplate 中的 Image 控件而不是项容器。因此,您可以像这样删除ItemContainerStyle并编写 DataTemplate:

<DataTemplate DataType="{x:Type local:Entity}">
    <Image Width="{Binding Width}" Height="{Binding Height}" Source="{Binding Image}">
        <Image.RenderTransform>
            <TranslateTransform X="{Binding Location.X}" Y="{Binding Location.Y}"/>
        </Image.RenderTransform>                
    </Image>
</DataTemplate>
于 2013-09-19T09:43:17.700 回答
1

尝试使用TranslateTransform代替Canvas.Leftand Canvas.Top。和在缩放/移动现有绘图对象方面非常有效RenderTransformTranslateTransform

于 2013-09-19T05:53:26.237 回答
1

这是我在开发一个非常简单的名为Mongoose的库时必须解决的问题。我尝试了 1000 张图像并且它完全平滑(我没有自动移动图像的代码,我通过在 Surface 上拖放来手动移动它们,但你应该使用代码得到相同的结果)。

我写了一个快速示例,您可以使用该库运行(您只需要一个附加的视图模型,其中包含称为 PadContents 的任何内容的集合):

主窗口.xaml

<Window x:Class="Mongoose.Sample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        xmlns:col="clr-namespace:System.Collections;assembly=mscorlib"
        xmlns:mwc="clr-namespace:Mongoose.Windows.Controls;assembly=Mongoose.Windows"
        Icon="Resources/MongooseLogo.png"
        Title="Mongoose Sample Application" Height="1000" Width="1200">



    <mwc:Surface x:Name="surface" ItemsSource="{Binding PadContents}">
        <mwc:Surface.ItemContainerStyle>
            <Style TargetType="mwc:Pad">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <Image Source="Resources/MongooseLogo.png" Width="30" Height="30" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </mwc:Surface.ItemContainerStyle>
    </mwc:Surface>

</Window>

主窗口.xaml.cs

using System.Collections.ObjectModel;
using System.Windows;

namespace Mongoose.Sample
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = this;
        }

        public ObservableCollection<object> PadContents
        {
            get
            {
                if (padContents == null)
                {
                    padContents = new ObservableCollection<object>();
                    for (int i = 0; i < 500; i++)
                    {
                        padContents.Add("Pad #" + i);
                    }
                }
                return padContents;
            }
        }

        private ObservableCollection<object> padContents;
    }
}

这是 1000 张图片的样子:

在此处输入图像描述

Codeplex 上提供了完整的代码,因此即使您不想重用该库,您仍然可以检查代码以了解它是如何实现的。

我依靠一些技巧,但主要是使用RenderTransformand CacheMode

在我的电脑上最多可以容纳 3000 张图像。如果你想做更多,你可能不得不考虑其他方法来实现它(也许使用某种虚拟化)

祝你好运 !

编辑:

通过在 Surface.OnLoaded 方法中添加此代码:

var messageTimer = new DispatcherTimer();
messageTimer.Tick += new EventHandler(surface.messageTimer_Tick);
messageTimer.Interval = new TimeSpan(0, 0, 0, 0, 10);
messageTimer.Start();

而 Surface 类中的这个方法:

void messageTimer_Tick(object sender, EventArgs e)
{
    var pads = Canvas.Children.OfType<Pad>();
    if (pads != null && Layout != null)
    {
        foreach (var pad in pads)
        {
            pad.Position = new Point(pad.Position.X + random.Next(-1, 1), pad.Position.Y + random.Next(-1, 1));
        }
    }
}

您可以看到单独移动每个对象是完全可以的。这是一个包含 2000 个对象的小示例

在此处输入图像描述

于 2013-09-23T11:46:48.227 回答
1

这里的问题是这么多控件的渲染/创建。

第一个问题是您是否需要在画布上显示所有图像。如果是这样,我很抱歉,但我无能为力(如果您需要绘制所有项目,那么就没有办法了)。

但是,如果不是所有项目一次都在屏幕上可见 - 那么你就有希望了Virtualization。您需要编写自己的VirtualizingCanvas继承VirtualizingPanel并仅创建可见的项目。这也将允许您回收容器,从而减少大量负载。

这里有一个虚拟化画布的示例。

然后,您需要将新画布设置为您的项目面板,并设置项目以获取画布正常工作所需的信息。

于 2013-09-24T13:37:20.857 回答
0

想到的几个想法:

  1. 冻结您的位图。

  2. 当您阅读位图时,硬设置它们的大小与您显示它们的大小相同,并将其设置BitmapScalingModeLowQuality.

  3. 在更新实体的同时跟踪您的进度,如果不能,请尽早退出并在下一帧抓取它们。这也需要跟踪他们的最后一帧。

    // private int _lastEntity = -1;
    // private long _tick = 0;
    // private Stopwatch _sw = Stopwatch.StartNew();
    // private const long TimeSlice = 30;
    
    // optional: this._sw.Restart();
    var end = this._sw.ElapsedMilliseconds + TimeSlice - 1;
    
    this._tick++;
    var ee = this._lastEntity++;
    do {
        if (ee >= this._entities.Count) ee = 0;
    
        // entities would then track the last time
        // they were "run" and recalculate their movement
        // from 'tick'
        action(this._entities[ee], this._tick);
    
        if (this._sw.ElapsedMilliseconds > end) break;
    } while (ee++ != this._lastEntity);
    
    this._lastEntity = ee;
    
于 2013-09-22T23:31:12.813 回答