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

翻译 2017年06月28日 14:58:58

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

你可以通过使用触摸操作事件在屏幕上移动控件。让控件随着手指的移动在屏幕上移动。

首先,需要设置需要接收触摸操作事件的控件的IsManipulationEnabled 属性为true ,来开启控件接收触摸操作事件。同时还要为ManipulationStarting 和ManipulationDelta 事件注册事件处理函数。

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

上面的代码中,允许用户通过手指移动图像。我们绑定图片控件的RenderTransform 属性为一个MatrixTransform 类型的实例(后面在代码中定义)。该实例包含一个控制图像“缩放”、“旋转”和“位移”的矩阵。在我们这个例子中,我们只在ManipulationDelta事件中修改矩阵控制位移部分的矢量。

public partial class MainWindow : Window, INotifyPropertyChanged
{
    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = this;
 
        ImageTransform = new MatrixTransform(); // XAML中绑定的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;  //获取操作在屏幕上水平和垂直移动信息

        // Update matrix to reflect translation
        Matrix m = imageTransform.Matrix;
        m.Translate(trans.X, trans.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));
    }
}


触摸事件--兼容不同浏览器及不同IE版本

/* Direct all pointer events to JavaScript code. */ .touch{ -ms-touch-action: none; /*...
  • binzai325
  • binzai325
  • 2016年01月06日 15:07
  • 1296

Responding to Touch Events 响应触摸事件

Making objects move according to a preset program like the rotating triangle is useful for getting s...
  • sergeycao
  • sergeycao
  • 2013年05月08日 10:45
  • 588

starling教程-触摸事件(Touch Events)

http://www.cnblogs.com/eatan/archive/2012/02/07/2341738.html 在前面提到过,Starling是Sparrow的姊妹篇,正因为这样,...
  • shangguanyingqi
  • shangguanyingqi
  • 2014年04月08日 09:51
  • 758

jQueryMobile的(十八) 触摸事件(touch)

在 jQuery Mobile 中有一些触摸事件是可定制的。然而,这些事件仅当与支持触摸功能的设备进行交互的用户访问您的 jQuery Mobile 网站时才可用。当这些事件可用时,您可以触发任何自定...
  • bao990423420
  • bao990423420
  • 2013年11月04日 09:50
  • 4295

IOS Sent Events 事件

Did End on Exit :用户点击return或者done按钮 Editing Changed :字符增减,Cursor改变位置等 Editing Did Begin :当field得到焦点 ...
  • wyoeap
  • wyoeap
  • 2014年02月07日 15:42
  • 3149

Sencha Touch 之 DataView数据视图/走马灯(Carousel)

一、创建一个简单的DataView视图 var touchTeam = Ext.create('Ext.DataView' ,{                    fullscreen: t...
  • KINGDVC
  • KINGDVC
  • 2014年02月26日 10:11
  • 1364

彻底掌握Android的Touch触摸事件传递机制

目录 一、Touch基本知识 二、Android事件传递流程: 流程图胜千言 流程图原理,对流程图的具体解释: 三、如何写自定义touch事件: 处理一个手指: 处理多个手指: 四...
  • a_long_
  • a_long_
  • 2016年08月05日 00:11
  • 2838

Android中TouchEvent触摸事件机制

当我们的手指在Android屏幕上点击或滑动时,就会触发触摸事件TouchEvent。在App中ViewGroup和View存在多级嵌套,在最外层的是Activity,最内层的View,介于Activ...
  • sunqunsunqun
  • sunqunsunqun
  • 2015年12月20日 16:28
  • 10602

[js点击]JavaScript之原生触摸事件详解01

AJAX 浏览器与服务器之间,采用HTTP协议通信。用户在浏览器地址栏键入一个网址,或者通过网页表单向服务器提交内容,这时浏览器就会向服务器发出HTTP请求。1999年,微软公司发布IE浏览器5.0版...
  • BaiHuaXiu123
  • BaiHuaXiu123
  • 2016年11月20日 20:19
  • 4271

43个处理触摸事件的jQuery插件

随着移动端出现,Web上有很多问题出现,比如说触摸事件(Touch Event)。随着问题的出现,总是有很多解决方案的。通过jQuery插件为移动端解决触摸事件。我想你知道一些jQuery插件,或许会...
  • small_rice_
  • small_rice_
  • 2014年03月14日 23:36
  • 3281
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:#741 – 使用触摸事件移动控件(Using Touch Manipulation Events to Translate an Element)
举报原因:
原因补充:

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