如何在WPF中的触摸面板上变换和裁剪图像？

问题描述

我正在尝试制作一些图像，以进行转换和裁剪以保存图像对象。 我尝试使用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;
        }
    }
}

解决方法

我将蒙版从透明度更改为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>

这是我所做的更改，并且可以很好地在view（xaml）上转换图像 但是，我根本不知道保存转换后的图像。 我应该使用opencv保存吗？ 我想知道在没有opencv库的情况下裁剪转换后图像的方法。