XAML，WPF图像位置和裁剪问题 [英] Xaml, wpf image position and crop issue

问题描述

我有600px宽和600px高的图像。我们有三种大小的圆圈。都在中间。一些反射在其下面作为阴影。我想裁剪图像以用于显示。

I have images of 600px width and 600px height. we have three sizes of circles. all have the center in the middle. Some have reflection as shadow beneath it. I would like to crop the image for display purposes.

因此，最大的上图所示的圆形直径约为500像素，而中小型的直径较小。我在代码中知道对象类型 Product 的大小。由于大小的差异，我不得不将它们放置不同，并使用了三个占位符图像，如下所示：

So the largest circle as shown above has a diameter of about 500 pixels, but the medium and small ones have less. I know in the code which size I have of object type Product. Because of the size differences I have to place them differently and used three placeholder images for it, like this:

<Image x:Name="imgCoinHolderSmall"      
       HorizontalAlignment="Center" 
       Margin="0,495,0,0" 
       VerticalAlignment="Top" 
       Stretch="Fill" 
       Width="200" 
       Height="200"/>
<Image x:Name="imgCoinHolderMedium"     
       HorizontalAlignment="Center" 
       Margin="0,510,0,0" 
       VerticalAlignment="Top" 
       Stretch="Fill" 
       Width="200" 
       Height="200"/>
<Image x:Name="imgCoinHolderLarge"      
       HorizontalAlignment="Center" 
       Margin="0,520,0,0" 
       VerticalAlignment="Top" 
       Stretch="Fill" 
       Width="200" 
       Height="200"/>

所以我可以更改图像的属性，使其不显示此屏幕截图的红色部分：

顺便说一句，我不会在它们的原始大小（如您在xaml代码中所见），我将宽度设置为200。这只是一种显示方式，不必存储新图像。我想即时进行操作，最好在xaml中设置图像属性。 （针对所有三种大小的圆圈）

So can I change the properties of the image such that it does not display the red part of this screenshot: By the way, I do not display the images on their original size (as you can see at the xaml code) I set the width to 200. It is just a display thing, I do not have to store the new image. I would like to do it on the fly, preferably by setting image properties in the xaml. (for all three sizes of circles)

使用 CroppedBitmap 是最好的方法吗？ http://msdn.microsoft.com/en-us/library/ms752345。 aspx 顺便说一句是针对Windows rt的。

Is using the CroppedBitmap the best approach? http://msdn.microsoft.com/en-us/library/ms752345.aspx it is for windows rt by the way.

推荐答案

一种选择是使用剪贴蒙版：

<Image Source="MyImage.jpg">
    <Image.Clip>
        <RectangleGeometry Rect="10,10,80,80"></RectangleGeometry>
    </Image.Clip>
</Image>

矩形结构采用必须根据图像设置的X，Y，宽度和高度值。

The rect structure takes X,Y, Width and Height values that you have to set depending on your image.

这篇关于XAML，WPF图像位置和裁剪问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！