在InkCanvas WPF中触摸放大，缩小和旋转的操纵事件 [英] Touch Manipulation events for Zoom-In, Zoom-out and rotate in InkCanvas WPF

问题描述

我正在WPF InkCanvas中开发应用程序。我想从InkCanvas中选择笔划，在触摸时它可以是zoomIn或者zoomOut也可以旋转。

Hi,

I'm developing the application in WPF InkCanvas. I want to select the stroke from InkCanvas and on touch it can be zoomIn or zoomOut also can rotate.

推荐答案

嗨S_Rohit，

Hi S_Rohit,

为了您的目的，我做了一个简单的演示，请参考下面的内容：

XAML：

 <Grid   x:Name="touchGrid"
                ManipulationStarting="touchGrid_ManipulationStarting"  
                ManipulationDelta="touchGrid_ManipulationDelta"
                ManipulationCompleted="touchGride_ManipulationCompleted">
        <InkCanvas  Background="AntiqueWhite"    x:Name="ink"  IsManipulationEnabled="True"  
                    PreviewTouchDown="ink_PreviewTouchDown"  
                    PreviewTouchUp="ink_PreviewTouchUp"                    
                    RenderTransform="{Binding ImageTransform}"/>
</Grid>

C＃：

 /// <summary>
    /// Interaction logic for Window12.xaml
    /// </summary>
    public partial class Window12 : Window
    {
        public Window12()
        {
            InitializeComponent();
            this.DataContext = this;
            ImageTransform = new MatrixTransform();
        }
        private List<int> dec = new List<int>();
        Point centerPoint;
 
        private void ink_PreviewTouchDown(object sender, TouchEventArgs e)
        {
            dec.Add(e.TouchDevice.Id);
            if (dec.Count == 1)
            {
                TouchPoint touchPoint = e.GetTouchPoint(ink);
                centerPoint = touchPoint.Position;
            }
            if (dec.Count > 1)
            {
                if (ink.EditingMode != InkCanvasEditingMode.None)
                {
                    ink.EditingMode = InkCanvasEditingMode.None;
                }
            }
        }
 
        private void ink_PreviewTouchUp(object sender, TouchEventArgs e)
        {
            if (dec.Count > 1)
            {
                if (ink.EditingMode == InkCanvasEditingMode.None)
                {
                    ink.EditingMode = InkCanvasEditingMode.Ink;
                }
            }
            dec.Remove(e.TouchDevice.Id);
        }
 
        private void touchGrid_ManipulationStarting(object sender, ManipulationStartingEventArgs e)
        {
            e.ManipulationContainer = ink;
            e.Mode = ManipulationModes.All;
        }
 
        private void touchGrid_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
        {
            //
            if (dec.Count < 2) return;
            // two fingers to achieve zoom
            if (dec.Count == 2)
            {
                foreach (Stroke stroke in ink.Strokes)
                {
                    Matrix matrix = new Matrix();
                    matrix.ScaleAt(e.DeltaManipulation.Scale.X, e.DeltaManipulation.Scale.Y, centerPoint.X, centerPoint.Y);
                    stroke.Transform(matrix, false);
                }
            }
            //three fingers to achieve move
            else if (dec.Count == 3)
            {
                foreach (Stroke stroke in ink.Strokes)
                {
                    Matrix matrix = new Matrix();
                    matrix.Translate(e.DeltaManipulation.Translation.X, e.DeltaManipulation.Translation.Y);
                    stroke.Transform(matrix, false);
                }
            }
            //other achieve rotate
            else
            {
                ink.ManipulationDelta += InkCanvas_ManipulationDelta;
            }
        }
 
        private void touchGride_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
        {
            //TODO some thing completed
        }
 
        private MatrixTransform imageTransform;
        public MatrixTransform ImageTransform
        {
            get { return imageTransform; }
            set
            {
                if (value != imageTransform)
                {
                    imageTransform = value;
                    RaisePropertyChanged("ImageTransform");
                }
            }
        }
 
        private void InkCanvas_ManipulationStarting(object sender, ManipulationStartingEventArgs e)
        {
            // Ask for manipulations to be reported relative to the canvas
            e.ManipulationContainer = touchGrid;
        }
 
        private void InkCanvas_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
        {
            ManipulationDelta md = e.DeltaManipulation;
            Vector trans = md.Translation;
            double rotate = md.Rotation;
 
            Matrix m = imageTransform.Matrix;
 
            // Find center of element and then transform to get current location of center
            FrameworkElement fe = e.Source as FrameworkElement;
            Point center = new Point(fe.ActualWidth / 2, fe.ActualHeight / 2);
            center = m.Transform(center);
 
            // Update matrix to reflect translation/rotation
            m.Translate(trans.X, trans.Y);
            m.RotateAt(rotate, center.X, center.Y);
 
            imageTransform.Matrix = m;
            RaisePropertyChanged("ImageTransform");
 
            e.Handled = true;
        }
 
        public event PropertyChangedEventHandler PropertyChanged;
 
        private void RaisePropertyChanged(string prop)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(prop));
        }
}

最好的问候，

Cherry

这篇关于在InkCanvas WPF中触摸放大，缩小和旋转的操纵事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！