如何将拉伸图像的像素位置映射到原始图像？

Question

我的图像是20x20像素，当它加载时，它会拉伸以填充网格的空间，即WxH。当我点击图像时，我会收集鼠标位置。后来我用它们在20x20图像上绘制点并将其保存到文件中。但是，由于图像被拉伸，我需要将WxH图像上的鼠标位置映射到原始的20x20图像。

在MVVM中执行此操作的正确方法是什么？ 我的想法是：

1. 绑定到图像的ActualWidth和ActualHeight，然后计算原始图像与拉伸图像之间的比率。
2. 绑定到图片的ScaleX的{​​{1}}和ScaleY。但是，它始终会为ScaleTransform和ScaleX返回1。

XAML

ScaleY

CODE

<Grid>
    <Image Source="{Binding MyImage}" Stretch="Fill">
         <Image.RenderTransform>
            <ScaleTransform ScaleX="{Binding ScaleX, Mode=OneWayToSource}" ScaleY="{Binding ScaleY, Mode=OneWayToSource}" />
        </Image.RenderTransform>
    </Image>
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseLeftButtonDown">
            <cmd:EventToCommand Command="{Binding GetMouseLocationCommand}" PassEventArgsToCommand="True" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
</Grid>

Answer 1

您应该绑定到图像的ActualWidth和ActualHeight，然后计算原始图像和拉伸图像之间的比率。

由于这些是只读属性，因此需要付出一些努力。有关更多信息，请参阅以下链接：

blog post

当Image被拉伸时，将设置这些属性。 ScaleX的{​​{1}}和ScaleY属性不会。