【C#/WPF】Image圖檔的Transform變換：平移、縮放、旋轉

原文: 【C#/WPF】Image圖檔的Transform變換：平移、縮放、旋轉 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;
}