wpf - 缩放中心到鼠标位置图像
问题描述
我一直在关注这里投票最多的答案。 平移和缩放图像(带有 ZoomBorder.cs 的图像)。
如果我将其包含在我的项目中,一切都会正常工作。但是我的项目是一个 ReactiveUI 应用程序,我努力使用 ReactiveUI 设计模式复制该代码。
到目前为止我做了什么:
创建了一个新的用户控件
<UserControl x:Class="ImageViewer.Controls.ZoomControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:ImageViewer.Controls"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Border BorderThickness="10" BorderBrush="Red">
<Image x:Name="RenderingImage" RenderTransformOrigin="0,0" Stretch="None" Source="{Binding}" ClipToBounds="True">
<Image.LayoutTransform>
<TransformGroup>
<ScaleTransform x:Name="ImageScale" ScaleX="{Binding}" ScaleY="{Binding}"/>
<TranslateTransform x:Name="ImageTranslate" X="{Binding}" Y="{Binding}" />
</TransformGroup>
</Image.LayoutTransform>
</Image>
</Border>
</UserControl>
在 View->ViewModel 之间添加了绑定
public partial class ZoomControl : IViewFor<ZoomControlViewModel>
{
public static readonly DependencyProperty ViewModelProperty = DependencyProperty
.Register(nameof(ViewModel), typeof(ZoomControlViewModel), typeof(ZoomControl), null);
public ZoomControl()
{
InitializeComponent();
this.DataContextChanged += (sender, args) => ViewModel = DataContext as ZoomControlViewModel;
this.WhenActivated(cleanup =>
{
this.OneWayBind(ViewModel, vm => vm.ImageSource, v => v.RenderingImage.Source).DisposeWith(cleanup);
this.OneWayBind(ViewModel, vm => vm.ScaleX, v => v.ImageScale.ScaleX).DisposeWith(cleanup);
this.OneWayBind(ViewModel, vm => vm.ScaleY, v => v.ImageScale.ScaleY).DisposeWith(cleanup);
this.OneWayBind(ViewModel, vm => vm.TranslateX, v => v.ImageTranslate.X).DisposeWith(cleanup);
this.OneWayBind(ViewModel, vm => vm.TranslateY, v => v.ImageTranslate.Y).DisposeWith(cleanup);
RenderingImage.Events().MouseWheel.Select(e => new Tuple<int, Point>(e.Delta, e.GetPosition(RenderingImage))).InvokeCommand(ViewModel.ZoomAction).DisposeWith(cleanup);
});
}
public ZoomControlViewModel ViewModel { get => (ZoomControlViewModel)GetValue(ViewModelProperty); set => SetValue(ViewModelProperty, value); }
object IViewFor.ViewModel { get => ViewModel; set => ViewModel = (ZoomControlViewModel)value; }
}
在视图模型中,我有像这样实现的缩放命令。
public ZoomControlViewModel()
{
ZoomAction = ReactiveCommand.Create<Tuple<int, Point>>(z => Zoom(z));
}
private void Zoom(Tuple<int, Point> deltaArgs)
{
int delta = deltaArgs.Item1;
Point relativePosition = deltaArgs.Item2;
//var ScaleTransform = GetScaleTransform();
//var TranslateTransform = GetTranslateTransform();
double zoom = delta > 0 ? .2 : -.2;
if (!(delta > 0) && (ScaleX < .4 || ScaleY < .4))
return;
double absoluteX;
double absoluteY;
absoluteX = relativePosition.X * ScaleX + TranslateX;
absoluteY = relativePosition.Y * ScaleY + TranslateY;
ScaleX += zoom;
ScaleY += zoom;
TranslateX = absoluteX - relativePosition.X * ScaleX;
TranslateY = absoluteY - relativePosition.Y * ScaleY;
}
现在我的问题。对于上面的这个例子,缩放效果很好,但它不会缩放到鼠标位置,而是缩放到图像的左上角。
据我所知(这可能是问题所在)更改图像的TranslateTransform(TranslateX和TranslateY)应该将我缩放到当前鼠标位置。
任何提示将不胜感激。
解决方案
推荐阅读
- mysql - 具有两个联结表的表的主键/外键
- django - 在 Formwizard 中动态填充 ChoiceField Formset
- html - 使用 VBA 访问搜索栏
- python - 由于代码错误,无法完成hackerrank问题
- javascript - 实时客户信息同步、最佳实践和建议
- android - 当android应用程序进入后台时,前台服务中的计划任务未按计划运行
- nginx - 使用 uwsgi 进行生产中的 Pytorch 模型预测
- python - 如何将字符串转换为结构化表格?
- typescript - 使用导入的常量键入类属性
- git - 如何从 github 上的先前提交创建新分支