WPF Rendertransform 发生抖动,TranslateTransform位置偏移;拖拽抖动

本文探讨了在WPF中使用TranslateTransform进行拖拽操作时出现的控件抖动问题,详细分析了原因并提供了两种解决方案:一是将源对象转换为Control控件以避免鼠标事件引起的抖动;二是针对触控事件,通过设置触控容器为父级控件来解决抖动现象。

使用场景

我们需要将控件随着鼠标拖拽,位置实时随着鼠标偏移。

在对控件进行拖拽时,使用的是TranslateTransform对Image控件进行的平移操作。

  public MainWindow()
        {
            InitializeComponent();
            fieldsImage.RenderTransform = translateT;
        }

        TranslateTransform translateT = new TranslateTransform();

 为了让控件随鼠标拖拽而移动,我们在MouseDown事件中记录下当前鼠标的 位置,并在拖拽时计算偏移量。

  <Image Margin="0"  Source="{Binding ImageSource}" RenderTransform="{Binding TransGroup}" 
                   Name="fieldsImage"  MouseDown="ContentControl_MouseDown" 
                   MouseMove="ContentControl_MouseMove" MouseWheel="ContentControl_MouseWheel"  />
   private void ContentControl_MouseDown(object sender, MouseButtonEventArgs e)
        {
            Image ctl = e.Source as Image;
            mousePosition = e.GetPosition(ctl);
<Grid Grid.Row="2" Background="Black"> <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Style="{StaticResource for_scrollviewer}"> <Grid RenderTransformOrigin="0.5,0.5"> <Grid.RenderTransform> <ScaleTransform ScaleX="{Binding ScaleValue}" ScaleY="{Binding ScaleValue}"/> </Grid.RenderTransform> <Image x:Name="img" Source="{Binding ImageSource}" Stretch="Uniform" VerticalAlignment="Center" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5"> <i:Interaction.Triggers> <i:EventTrigger EventName="MouseWheel"> <i:InvokeCommandAction Command="{Binding ImageMouseWheelScaleCommand}" PassEventArgsToCommand="True" /> </i:EventTrigger> <i:EventTrigger EventName="MouseMove"> <i:InvokeCommandAction Command="{Binding ImageMouseMoveCommand}" PassEventArgsToCommand="True" /> </i:EventTrigger> </i:Interaction.Triggers> </Image> </Grid> </ScrollViewer> </Grid> public RelayCommand<MouseWheelEventArgs> ImageMouseWheelScaleCommand => new RelayCommand<MouseWheelEventArgs>((e) => ExecuteImageMouseWheelScaleCommand(e)); private void ExecuteImageMouseWheelScaleCommand(MouseWheelEventArgs e) { const double zoomFactor = 0.1; double delta = e.Delta > 0 ? (1 + zoomFactor) : (1 - zoomFactor); ScaleValue *= delta; //ImageTransformOrigin=_imageTransformOrigin; // 可选:限制缩放范围 ScaleValue = Math.Max(0.1, Math.Min(10, ScaleValue)); } public RelayCommand<MouseEventArgs> ImageMouseMoveCommand => new RelayCommand<MouseEventArgs>((t) => ExecuteImageMouseMoveCommand(t)); private void ExecuteImageMouseMoveCommand(MouseEventArgs e) { if (e.Source is Image img) { var pos = e.GetPosition(img); if (pos.X < 0 || pos.X >= _imageWidth || pos.Y < 0 || pos.Y >= _imageHeight) return; // 计算相对比例作为 RenderTransformOrigin(例如拖动中放大以鼠标为中心) //double relativeX = pos.X / img.ActualWidth; //double relativeY = pos.Y / img.ActualHeight; //ImageTransformOrigin = new Point(relativeX, relativeY); MousePosition = "("+(int)pos.X+","+(int)pos.Y +")"; int index = ((int)pos.Y * _imageWidth + (int)pos.X) * 4; int b = _imagePixel[index]; int g = _imagePixel[index + 1]; int r = _imagePixel[index + 2]; MousePositionPixel = $"({r},{g},{b})"; int heightIndex = ((int)pos.Y * _imageWidth + (int)pos.X); MousePositionData=_imageData[heightIndex].ToString("F3"); } } 那我的这样的话如何修改
08-19
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值