在 WinRT 应用程序中使用矩形几何进行裁剪

Question

我以前使用 WriteableBitmapEX 库在鼠标移动的任何地方裁剪图像。好像有点慢。

我想在任何随机像素处裁剪图像，并且我想将该裁剪区域分配给另一个图像控件。

我的问题是，当我使用 clip 属性时，我只得到了被剪裁的区域，而整个图像正在运行。我希望图像完全位于背景中，但应将裁剪区域分配给图像控件。

这是代码。

 private void Image1_Tapped(object sender, TappedRoutedEventArgs e)
        {
            int CropArea = 50;
            int PointShift = CropArea / 2;
            var _rect = new RectangleGeometry();
            Point pt;
            pt = e.GetPosition(Image1);

            _rect.Rect = new Rect(pt.X - PointShift, pt.Y - PointShift, 100, 100);
            Image1.Clip = _rect;
            MagnifyTip.Image1.Source=Image1.clip; //This is what I want to do . Its not happenning. 
        }


<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Image x:Name="Image1" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" Tapped="Image1_Tapped" >
            <Image.Source >
                <BitmapImage UriSource="Assets/Jellyfish.png" />
            </Image.Source>
        </Image>
    </Grid>

欢迎任何更好的解决方案，因为我必须继续在图像周围移动手指并在我的用户控件的图像框中获取更新的逐像素裁剪图像

Answer 1

你不想在背景中剪辑你想要的图像，你想要两个单独的图像控件并且只剪辑你正在放大的图像，这是我使用 Canvas 和两个图像控件的方法。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Canvas HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Name="canvas">
        <Image Canvas.ZIndex="0"  x:Name="Image1" ImageOpened="Image1_Opened" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" Tapped="Image1_Tapped" >
            <Image.Source>
                <BitmapImage UriSource="Assets/JellyFish.png" />
            </Image.Source>
        </Image>
        <Image Canvas.ZIndex="1" x:Name="MagnifyTip" Visibility="Collapsed">
            <Image.Source >
                <BitmapImage UriSource="Assets/JellyFish.png" />
            </Image.Source>
        </Image>
    </Canvas>
</Grid>

加载背景图像后，您需要设置画布中图像的大小。

    double _scaleX = 5;
    double _scaleY = 5;
    double _croppedImageWidth = 100;
    double _croppedImageHeight = 100;

    private void Image1_Opened(object sender, RoutedEventArgs e)
    {
        this.Image1.MaxHeight = this.canvas.ActualHeight;
        this.Image1.MaxWidth = this.canvas.ActualWidth;
        this.MagnifyTip.MaxHeight = this.canvas.ActualHeight;
        this.MagnifyTip.MaxWidth = this.canvas.ActualWidth;
        this.MagnifyTip.RenderTransform = new ScaleTransform() 
        { 
            ScaleX = _scaleX,
            ScaleY = _scaleY
        };
    }

然后您可以在 Image1_Tapped 处理程序中设置放大图像的位置和比例。

    private void Image1_Tapped(object sender, TappedRoutedEventArgs e)
    {
        Point pt = e.GetPosition(this.canvas);
        this.MagnifyTip.Clip = new RectangleGeometry()
        {
            Rect = new Rect()
            {
                X = pt.X, 
                Y = pt.Y, 
                Width = _croppedImageWidth / _scaleX,
                Height = _croppedImageHeight / _scaleY
            }
        };
        Canvas.SetLeft(this.MagnifyTip, -pt.X * (_scaleX - 1));
        Canvas.SetTop(this.MagnifyTip, -pt.Y * (_scaleY - 1));

        this.MagnifyTip.Visibility = Visibility.Visible;
    }

重点是

• 使用CanvasLeft、Top 和ZIndex 属性将放大的图像覆盖在背景图像上。
• 根据点击点和比例尺大小计算放大图像的剪辑大小和位置。
• 使用ScaleTransform 放大图片。

Answer 2

裁剪的一些注意事项

1. 为图片的Clip 属性使用RectangleGeometry（您已经这样做了）
2. 调整裁剪几何时 - 使用其Transform 属性，而不是每次想要重新裁剪时都创建新几何。
3. 更新WriteableBitmap 相当慢，因此您可以不时执行此操作 - 例如当您提交裁剪矩形时，而不是像每个 PointerMove 事件那样实时提交。
4. 如果您想要实时更新，您可以
   • 将另一个 Image 元素与另一个 RectangleGeometry Clip 一起使用，变换是原始变换的缩放版本。您也可以使用原始转换的副本并缩放整个 Image。
   • 使用 DirectX 在 SwapChainPanel 中呈现转换后的输出。
5. 对于最终的高分辨率输出，您可以使用任何方法，因为处理速度不是一个因素
   • 您可以使用RenderTargetBitmap.RenderAsync() 以屏幕分辨率呈现您的裁剪图像。您可能需要将剪切的图像包装在另一个元素中，例如 Grid。
   • 您可以使用WriteableBitmap 进行处理——我相信CodePlex 上的WriteableBitmapEx project 具有旋转和裁剪的方法。这是基于 CPU 的。
   • 您可以使用 DirectX，但这可能有点过头了。
   • 您可以将 WIC 与 BitmapDecoder 一起使用，但轮换功能有限：How to resize Image in C# WinRT/winmd?