图片移动的时候为什么会抖动？

Question

<Window x:Class="ImageMoveTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       Title="MainWindow" Height="600" Width="800" WindowState="Maximized" Loaded="Window_Loaded">
    <Canvas Name="root" Background="Red" >
        <Image x:Name="img" Margin="20,20,20,77" Source="465020_linyichen2.jpg" 
         MouseWheel="img_MouseWheel"  
         MouseLeftButtonDown="img_MouseLeftButtonDown"
         MouseLeftButtonUp="img_MouseLeftButtonUp"
         MouseLeave="img_MouseLeave"
         MouseMove="MasterImage_MouseMove">
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform x:Name="sfr" />
                    <TranslateTransform x:Name="tlt" />
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
    </Canvas>
</Window>

CS代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace ImageMoveTest
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private bool isMouseLeftButtonDown = false;
        Point previousMousePoint = new Point(0, 0);

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {//居中
            //MessageBox.Show(img.ActualWidth.ToString());
            var allwidth = this.ActualWidth;
            var imgwidth = img.ActualWidth;

            var allheight = this.ActualHeight;
            var imgheight = img.ActualHeight;

            var x = allwidth - imgwidth;
            var y = allheight - imgheight;

            Canvas.SetLeft(img, x / 2);
            Canvas.SetTop(img, y / 2);
        }

        private void img_MouseWheel(object sender, MouseWheelEventArgs e)
        {
            Point centerPoint = e.GetPosition(img);

            if (sfr.ScaleX < 0.3 && sfr.ScaleY < 0.3 && e.Delta < 0)
            {
                return;
            }
            this.sfr.CenterX = centerPoint.X;
            this.sfr.CenterY = centerPoint.Y;
            sfr.ScaleX += (double)e.Delta / 2000;
            sfr.ScaleY += (double)e.Delta / 2000;
        }

        private void MasterImage_MouseMove(object sender, MouseEventArgs e)
        {
            if (this.isMouseLeftButtonDown)
            {
                this.ImageMove(img, e.GetPosition(img));
            }
        }

 

        private void ImageMove(Image image, Point position)
        {
            TranslateTransform transform = tlt;

            transform.X += position.X - this.previousMousePoint.X;
            transform.Y += position.Y - this.previousMousePoint.Y;
            this.previousMousePoint = position;

        }

        private void img_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            isMouseLeftButtonDown = true;
            this.previousMousePoint = e.GetPosition(img);
        }

        private void img_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            isMouseLeftButtonDown = false;
        }

        private void img_MouseLeave(object sender, MouseEventArgs e)
        {
            isMouseLeftButtonDown = false;
        }
    }
}

Answer 1

使用上边的代码，能够实现图片移动，但是在移动的时候图片会抖动，不明白为什么

Answer 2

因为你鼠标移动的位移量大于你让图片移动的位移量，所以导致图片和鼠标之间一直有相对移动。为什么呢？因为你取得是鼠标相当于图片移动的坐标，而不是相对于root的Canvas的坐标。你希望鼠标在图片上的位置保持不变，但你又在代码中去取他对于图片的位置来求其位移量，这里就有矛盾了。

你应该这么写：

this.ImageMove(img, e.GetPosition(root));

this.previousMousePoint = e.GetPosition(root);

---

Bob Bao [MSFT]
MSDN Community Support | Feedback to us

Answer 3

 嗯，有道理，谢谢

Answer 4

谢谢了，正需要呢，呵呵