缩放和平移后如何计算图像的剪切区域答案

【问题标题】：How to calculate the clipping area of an image after scaling and translating缩放和平移后如何计算图像的剪切区域
【发布时间】：2011-05-17 21:48:02
【问题描述】：

我在画布上有一个图像，一个 ScaleTranform 和一个 TranslateTransform 附加到图像的 RenderTranform。因此，通过一些鼠标事件处理，我可以在画布的 350 x 450 范围内移动和缩放图像。

经过一些缩放和平移后，如何计算原始 BitmapImage 上的剪切矩形到屏幕上可见区域的剪切矩形。我想裁剪原始的 BitmapImage。

<Border BorderBrush="Black" BorderThickness="2">
  <Canvas Name="canvas" ClipToBounds="True" Height="450" Width="350">
    <Image Name="image" Opacity="1" RenderTransformOrigin="0.5,0.5" Height="450" Width="350">
       <Image.Source>
          <BitmapImage UriSource="test.jpg"/>
       </Image.Source>
     </Image>
  </Canvas>
</Border>

谢谢

【问题讨论】：

标签： wpf crop image-clipping

【解决方案1】：

我认为获取当前的 ScaleTransform 值并计算出当时图像的实际大小是简单的数学运算，然后您就知道您将裁剪出一个 350x450 的框其中，您只需要使用当前的 TranslateTransform 来解决这个问题。请记住您用于这些变换的起源的东西，因为这就是您需要计算它的依据。

我上面所说的假设您在 RenderTransform 中首先有 ScaleTransform，然后是 TranslateTransform。操作顺序在这里很重要。

【讨论】：

感谢有关“顺序很重要”的提示。正如我写的@santa 有一个额外的维度，即 350x450 框只是一些值，表示框在屏幕上的大小。如果我在盒子里放一张 1000x5000 像素的图片，它仍然会默认放入盒子中，直到你开始弄乱比例。这使它变得不那么微不足道（至少对我而言）。
Hrm...图像是否总是“填充”框？换句话说，图像的纵横比是否总是与该框的纵横比相同？
这是一个统一的填充，所以图像的纵横比是图像的纵横比，与框无关。所以在开始时，根据图像的纵横比，顶部和底部或左右都有一个白色边框。
您的意思是它是 Uniform，而不是 UniformToFill，对吗？只是澄清。我认为你仍然可以做到这一点，但要做到这一点需要大量的数学运算。正如您在下面向圣诞老人提到的那样，我认为没有一种内置的方法可以解决这个问题。我要试一试数学，看看我能想出什么。

【解决方案2】：

只需将转换对图像所做的计算应用于边界... （并按照相同的顺序进行...）

因此，如果您在 X 和 Y 中将其放大 2 倍生成的 Canvas 将为 450/2 x 350/2（大小 - 来源仍然未知）

而且我想避免使用 TranslateTransform 并简单地使用 ScaleTransform 的原点......而 0 的原点应该给你 0 的剪辑原点并且 X&Y 原点为 1 将导致图像位于右下方...

所以设置一些简单的公式..：

double W = 450;
double H = 350;

double SX = 2;
double SY = 2;

double OX = .3;
double OY = .3;

double newW = W / SX;
double newH = H / SY;

double newX = (W-newW) * OX;
double newY = (H-newH) * OY;

所以 newX、Y、W 和 H 包含您要查找的数据！

问候，戴夫

【讨论】：

谢谢，但我觉得没那么简单。 350 x 450 只是“剪辑”区域（画布）的大小。图像可以像像素中的任何尺寸一样，并且默认情况下仍显示在“剪切”区域内（即缩放为 1 且无平移时）。我只是认为可能有一种方法可以将 WPF 中与像素无关的“屏幕上显示的内容”映射到源图像中的实际像素坐标。
也不会那么难适应...您能否提供一个简单的虚拟项目，并附上您希望获得可见区域的注释？我可以在上面扔几行源代码...