0

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

4

2 に答える 2

1

現在の ScaleTransform 値を取得し、その時点での画像の実際のサイズを把握するのは簡単な計算だと思います。そうすれば、350x450 のボックスがあり、そこから切り取ることができます。それを理解するには、現在の TranslateTransform を使用するだけです。これらの変換の元に何を使用しているのかを覚えておいてください。それが計算の元になる必要があるからです。

上で述べたことは、RenderTransform に最初に ScaleTransform があり、2 番目に TranslateTransform があることを前提としています。ここでは操作の順序が重要です。

于 2011-05-17T13:48:02.807 に答える
0

変換によって画像に行われた計算を境界に適用するだけです...（そして同じ順序でそれを行います...）

したがって、X と Y で 2 倍に拡大すると、結果のキャンバスは 450/2 x 350/2 になります (サイズ - 起源はまだ不明です)。

そして、TranslateTransform を回避し、単純に ScaleTransform の Origin で遊ぶ方が簡単だと思います...一方、0 の Origin は 0 の Clip-Origin を提供し、1 の X&Y Origin は画像になります右下...

簡単な式を設定するには..：

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 には、探しているデータが含まれています。

よろしく、デイブ

于 2011-05-17T13:45:54.097 に答える