如何在 WPF 中的触摸屏上转换和裁剪图像？

Question

我正在尝试制作一些需要转换和裁剪以保存 Image 对象的图像。 我尝试使用 Image 的 IsManipulationEnabled 属性。但这仅在图像显示在前面时才有效。我制作了一个自定义控件，引用了下面的链接。我想知道如何在变换（旋转和缩放）后裁剪图像。 在触摸屏环境下工作。请帮我解决这个问题。

参考：https://github.com/ahoefling/wpf.manipulation.demo

This is the description image what I am trying to do

MainWindow.xaml

<Window x:Class="WPF.ManipulationDemo.Simple.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:c="clr-namespace:WPF.ManipulationDemo.Simple.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:WPF.ManipulationDemo.Simple"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="1080"
    Height="800"
    mc:Ignorable="d">
<Grid>
    <Grid >
        <c:TouchControl  Width="300" Height="300" ImgSource="pack://application:,,,/my.png" Opacity="0.8" IsManipulationEnabled="True" />
        <Image Source="pack://application:,,,/bgmodifythumoff.png" IsManipulationEnabled="False"  />
    </Grid>
    <!--<Grid Grid.Row="1" Grid.ColumnSpan="2" Width="1031" Height="683" >
        <Image Source="pack://application:,,,/bgmodifythumoff.png" IsManipulationEnabled="False"  />
    </Grid>-->
</Grid>

TouchControl.xaml

<UserControl x:Name="userControl" x:Class="WPF.ManipulationDemo.Simple.Controls.TouchControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:local="clr-namespace:WPF.ManipulationDemo.Simple.Controls"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         d:DesignHeight="300"
         d:DesignWidth="300"
         mc:Ignorable="d">
<Grid>
    <Image x:Name="imgSource" 
           HorizontalAlignment="Stretch" 
           VerticalAlignment="Stretch" 
           Source="{Binding ImgSource, ElementName=userControl}" 
           Margin="0" />
</Grid>

TouchControl.xaml.cs

using System.ComponentModel;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;

namespace WPF.ManipulationDemo.Simple.Controls
{
    // This class was implemented from https://blogs.msdn.microsoft.com/llobo/2009/12/21/wpf-manipulation-basics/

    /// <summary>
    /// Interaction logic for TouchControl.xaml
    /// </summary>
    public partial class TouchControl : UserControl
    {
        private TransformGroup transformGroup;
        private TranslateTransform translation;
        private ScaleTransform scale;
        private RotateTransform rotation;


        public static DependencyProperty SourceProperty = DependencyProperty.Register("ImgSource", typeof(ImageSource), typeof(TouchControl), new FrameworkPropertyMetadata(OnSourcePropertyChanged));

        [Description("ImgSource"), Category("Common Properties")]
        public ImageSource ImgSource
        {
            get { return (ImageSource)this.GetValue(SourceProperty); }
            set { this.SetValue(SourceProperty, value); }
        }

        public TouchControl()
        {
            InitializeComponent();

            transformGroup = new TransformGroup();

            translation = new TranslateTransform(0, 0);
            scale = new ScaleTransform(1, 1);
            rotation = new RotateTransform(0);


            transformGroup.Children.Add(rotation);
            transformGroup.Children.Add(scale);
            transformGroup.Children.Add(translation);


            imgSource.RenderTransform = transformGroup;
        }

        protected override void OnManipulationStarting(ManipulationStartingEventArgs e)
        {
            e.ManipulationContainer = this;
        }

        protected override void OnManipulationDelta(ManipulationDeltaEventArgs e)
        {
            // the center never changes in this sample, although we always compute it.
            Point center = new Point(
                 imgSource.RenderSize.Width / 2.0, imgSource.RenderSize.Height / 2.0);

            // apply the rotation at the center of the rectangle if it has changed
            rotation.CenterX = center.X;
            rotation.CenterY = center.Y;
            rotation.Angle += e.DeltaManipulation.Rotation;

            // Scale is always uniform, by definition, so the x and y will always have the same magnitude
            scale.CenterX = center.X;
            scale.CenterY = center.Y;
            scale.ScaleX *= e.DeltaManipulation.Scale.X;
            scale.ScaleY *= e.DeltaManipulation.Scale.Y;

            // apply translation
            translation.X += e.DeltaManipulation.Translation.X;
            translation.Y += e.DeltaManipulation.Translation.Y;
        }

        private static void OnSourcePropertyChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
        {
            TouchControl touchControl = obj as TouchControl;
            touchControl.imgSource.Source = args.NewValue as ImageSource;
        }
    }
}

Answer 1

我将蒙版从透明更改为 OpacityMask。 因此我解决了第一个变换图像。

        <Grid Grid.Row="1" Width="190">
        <Grid.OpacityMask>
            <ImageBrush x:Name="mMask" ImageSource="pack://application:,,,/mask.png"/>
        </Grid.OpacityMask>
        <Grid Name="mOrg" Background="Transparent" Width="300">
            <Image x:Name="ImageSrc" 
                   Source="{Binding TransformImage, Mode=TwoWay}"
                   IsManipulationEnabled="True"
                   RenderTransform="{Binding ImageTransform}"
                   ManipulationStarting="Image_ManipulationStarting" ManipulationDelta="Image_ManipulationDelta"/>
        </Grid>
    </Grid>

这是我更改的内容，它可以很好地转换视图中的图像（xaml） 但是，我根本无法弄清楚保存转换后的图像。 我应该使用opencv进行保存吗？ 我想知道如何在没有 opencv 库的情况下裁剪转换后的图像。