Блог

Я пытаюсь создать некоторое изображение, необходимое для преобразования и обрезки сохраняемого объекта изображения. Я попытался использовать свойство IsManipulationEnabled изображения. но это работает только тогда, когда изображение выводится на передний план. Я настроил элемент управления, на который ссылается ссылка ниже. и я хотел бы знать, как обрезать изображение после преобразования (поворот и масштабирование). работа в среде сенсорной панели. пожалуйста, помогите мне решить эту тему.

ссылка:https://github.com/ahoefling/wpf.manipulation.demo

Это изображение описания того, что я пытаюсь сделать

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>
  

Это то, что я изменил, и оно хорошо работает, преобразуя изображение при просмотре (xaml)
Однако я вообще не могу понять, как сохранить преобразованное изображение.
Должен ли я использовать opencv для сохранения?
Я хотел бы знать, как обрезать преобразованное изображение без библиотеки opencv.