WPF 中Canvas圖形移動、縮放代碼

從Flash轉C#，很多內容一知半解，邊摸索邊前進，代碼粗糙，權當留個腳印。

只是想得到一個基礎的移動和縮放功能的界面，找了很久都是畫線、畫矩形等基礎形狀的代碼，移動和縮放說的並不清晰，只能自己努力來解決一下。

素材准備：

WPF項目的屏幕上放一個Canvas控件，名稱為canvas1。

代碼如下：

 

using System;
using System.Windows;
using System.Windows.Media;
using System.Windows.Input;
using System.Windows.Shapes;
using System.Windows.Controls;

namespace WpfcanvasDrawing
{
    /// <summary>
    /// MainWindow.xaml 的交互邏輯
    /// </summary>
    public partial class MainWindow : Window
    {
        //移動標志
        bool isMoving = false;
        //鼠標按下去的位置
        Point startMovePosition;

        TranslateTransform totalTranslate = new TranslateTransform();
        TranslateTransform tempTranslate = new TranslateTransform();
        ScaleTransform totalScale = new ScaleTransform();
        Double scaleLevel = 1;

        public MainWindow()
        {
            InitializeComponent();

            canvas1.Focusable = true;//重要：默認條件下不接收鼠標事件
            canvas1.HorizontalAlignment = System.Windows.HorizontalAlignment.Stretch;
            canvas1.VerticalAlignment = System.Windows.VerticalAlignment.Stretch;
            canvas1.Background = Brushes.Transparent;//.Cyan;


            DrawingLine(new Point(100, 100), new Point(300, 200));
            DrawingLine(new Point(100, 200), new Point(300, 100));
        }

        protected void DrawingLine(Point startPt, Point endPt)
        {
            LineGeometry myLineGeometry = new LineGeometry();
            myLineGeometry.StartPoint = startPt;
            myLineGeometry.EndPoint = endPt;

            Path myPath = new Path();
            myPath.Stroke = Brushes.Black;
            myPath.StrokeThickness = 1;
            myPath.Data = myLineGeometry;

            canvas1.Children.Add(myPath);
        }

        private void canvas1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {           
            startMovePosition = e.GetPosition((Canvas)sender);
            isMoving = true;
        }

        private void canvas1_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            isMoving = false;
            Point endMovePosition = e.GetPosition((Canvas)sender);

            //為了避免跳躍式的變換，單次有效變化 累加入 totalTranslate中。           
            totalTranslate.X += (endMovePosition.X - startMovePosition.X)/scaleLevel;
            totalTranslate.Y += (endMovePosition.Y - startMovePosition.Y)/scaleLevel;           
        }

        private void canvas1_MouseMove(object sender, MouseEventArgs e)
        {
            if (isMoving)
            {
                Point currentMousePosition = e.GetPosition((Canvas)sender);//當前鼠標位置
                
                Point deltaPt = new Point(0, 0);               
                deltaPt.X = (currentMousePosition.X - startMovePosition.X) /scaleLevel;                
                deltaPt.Y = (currentMousePosition.Y - startMovePosition.Y) /scaleLevel;
                
                tempTranslate.X = totalTranslate.X + deltaPt.X;
                tempTranslate.Y = totalTranslate.Y + deltaPt.Y;

                adjustGraph();
            }
        }        
        
        private void canvas1_MouseWheel(object sender, MouseWheelEventArgs e)
        {
            Point scaleCenter = e.GetPosition((Canvas)sender);

            if (e.Delta > 0)
            {
                scaleLevel *= 1.08;
            }
            else
            {
                scaleLevel /= 1.08;
            }
            //Console.WriteLine("scaleLevel: {0}", scaleLevel);

            totalScale.ScaleX = scaleLevel;
            totalScale.ScaleY = scaleLevel;
            totalScale.CenterX = scaleCenter.X;
            totalScale.CenterY = scaleCenter.Y;

            adjustGraph();
        }
       
        private void adjustGraph()
        {
            TransformGroup tfGroup = new TransformGroup();
            tfGroup.Children.Add(tempTranslate);
            tfGroup.Children.Add(totalScale);

            foreach (UIElement ue in canvas1.Children)
            {
                ue.RenderTransform = tfGroup;
            }
        }

    }
}

 

變量說明：

　　　　 //移動標志 bool isMoving = false; //鼠標按下去的位置  Point startMovePosition; TranslateTransform totalTranslate = new TranslateTransform();//多次操作中需要對總的移動量進行統計。  ScaleTransform totalScale = new ScaleTransform();//縮放變量 Double scaleLevel = 1;//縮放的級別

函數功能說明：
DrawingLine 在指定的Canvas控件中畫線，用於測試。

鼠標按下時，記錄起始移動的位置點，標記拖動操作開始 isMoving = true。
鼠標移動過程中，將有效的移動距離記錄到總移動變量 totalTranslate 當中，並對位置進行刷新。
鼠標滾輪變化時，根據滾輪方向調整縮放級別。
不同縮放級別下，屏幕中移動相同的距離，對於Canvs內的圖形來說距離不同，因此需要對鼠標移動的距離進行修正，即將移動距離除以縮放級別，這樣可以得到相對精確的移動位置。

遺留問題：
1、連續在不同位置進行縮放時，仍會有較小的抖動，細節處理上還有瑕疵。
2、使用下面的語句，可以實現canvas1自動縮放(將canvas1的寬度與高度設為Auto)。
canvas1.HorizontalAlignment = System.Windows.HorizontalAlignment.Stretch;
canvas1.VerticalAlignment = System.Windows.VerticalAlignment.Stretch;


學習太辛苦，采購點東西鼓勵一下自己，微信掃描二維碼，“香雪雜貨店”歡迎您的到來，遇到喜歡的東西盡管帶走~~