Улучшение работы с изображениями (перемещение и масштабирование)

Question

Я перемещаю и увеличиваю масштабное количество (от 1 до 80) изображений (110 x 110 пикселей) синхронных сигналов. Каждое из отображаемых изображений представляет собой растровое изображение, загруженное с диска в элемент управления WPF Image. Вход для манипуляции осуществляется с помощью событий сенсорной манипуляции (ManipulationDelta).

Как только я пытаюсь манипулировать более чем несколькими изображениями (3 или 4), все начинает замедляться. Как я мог улучшить производительность моего решения?

Для манипуляции я использую следующий код:

Сенсорный ввод: Манипуляции

private void TouchManipulationContainer_ManipulationDelta(object sender, 
            ManipulationDeltaEventArgs e) 
{ 
    var scale = e.DeltaManipulation.Scale.X; 
    panAllSelected(e.DeltaManipulation.Translation.X, 
        e.DeltaManipulation.Translation.Y, scale); 
} 

private void panAllSelected(double x, double y, double scale) 
{ 
    foreach (var child in ImageGrid.Children) 
    { 
     if (child.GetType() == typeof(ImageDisplayContainer)) 
     { 
      var tds = (child as ImageDisplayContainer); 
      if (tds.IsSelected) tds.TouchDisplayControl.MoveAndZoom(x, y, scale); 
     } 
    } 
} 

изображения:

public void MoveAndZoom(double DeltaX, double DeltaY, double DeltaZoom) 
{ 
    position.X += DeltaX; 
    position.Y += DeltaY; 

    scale += (DeltaZoom - 1.0); 

    MovableImage.SetValue(ImageCanvas.LeftProperty, position.X); 
    MovableImage.SetValue(ImageCanvas.TopProperty, position.Y); 

    var x = MovableImage.GetValue(ImageCanvas.LeftProperty); 
    var y = MovableImage.GetValue(ImageCanvas.TopProperty); 
    Console.WriteLine(x + "; " + y + "; " + scale); 

    if (scale != 1.0) 
    { 
     var sizeX = ImageCanvas.ActualWidth * scale; 
     var sizeY = ImageCanvas.ActualHeight * scale; 
     var size = Math.Max(sizeX, sizeY); 

     MovableImage.Width = Math.Abs(size); 
     MovableImage.Height = Math.Abs(size); 
    } 
} 

XAML:

<Grid ClipToBounds="True"> 
    <Canvas x:Name="ImageCanvas" Background="Black"> 
     <Image x:Name="MovableImage" 
       Source="/ImageInspector3;component/Images/Data/Thumbnails/ImageViewer_Series1.png"/> 
    </Canvas> 
</Grid> 

Answer 1

Ну, 3/4 объекта и уже замедление, это звучит неплохо.

Идея Clemens не плохая. Вместо Canvas.Left и Canvas.Top объектов вы можете попробовать MatrixTransform (я видел, что это использовалось довольно много раз при работе с событиями касания).

<Image x:Name="MovableImage" 
     Source="...myPicture" 
     RenderTransform="0 0 0 0.0 0 0" /> 

То, как вы можете манипулировать Matrix:

var element = (Image)args.Source; 
MatrixTransform xform = element.RenderTransform as MatrixTransform; 
Matrix matrix = xform.Matrix; 

ManipulationDelta delta = args.DeltaManipulation; 
Point center = args.ManipulationOrigin; 

matrix.ScaleAt(delta.Scale.X, delta.Scale.Y, center.X, center.Y); 
matrix.Translate(delta.Translation.X, delta.Translation.Y); 
xform.Matrix = matrix; 

Больше ссылки: http://msdn.microsoft.com/en-us/magazine/ff898416.aspx

http://blog.andreweichacker.com/2010/04/wpf-4-0-multitouch-manipulation/