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将导致调整图像大小以填充目标尺寸，同时保留其原始纵横比。如果目标矩形的宽高比与源矩形不同，则将剪切源内容以适合目标尺寸。因此，它不适合您的要求。您应该手动缩放图像以使图像适合矩形的边框之一，并使其他部分不在矩形的外面。

似乎您将图像作为Rectangle的背景图像画笔放置，没有其他地方可以在Rectangle中显示图像。因此，我认为，我们可能会考虑采用新方案。

作为我以前的答复，使用“图像”控件显示图像，并使用“折线”在图像上方绘制矩形，以便我们可以使用操纵事件来操作矩形下方的图像以适应矩形，同时我们也可以使用xaml布局上的社区工具包BackdropBlurBrush来模糊外部图像。

UWP：在发生事件时显示完整，未剪切的ImageBrush

1 个答案: