WPF中图像控件Image的变换属性Transform:

  • 平移
  • 缩放
  • 旋转

即要想实现图片的平移、缩放、旋转,是修改它所在的Image控件的Transform变换属性。

下面在XAML中定义了Image图片的Transform属性。

<Image>
<Image.RenderTransform>
<TransformGroup>
<TranslateTransform/>
<ScaleTransform/>
<RotateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>

图像平移:

按住鼠标左键,拖拽移动图片;松开鼠标左键,完成图像平移。
MVVM将鼠标事件绑定命令Command后在控制层处理。

private Image movingObject;  // 记录当前被拖拽移动的图片
private Point StartPosition; // 本次移动开始时的坐标点位置
private Point EndPosition; // 本次移动结束时的坐标点位置 /// <summary>
/// 按下鼠标左键,准备开始拖动图片
/// </summary>
/// <param name="p"></param>
private void MouseLeftButtonDownCommand(object[] p)
{
object sender = p[0];
MouseButtonEventArgs e = p[1] as MouseButtonEventArgs;
Image img = sender as Image; movingObject = img;
StartPosition = e.GetPosition(img);
} /// <summary>
/// 按住鼠标左键,拖动图片平移
/// </summary>
/// <param name="p"></param>
private void MouseMoveCommand(object[] p)
{
object sender = p[0];
MouseEventArgs e = p[1] as MouseEventArgs;
Image img = sender as Image; if (e.LeftButton == MouseButtonState.Pressed && sender == movingObject)
{
EndPosition = e.GetPosition(img); TransformGroup tg = img.RenderTransform as TransformGroup;
var tgnew = tg.CloneCurrentValue();
if (tgnew != null)
{
TranslateTransform tt = tgnew.Children[0] as TranslateTransform; var X = EndPosition.X - StartPosition.X;
var Y = EndPosition.Y - StartPosition.Y;
tt.X += X;
tt.Y += Y;
} // 重新给图像赋值Transform变换属性
img.RenderTransform = tgnew;
}
} /// <summary>
/// 鼠标左键弹起,结束图片的拖动
/// </summary>
/// <param name="p"></param>
private void MouseLeftButtonUpCommand(object[] p)
{
object sender = p[0];
MouseButtonEventArgs e = p[1] as MouseButtonEventArgs;
Image img = sender as Image;
movingObject = null;
}

图像缩放:

界面上准备两个按钮,点击分别实现图像的放大和缩小。

/// <summary>
/// 图片放大
/// </summary>
/// <param name="img">被操作的前台Image控件</param>
public void ZoomIn(Image img)
{
TransformGroup tg = img.RenderTransform as TransformGroup;
var tgnew = tg.CloneCurrentValue();
if (tgnew != null)
{
ScaleTransform st = tgnew.Children[1] as ScaleTransform;
img.RenderTransformOrigin = new Point(0.5, 0.5);
if (st.ScaleX > 0 && st.ScaleX <= 2.0)
{
st.ScaleX += 0.05;
st.ScaleY += 0.05;
}
else if (st.ScaleX < 0 && st.ScaleX >= -2.0)
{
st.ScaleX -= 0.05;
st.ScaleY += 0.05;
}
} // 重新给图像赋值Transform变换属性
img.RenderTransform = tgnew;
} /// <summary>
/// 图片缩小
/// </summary>
/// <param name="img">被操作的前台Image控件</param>
public void ZoomOut(Image img)
{
TransformGroup tg = img.RenderTransform as TransformGroup;
var tgnew = tg.CloneCurrentValue();
if (tgnew != null)
{
ScaleTransform st = tgnew.Children[1] as ScaleTransform;
img.RenderTransformOrigin = new Point(0.5, 0.5);
if (st.ScaleX >= 0.2)
{
st.ScaleX -= 0.05;
st.ScaleY -= 0.05;
}
else if (st.ScaleX <= -0.2)
{
st.ScaleX += 0.05;
st.ScaleY -= 0.05;
}
} // 重新给图像赋值Transform变换属性
img.RenderTransform = tgnew;
}

图像旋转:

界面上准备两个按钮,点击分别实现图像的左转和右转。

/// <summary>
/// 图片左转
/// </summary>
/// <param name="img">被操作的前台Image控件</param>
public void RotateLeft(Image img)
{
TransformGroup tg = img.RenderTransform as TransformGroup;
var tgnew = tg.CloneCurrentValue();
if (tgnew != null)
{
RotateTransform rt = tgnew.Children[2] as RotateTransform;
img.RenderTransformOrigin = new Point(0.5, 0.5);
rt.Angle -= 5;
} // 重新给图像赋值Transform变换属性
img.RenderTransform = tgnew;
} /// <summary>
/// 图片右转
/// </summary>
/// <param name="img">被操作的前台Image控件</param>
public void RotateRight(Image img)
{
TransformGroup tg = img.RenderTransform as TransformGroup;
var tgnew = tg.CloneCurrentValue();
if (tgnew != null)
{
RotateTransform rt = tgnew.Children[2] as RotateTransform;
img.RenderTransformOrigin = new Point(0.5, 0.5);
rt.Angle += 5;
} // 重新给图像赋值Transform变换属性
img.RenderTransform = tgnew;
}
05-11 17:47