WPF Multi-Touch 开发:高级触屏操作(Manipulation)
原文 WPF Multi-Touch 开发:高级触屏操作(Manipulation)
在上一篇中我们对基础触控操作有了初步了解,本篇将继续介绍触碰控制的高级操作(Manipulation),在高级操作中包含了一些特殊的触屏手势:平移、缩放、旋转,当然在WPF 中无需自行开发这些手势,只需将UI 控件的IsManipulationEnabled 属性激活,并通过以下四种事件完成各种触屏手势操作:ManipulationStarting、ManipulationStarted、ManipulationDelta、ManipulationInertiaStarting、ManipulationCompleted,下图为各事件之间的工作顺序及关系。
创建项目
新建项目在XAML 程序中写入下面代码,为<Canvas>设置ManipulationStarting、ManipulationDelta、ManipulationCompleted 事件,并在其中添加三张图片,将Image 的IsManipulationEnabled 属性均为"True",同时所有的Image 都添加了<MatrixTransform>对象,用于组合平移、缩放、旋转操作。
- <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<Canvas>),该容器的主要用于定义参考坐标,图片的任何操作均以参考坐标为准。ManipulationModes 设置可以限制哪些手势操作是程序允许的,如果没有特殊情况可设置为"All"。
- 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 执行缩放、旋转、平移操作。
- 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。
- private void image_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
- {
- FrameworkElement element = (FrameworkElement)e.Source;
- element.Opacity = 1;
- }
程序演示
相关文章
1. WPF Multi-Touch 开发:Windows 7 安装多点触屏模拟器
2. WPF Multi-Touch 开发:基础触屏操作(Raw Touch)
源码下载
出处:{GnieTech} (http://www.cnblogs.com/gnielee/)
版权声明:本文的版权归作者与博客园共有。转载时须注明本文的详细链接,否则作者将保留追究其法律责任。
WPF Multi-Touch 开发:高级触屏操作(Manipulation)的更多相关文章
- WPF Multi-Touch 开发:基础触屏操作(Raw Touch)
原文 WPF Multi-Touch 开发:基础触屏操作(Raw Touch) 多点触控(Multi-Touch)就是通过与触屏设备的接触达到人与应用程序交互的操作过程.例如,生活中经常使用的触屏手机 ...
- JS的Touch事件们,触屏时的js事件
丫的,终于找到了JS在平板电脑上的事件!!! iphone.ipod Touch.ipad触屏时的js事件 1.Touch事件简介 pc上的web页面鼠标会产生onmousedown.on ...
- iphone、ipod Touch、ipad触屏时的js事件
1.Touch事件简介 pc上的web页面鼠 标会产生onmousedown.onmouseup.onmouseout.onmouseover.onmousemove的事件,但是在移动终端如 ipho ...
- html5 touch事件实现触屏页面上下滑动(二)
五一小长假哪都没去,睡了三天,今天晕晕沉沉的投入工作了,但还是做出了一点点效果 上周用html5的touch事件把简单的滑动做出来了,实现了持续页面上下滑动的效果,参考之前 的文章及代码html5 t ...
- unity3d触屏操作对象运动
using UnityEngine; using System.Collections; public class robot : MonoBehaviour { private GameObject ...
- 使用C#开发Metro 风格应用的路线图 -- 触屏操作
原文 http://www.cnblogs.com/icuit/archive/2012/05/01/2478312.html win8支持多点触摸技术,而我们在屏幕上所做的各种操作,也最终转换为输入 ...
- Appium常用操作之「微信滑屏、触屏操作」
坚持原创输出,点击蓝字关注我吧 作者:清菡 博客:oschina.云+社区.知乎等各大平台都有. 目录 一.滑屏操作 1.访问之后,马上就滑屏可以吗? 2.连续实现 2 次滑屏 3.代码 二.模拟触屏 ...
- 基于appium的模拟单点或多点触屏操作
一.单点触控 TouchAction类:将一系列的动作放在一个链条中,然后将该链条传递给服务器,服务器接受该链条后,解析各个动作,逐个执行,TouchAction类提供了以下几种方法: 短按:pres ...
- window7 触屏操作相关
一.体系概述 1.Windows Touch Input 和 Gestures消息 Windows Touch消息特性 通过在执行期间的监听和解释来使能.下面的示例展示了Windows7 上消息是怎么 ...
随机推荐
- Js动态设置Img大小
function ResizePic() { $('img').each(function () { var maxWidth = 450; // 图片最大宽度 ...
- [LeetCode]题解(python):020-Valid Parentheses
题目来源: https://leetcode.com/problems/valid-parentheses/ 题意分析: 这道题输入一段只包括括号的字符串,判断这个字符串是否已经配对.配对的规则是,每 ...
- openrisc 之 Wishbone总线学习笔记——总线特性
特性: 一,互联方式: 支持点到点.共享总线.十字交叉(Crossbar)和基于交换结构(Switch fabric)的互联. 二,数据操作方式:单次读/写操作.块读/写操作,读改写(RMW,Read ...
- jQuery File Upload blueimp with struts2 简单试用
Official Site的话随便搜索就可以去了 另外新版PHP似乎都有问题 虽然图片都可以上传 但是response报错 我下载的是8.8.7木有问题 但是8.8.7版本结合修改main. ...
- jquery 几点注意事项
jquery触发hover事件 使用 mouseenter/mouseleave/mouseover/mouseout
- (转)requirejs:杏仁的优化(almond)
使用场景 什么情况下需要使用 almond 呢?假设你手头有个基于requirejs的小项目,所有业务代码加起来就几十K(压缩后可能更小).出于性能优化的考虑,你可能在想:如果能够去掉requirej ...
- 新发现的mbstowcs, mbstowcs_s函数,转换多字节到宽字符
http://en.cppreference.com/w/c/string/multibyte/mbstowcs https://msdn.microsoft.com/fr-fr/library/ey ...
- cocos2d-x游戏开发系列教程-超级玛丽08-消息机制
在超级玛丽游戏里,地图类CMGameMap负责所有的程序逻辑,它包含了背景地图,包含了游戏元素精灵,当游戏中的精灵之间发生碰撞时,比如马里奥撞上砖头这种事情发生时,马里奥对象本身不知道怎么处理这个逻辑 ...
- MFC消息顺序
1.AfxWndProc() 该函数负责接收消息,找到消息所属的CWnd对象,然后调用AfxCallWndProc 2.AfxCallWndProc() 该函数负责保存消息(保存的内容主要 ...
- Windows 8.1 RTM初体验
Windows 8.1正式发布在10月17日,现在可以在MSDN/TechNet进行订阅下载. 操作系统版本号和Windows Server 2012 R2保持一致. 开始屏幕动态磁贴现在有4种尺寸可 ...