码迷,mamicode.com
首页 > Windows程序 > 详细

WPF Multi-Touch 开发:高级触屏操作(Manipulation)

时间:2015-07-01 17:44:19      阅读:348      评论:0      收藏:0      [点我收藏+]

标签:

wpf多点触控操作关注博主:http://kb.cnblogs.com/page/71167/

WPF Multi-Touch 开发:高级触屏操作(Manipulation)

时间:2010-10-05 03:15来源:博客园 作者:李敬然 点击:
1854次

 

           

在上一篇中我们对基础触控操作有了初步了解,本篇将继续介绍触碰控制的高级操作(Manipulation),在高级操作中包含了一些特殊的触屏手势:平移、缩放、旋转,当然在WPF 中无需自行开发这些手势,只需将UI 控件的IsManipulationEnabled 属性激活,并通过以下四种事件完成各种触屏手势操作:ManipulationStarting、Manipulati
  

  在上一篇中我们对基础触控操作有了初步了解,本篇将继续介绍触碰控制的高级操作(Manipulation),在高级操作中包含了一些特殊的触屏手势:平移、缩放、旋转,当然在WPF 中无需自行开发这些手势,只需将UI 控件的IsManipulationEnabled 属性激活,并通过以下四种事件完成各种触屏手势操作:ManipulationStarting、ManipulationStarted、ManipulationDelta、ManipulationInertiaStarting、ManipulationCompleted,下图为各事件之间的工作顺序及关系。

  

技术分享

 

  创建项目

  新建项目在XAML 程序中写入下面代码,为设置ManipulationStarting、ManipulationDelta、ManipulationCompleted 事件,并在其中添加三张图片,将Image 的IsManipulationEnabled 属性均为"True",同时所有的Image 都添加了对象,用于组合平移、缩放、旋转操作。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<Window x:Class="WpfManipulation.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="500" Width="600">
    <Grid>
        <Canvas x:Name="touchPad" Background="Gray"                
                ManipulationStarting="image_ManipulationStarting"  
                ManipulationDelta="image_ManipulationDelta"
                ManipulationCompleted="image_ManipulationCompleted">
            <Image Canvas.Top="52" Canvas.Left="34" Width="200" 
                   IsManipulationEnabled="True" Source="Images/P1.jpg">
                <Image.RenderTransform>
                    <MatrixTransform></MatrixTransform>
                </Image.RenderTransform>
            </Image>
            <Image Canvas.Top="75" Canvas.Left="339" Width="200" 
                   IsManipulationEnabled="True" Source="Images/P2.jpg">
                <Image.RenderTransform>
                    <MatrixTransform></MatrixTransform>
                </Image.RenderTransform>
            </Image>
            <Image Canvas.Top="243" Canvas.Left="168" Width="200" 
                   IsManipulationEnabled="True" Source="Images/P3.jpg">
                <Image.RenderTransform>
                    <MatrixTransform></MatrixTransform>
                </Image.RenderTransform>
            </Image>
        </Canvas>
    </Grid>
</Window>

  

技术分享

 

  当触碰到Image 图片时,image_ManipulationStarting 事件将会自动触发,首先需要定义ManipulationContainer(即为touchPad),该容器的主要用于定义参考坐标,图片的任何操作均以参考坐标为准。ManipulationModes 设置可以限制哪些手势操作是程序允许的,如果没有特殊情况可设置为"All"。

1
2
3
4
5
private void image_ManipulationStarting(object sender, ManipulationStartingEventArgs e)
{
    e.ManipulationContainer = touchPad;
    e.Mode = ManipulationModes.All;
}

  ManipulationDelta 事件会在手势操作开始时触发,并且该手势需持续进行不得间断。通过FrameworkElement 获得接受操作的图片控件,将图片透明度降低到0.5,创建Matrix 用于控制图片MatrixTransform,利用Point 获得图片中心坐标点,通过ScaleAt、RotateAt、Translate 执行缩放、旋转、平移操作。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
private void image_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
    FrameworkElement element = (FrameworkElement)e.Source;
    element.Opacity = 0.5;

    Matrix matrix = ((MatrixTransform)element.RenderTransform).Matrix;

    var deltaManipulation = e.DeltaManipulation;
    
    Point center = new Point(element.ActualWidth / 2, element.ActualHeight / 2);
    center = matrix.Transform(center);

    matrix.ScaleAt(deltaManipulation.Scale.X, deltaManipulation.Scale.Y, center.X, center.Y);

    matrix.RotateAt(e.DeltaManipulation.Rotation, center.X, center.Y);

    matrix.Translate(e.DeltaManipulation.Translation.X, e.DeltaManipulation.Translation.Y);

    ((MatrixTransform)element.RenderTransform).Matrix = matrix;
}

  最后,当手指离开触摸屏即操作结束,image_ManipulationCompleted 事件触发,将图片透明度重新调整为1。

1
2
3
4
5
private void image_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
{
    FrameworkElement element = (FrameworkElement)e.Source;
    element.Opacity = 1;
}

  程序演示

 

源码下载

本文来自李敬然的博客,原文地址:http://www.cnblogs.com/gnielee/archive/2010/08/18/multi-touch-manipulatioin.html

WPF Multi-Touch 开发:高级触屏操作(Manipulation)

标签:

原文地址:http://www.cnblogs.com/changbaishan/p/4613680.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!