本章讲述:WPF Image控件旋转和平移问题;
平移响应函数在Image控件触发,移动图像,位置跳跃性大,移动一下图像就不在显示区域中,不正确,不符合实际的效果。
解决:Image控件外层添加一层控件比如Border,
<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Hidden" HorizontalAlignment="Stretch">
<Viewbox x:Name="imageview" Width="540" Height="540" Stretch="Fill" StretchDirection="Both">
<Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" PreviewMouseLeftButtonDown="MyImage_PreviewMouseLeftButtonDown" PreviewMouseMove="MyImage_PreviewMouseMove" PreviewMouseLeftButtonUp="MyImage_PreviewMouseLeftButtonUp">
<Image x:Name="MyImage" Width="540" Height="540" Source="/DSViewer;component/Images/p29.png" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" SnapsToDevicePixels="True" Stretch="Fill" >
<Image.RenderTransform>
<TransformGroup>
<SkewTransform/>
<RotateTransform x:Name="RotateAngle" Angle="{Binding RotateValue ,ElementName=RotateBtn}"/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
<Image.Clip>
<CombinedGeometry GeometryCombineMode="Intersect">
<CombinedGeometry.Geometry1>
<RectangleGeometry Rect="0,0,540,540"/>
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<EllipseGeometry Center="270,270" RadiusX="270" RadiusY="270"/>
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</Image.Clip>
</Image>
</Border>
</Viewbox>
</ScrollViewer>
C#后端处理代码
Point m_offset = new Point(0, 0);
bool m_isDragging = false;
private void MyImage_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
FrameworkElement el = (FrameworkElement)sender;
m_offset = e.GetPosition(el);
m_isDragging = true;
}
private void MyImage_PreviewMouseMove(object sender, MouseEventArgs e)
{
if (this.ZommBtn.ZoomValue <= 100.0)
return;
if (m_isDragging && e.LeftButton == MouseButtonState.Pressed)
{
this.imageview.Cursor = Cursors.SizeAll;
Point p = e.GetPosition((FrameworkElement)sender);
double x = imageview.Margin.Left + (p.X - m_offset.X);
double y = imageview.Margin.Top + (p.Y - m_offset.Y);
if (Math.Abs(x) > 10 || Math.Abs(y) > 10)
{
imageview.Margin = new Thickness(x, y, 0, 0);
}
}
}