#742&743 –使用触摸事件旋转和缩放控件

翻译 2017年06月30日 17:15:16

原文地址:https://wpf.2000things.com/2013/01/25/742-using-touch-manipulation-events-to-rotate-an-element/

在上一篇中,我们使用触摸事件移动控件,我们同样可以用类似的方法来旋转和缩放控件。

这次我们在ManipulationDelta 事件处理函数中同时对控件支持位移、旋转和缩放。事件参数中的ManipulationDelta 实例会提供位移矢量、旋转角度和缩放倍数。

下面是XAML代码:

<Canvas Name="canvMain" Background="Transparent">
    <Image Source="JamesII.jpg" Width="100"
           IsManipulationEnabled="True"
           RenderTransform="{Binding ImageTransform}"
           ManipulationStarting="Image_ManipulationStarting" ManipulationDelta="Image_ManipulationDelta"/>
</Canvas>

ManipulationDelta 事件处理函数中通过矩阵同时处理对控件的位移、旋转和缩放。

public partial class MainWindow : Window, INotifyPropertyChanged
{
    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = this;
 
        ImageTransform = new MatrixTransform();
    }
 
    private MatrixTransform imageTransform;
    public MatrixTransform ImageTransform
    {
        get { return imageTransform; }
        set
        {
            if (value != imageTransform)
            {
                imageTransform = value;
                RaisePropertyChanged("ImageTransform");
            }
        }
    }
 
    private void Image_ManipulationStarting(object sender, ManipulationStartingEventArgs e)
    {
        // Ask for manipulations to be reported relative to the canvas
        e.ManipulationContainer = canvMain;
    }
 
    private void Image_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
    {
        ManipulationDelta md = e.DeltaManipulation;
        Vector trans = md.Translation;  // 获得位移矢量
        double rotate = md.Rotation;  // 获得旋转角度
        Vector scale = md.Scale;  // 获得缩放倍数

        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);  // 旋转
        m.ScaleAt(scale.X, scale.Y, 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));
    }
}

通过这篇文章和上篇文章,我们可以让控件随手指移动、放大和旋转。但是如果我们仅仅只想控件在水平或者垂直某一个方向上移动,又或者只想控件旋转或者缩放,而没有其他操作,我们可以在ManipulationStarting 事件的处理函数中设置ManipulationStartingEventArgs.Mode 属性来控制控件随手指变换的模式。

ManipulationStartingEventArgs.Mode属性的值是一个ManipulationModes 类型的枚举。枚举成员如下:

 -  None 所有操作都不会发生

 -  Rotate 只有旋转操作

 -  Scale 只有缩放操作

 -  Translate 仅支持水平和垂直移动

 - TranslateX 仅支持水平移动

 - TranslateY 仅支持垂直移动

 - All 所有操作都支持(移动、缩放和旋转)

默认情况下它的值是All。下面的示例代码中,表示仅支持水平移动。

private void Image_ManipulationStarting(object sender, ManipulationStartingEventArgs e)
{
    // Ask for manipulations to be reported relative to the canvas
    e.ManipulationContainer = canvMain;
 
    // 仅支持水平移动
    e.Mode = ManipulationModes.TranslateX;
}

如果想要支持其中的多种触摸操作,可以使用于运算符(|)计算然后赋值:

// 支持移动和缩放
e.Mode = ManipulationModes.Translate | ManipulationModes.Scale;

相关文章推荐

#741 – 使用触摸事件移动控件(Using Touch Manipulation Events to Translate an Element)

原文地址:https://wpf.2000things.com/2013/01/24/741-using-touch-manipulation-events-to-translate-an-eleme...

安卓控件使用系列16:ImageView实现图片缩放和旋转

在安卓中使用ImageView控件对图片进行旋转和缩放操作是经常遇到的开发背景,下面我们来分享一下它的实现方法。 这个例子实现的是通过滑动滑杆来控制图片的缩放和旋转,并显示缩放的大小和旋转的角度。 ...

Android自定义控件系列九:从源码看Android触摸事件分发机制

Android触摸事件,网上也有很多文章来讲了,今天在这里想使用例子和源码相结合的方式,可能会看的更清晰一些。 对于dispatchTouchEvent和onInterceptTouc...

自定义控件之触摸事件的传递

1、dispatchTouchEvent方法: 每个

iOS开发:UITouch控件与触摸事件

UITouch 触摸事件 1、事件:UIEvent: 触摸事件:用户通过触摸设备屏幕操作对象、输入数据。支持多点触摸,包含1个到多个点触摸 晃动事件: 远程控制事件: 2、UITouch 的主要方法...

Android自定义控件系列九:从源码看Android触摸事件分发机制

请尊重原创劳动成果,转载请注明出处:http://blog.csdn.net/cyp331203/article/details/45071069,非允许请勿用于商业或盈利用途,违者必究。 ...

Android 控件的触摸事件传递与处理

了解Android控件的触摸事件传递与处理对我们日常开发中自定义控件和触摸事件冲突解决有重大意义。Android控件的触摸事件传递和处理主要有以下几个方法,下面一一介绍
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)