#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;

WPF中如何创建多线程,响应速度更快

http://msdn.microsoft.com/zh-cn/magazine/cc163328.aspxhttp://www.a2zdotnet.com/View.aspx?Id=93两篇文章。 ...
  • kissjob
  • kissjob
  • 2010年09月10日 09:58
  • 1345

#711 – 在拖拽的过程中改变鼠标样式(Changing the Mouse Cursor While Dragging)

原文地址:https://wpf.2000things.com/2012/12/13/711-changing-the-mouse-cursor-while-dragging/ 在WPF拖拽的过程中,...

#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...

拖动圆形控件之内响应触摸事件

  • 2016年05月04日 16:32
  • 21.17MB
  • 下载

视图响应触摸事件的缩放效果

对于可点击的控件,在按下后,view缩小,在抬起后恢复到原有大小。并且判断,如果拇指已经划出控件,则不响应事件,并且控件也会恢复到原有大小。...

【Android开发小记--9】触摸事件---实现双指缩放图片

关于触摸事件 覆写 onTouchEvent(MotionEvent event) 方法: @Override public boolean onTouchEvent(MotionEv...

unity 触摸事件 移动,缩放,以及相机移动超出边界

最近在做触摸这一块,由于公司是要求是发布webgl,于是就尝试着做,后来发现谷歌支持触摸事件,火狐浏览器不支持触摸。 虽然花了很多心思把这块做好,不能用,但还是觉有必要记下来,触摸缩放参考雨松的博客。...

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

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

QML使用PinchArea实现捏拉缩放与旋转并单手拖放控件

因为要实现一个类似微信换头像的功能,所以使用到了背景图片的捏拉缩放 并且还要能单手拖放控件! 根据查阅文档,了解到要实现捏拉缩放可以使用PinchArea来实现,当人也 可以自己事件,这边就直接用系统...
  • CLinuxF
  • CLinuxF
  • 2017年11月11日 15:10
  • 549
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:#742&743 –使用触摸事件旋转和缩放控件
举报原因:
原因补充:

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