#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 设置控件 旋转,缩放 效果

1.旋转  RotateTransform rotateTransform = new RotateTransform(180); transformGroup.Children.Add(rota...
  • chr23899
  • chr23899
  • 2014年08月26日 20:25
  • 7057

[Android] 使用Matrix矩阵类对图像进行缩放、旋转、对比度、亮度处理

讲述Android图像处理技术,主要操作包括:通过打开相册里的图片,使用Matrix对图像进行缩放、旋转、移动、对比度、亮度、饱和度操作,希望对大家有所帮助. 1.Matrix 图像空间变换,包括旋转...
  • Eastmount
  • Eastmount
  • 2014年10月26日 01:56
  • 8916

UIVIEW 的旋转与缩放以及同时应用两种效果(一)

转载自:http://www.travelchu.com/2014/08/13/uiview-%E7%9A%84%E6%97%8B%E8%BD%AC%E4%B8%8E%E7%BC%A9%E6%94%B...
  • liangliang2727
  • liangliang2727
  • 2015年08月07日 00:56
  • 926

android学习记录(二)-----imageView实现图片的旋转和缩放

感觉在代码中写出解析会比较好看,我直接在程序代码中解析所用的方法吧。 MainActivity: package com.example.imageview_demo03; import and...
  • zuolovefu
  • zuolovefu
  • 2014年11月12日 18:13
  • 2136

iOS控件的缩放,平移,旋转和回到原点

#import "ViewController.h" @interface ViewController () @property (weak, nonatomic) IBOutlet UIBut...
  • young____
  • young____
  • 2015年10月04日 20:20
  • 986

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

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

iOS开发中同时识别旋转与缩放手势

iOS开发中同时识别旋转与缩放手势 今天我在使用UIRotationGestureRecognizer和UIPinchGestureRecognizer时,发现它们在默认情况下不能同时被识别。而且在...
  • dcba62
  • dcba62
  • 2015年11月21日 18:34
  • 512

[OpenGL] 桌子的平移、旋转和缩放

1)绘制立方体         考虑分别绘制六个面,先把每个正方形的坐标点存储在数组中,然后再利用循环完成绘制。(这样的绘制模式使一条边被绘制了两次,有一些优化的方法,为了逻辑更清晰没有进行优化)...
  • ZJU_fish1996
  • ZJU_fish1996
  • 2016年03月24日 22:20
  • 2377

Android中利用Matrix实现图片平移、缩放和旋转

Android中提供了drawBitmap(Bitmap bitmap, Matrix matrix, Paint paint)方法,可以传入Matrix对象实现对图片的各种操作。 Matrix的操...
  • baidu_34045013
  • baidu_34045013
  • 2016年05月06日 22:46
  • 1043

Android开发学习之ImageView手势拖拽、缩放、旋转

在Android应用中,图片随手势的拖拽、缩放、旋转在很多场景中都会用到,今天我们要做的就是在ImageView的基础上实现一个可以拖拽、缩放、转转的TouchView。...
  • qinyuanpei
  • qinyuanpei
  • 2014年01月02日 10:12
  • 9580
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:#742&743 –使用触摸事件旋转和缩放控件
举报原因:
原因补充:

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