增强图像处理(移动和缩放)性能
Enhance image manipulation (move & zoom) performance
我正在同时移动和缩放可变数量(在 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>
好吧,3/4 个对象并且已经在减速,这听起来很糟糕。
克莱门斯的想法不错。除了 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/
我正在同时移动和缩放可变数量(在 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>
好吧,3/4 个对象并且已经在减速,这听起来很糟糕。
克莱门斯的想法不错。除了 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/