none
图片移动的时候为什么会抖动? RRS feed

  • 问题

  • <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;
            }
        }
    }

    2012年5月9日 6:59

答案

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

    你应该这么写:

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

    this.previousMousePoint = e.GetPosition(root);
    

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

    2012年5月10日 3:43
    版主

全部回复


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


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

    你应该这么写:

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

    this.previousMousePoint = e.GetPosition(root);
    

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

    2012年5月10日 3:43
    版主
  •  嗯,有道理,谢谢

    2012年5月10日 5:26
  • 谢谢了,正需要呢,呵呵
    2012年6月5日 6:52