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

发布于 2024-11-07 10:38:30 字数 640 浏览 6 评论 0原文

我在画布上有一个图像，并且有一个 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>

谢谢

原文

I have an image on a canvas and a ScaleTranform and a TranslateTransform attached to the image's RenderTranform. So with a bit of mouse event handling I can move and zoom the image within the 350 by 450 bounds of the canvas.

How would I calculate the clipping rectangle on the original BitmapImage, to that of the visible area on the screen, after some scaling and translation. I'd like to crop the original 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>

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

咋地 2024-11-14 10:38:30

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

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

回复收藏 0 原文

初见你 2024-11-14 10:38:30

只需将通过变换对图像进行的计算应用到边界...
（并以相同的顺序进行...）

因此，如果您将 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 包含您要查找的数据！

问候，
戴夫

Simply apply the calculations done to the Image by the Transformations to the bounds...
(And do it in the same order...)

So if you Scale it up by a factor of 2 in X and Y
the resulting Canvas will be 450/2 x 350/2 (in size - origin is still unknown)

And i guess it would be easier to avoid the TranslateTransform and simply play with the
Origin of the ScaleTransform... whereas an Origin of 0 should give you an Clip-origin of 0
and a X&Y Origin of 1 will result in the image to be lower right...

so to set up some simple formula..:

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;

so newX,Y,W and H contain the data you are looking for!

regards,
dave

回复收藏 0 原文

~没有更多了~