UWP：在点击事件上显示完整的、未剪辑的 ImageBrush

Question

我有一系列矩形，用户可以通过将图像拖入其中来添加图像。 然后按比例缩小图像，然后用 ImageBrush 填充矩形。

我需要用户能够操纵矩形内的图像以满足他们的需求。就像任何照片拼贴应用一样。

我的问题是：如何在矩形顶部显示完整的、未屏蔽的图像，以便用户可以根据需要对其进行操作？我不知道从哪里开始。

     private async void Mask_Drop(object sender, DragEventArgs e)
    {
        Rectangle maskSq = e.OriginalSource as Rectangle;

        var maskW = maskSq.Width.ToSingle();
        var maskH = maskSq.Height.ToSingle();
        double maskX = Canvas.GetLeft(maskSq);
        double maskY = Canvas.GetTop(maskSq);

        // Image sizes for bounding to mask
        float boundH = Convert.ToSingle(size.Height);
        float boundW = Convert.ToSingle(size.Width);

        maskSq.Fill = new ImageBrush
        {
            ImageSource = new BitmapImage(new Uri("ms-appdata:///local/" + SelectedImage.Name, UriKind.Absolute)),
            Stretch = Stretch.UniformToFill
        };
   }

    private void Tap_Collage(object sender, TappedRoutedEventArgs e)
    {
        //Gets the full image from ImageBrush
        ImageBrush brush = (ImageBrush)(((Rectangle)sender).Fill);
        Rectangle rect = sender as Rectangle;

        //Mask sure rectangle does not drag, just the image brush
        rect.CanDrag = false;
        rect.StrokeThickness = 6;

        //Drag Image Functionality
        rect.ManipulationDelta += ImageManipulation.Resize_ImageEdit;
        ImageManipulation.ImageEdit_Drag = new TranslateTransform();
        brush.Transform = ImageManipulation.ImageEdit_Drag;

        //Zoom Image Functionality
        ImageManipulation.ImageEdit_Zoom = new ScaleTransform();
        brush.RelativeTransform = ImageManipulation.ImageEdit_Zoom;

    }

类

public static class ImageManipulation
{
    public static TranslateTransform ImageEdit_Drag;
    public static ScaleTransform ImageEdit_Zoom;
    public static RotateTransform ImageEdit_Rotate;

    public static void Resize_ImageEdit(object sender, ManipulationDeltaRoutedEventArgs e)
    {
        ImageEdit_Drag.X += e.Delta.Translation.X;
        ImageEdit_Drag.Y += e.Delta.Translation.Y;

        ImageEdit_Zoom.ScaleX *= e.Delta.Scale;
        ImageEdit_Zoom.ScaleY *= e.Delta.Scale;

        if (ImageEdit_Zoom.ScaleX < 1.0)
        {
            ImageEdit_Zoom.ScaleX = 1.0;
            ImageEdit_Zoom.ScaleY = 1.0;
        }

        ImageEdit_Rotate.Angle += e.Delta.Rotation;
    }

}

XAML

        <ItemsControl.ItemTemplate>
            <DataTemplate x:DataType="local:CollageGrid">
                <Rectangle Width="{Binding CollageW}" Height="{Binding CollageH}" AllowDrop="True" CanDrag="True" Fill="Transparent"
                    Drop="Mask_Drop"  
                    DragOver="Mask_DragOver"
                    ManipulationMode="TranslateX, TranslateY" Stroke="Black" StrokeThickness="2" DragEnter="Mask_DragEnter" DragLeave="Mask_DragLeave" Tapped="Tap_Collage">
                    <Rectangle.RenderTransform>
                        <TranslateTransform X="{Binding CollageX}" Y="{Binding CollageY}"/>
                    </Rectangle.RenderTransform>
                </Rectangle>
            </DataTemplate>
        </ItemsControl.ItemTemplate>

我希望实现的示例：

目前的样子：

Answer 1

您可以尝试将矩形替换为Polyline 来绘制矩形，这样您就可以访问矩形底部的图像。

<Grid>
    <Image Source="Assets/image1.jpg" Width="800"
           Height="400" Tapped="Image_Tapped" />
    <Polyline Stroke="Black" HorizontalAlignment="Center"
              VerticalAlignment="Center"
    StrokeThickness="4" Tapped="Polyline_Tapped"
    Points="0,0,0,200,200,200,200,0,0,0" />
</Grid>

---更新---

UniformToFill 将导致图像调整大小以填充目标尺寸，同时保留其原始纵横比。如果目标矩形的纵横比与源不同，源内容将被剪裁以适应目标尺寸。所以不适合你的要求。您应该手动缩放图像以使图像适合您的矩形边框之一，并将其​​他部分保持在矩形之外。

好像你把图片作为矩形的背景图片刷，矩形外没有其他地方可以显示图片。所以我认为，我们可能会考虑一个新的场景。

正如我之前的回复，使用 Image 控件显示图像，Polylines 在 Image 上方绘制一个 Rectangle，这样我们就可以使用操作事件来操作 Rectangle 下方的 Image 以适应矩形，同时我们也可以使用xaml 布局上的社区工具包BackdropBlurBrush 用于模糊外部图像。