Pages: 2/2
主题 : 发现多点触摸有部分事件丢失，不知是否bug
级别: 精灵王
可可豆: 3285 CB
威望: 3285 点
在线时间: 1891(时)
发自: Web Page
已经修复了
级别: 新手上路
UID: 139947
可可豆: 181 CB
威望: 124 点
在线时间: 61(时)
发自: Web Page
引用 引用第10楼dualface于 18:00发表的&&:已经修复了 感谢廖哥，晚上我回去再拿真机试一试~
级别: 精灵王
可可豆: 3285 CB
威望: 3285 点
在线时间: 1891(时)
发自: Web Page
级别: 骑士
可可豆: 859 CB
威望: 830 点
在线时间: 371(时)
发自: Web Page
&&&& 哎。。。。。。。。。。。。。。quick和这个网站一样，好难用
级别: 精灵王
可可豆: 3285 CB
威望: 3285 点
在线时间: 1891(时)
发自: Web Page
回 13楼(avi9111) 的帖子
别用了，早点解脱
Pages: 2/2
关注本帖(如果有新回复会站内信通知您)
个人IDP证书一年费用？ 正确答案:99美金
发帖、回帖都会得到可观的积分奖励。
按"Ctrl+Enter"直接提交
关注CocoaChina
关注微信 每日推荐
扫一扫 浏览移动版第二十二讲：在Cocos2d-x中如何响应单点和多点触摸事件
移动时代，手机很重要的一部分就是可以人机交互，玩家通过手指在屏幕上移动点击与游戏进行互动，传达信息。相比PC上鼠标的输入，这种触控能带给用户更真实的体验，所以触摸事件也是游戏中不可缺少的部分，并且随着手机硬件的不断提升，现在市场上大部分手机屏幕也支持多点触摸。本节视频将介绍在引擎中如何响应单点和多点触摸事件。
////////////////////11&
class MyScene : public CCLayer
&MyScene(void);
&~MyScene(void);
&virtual bool init();
&static CCScene *scene();
&void menuCallback(CCObject* pSender);
&virtual void
onEnter();
&virtual void onExit();
&virtual bool
ccTouchBegan(CCTouch *pTouch,CCEvent
*event);&//第一次触屏事件
&virtual void ccTouchMoved(CCTouch *pTouch,CCEvent
*event);&//滑动操作
&virtual void CCTouchEnded(CCTouch *pTouch,CCEvent
*event);&//当离开屏幕时候，响应的事件
&virtual void ccTouchCancelled(CCTouch
*pTouch,CCEvent *event);&//取消
&CCSprite *
&CREATE_FUNC(MyScene);
//////////////////////////////////////////////
void MyScene:: onEnter()
&CCLayer::onEnter();
&CCDirector::sharedDirector()-&getTouchDispatcher()-&addTargetedDelegate(this,0,true);
&&//1,委托目标，2，值越小，优先级别越高，如果0,按钮最先被响应。3，是否拦截后面的操作
void MyScene::onExit()
&CCLayer::onExit();
&CCDirector::sharedDirector()-&getTouchDispatcher()-&removeDelegate(this);
bool MyScene:: ccTouchBegan(CCTouch *pTouch,CCEvent
*event)&//第一次触屏事件
&CCPoint pos =
pTouch-&getLocation();//返回OPenGL坐标
CCSprite::create("icon.png");&//创建一个精灵
&sp-&setPosition(pos);
&addChild(sp);
&CCLOG("TouchBegan");
//true,继续响应后面的，false,就不响应后面的了
void MyScene::ccTouchMoved(CCTouch *pTouch,CCEvent
*event)&//滑动操作
&CCPoint pos =
pTouch-&getLocation();//返回OPenGL坐标
&sp-&setPosition(pos);
&CCLOG("TouchMoved");
void MyScene::CCTouchEnded(CCTouch *pTouch,CCEvent
*event)&//当离开屏幕时候，响应的事件
&CCLOG("TouchEnded");
void MyScene::ccTouchCancelled(CCTouch *pTouch,CCEvent
*event)&//取消
&CCLOG("TouchCancelled");
//////////////多点触控&
virtual void ccTouchesBegan(CCSet *pTouches,CCEvent *event);
&virtual void ccTouchesMoved(CCSet
*pTouches,CCEvent *event);
&virtual void ccTouchesEnded(CCSet
*pTouches,CCEvent *event);
void MyScene::ccTouchesBegan(CCSet *pTouches,CCEvent
*event)//得到每个触摸点
&CCSetIterator iter = pTouches-&begin();
&for(;iter != pTouches-&end(); iter++)
&&CCTouch *pTouch =
(CCTouch*)(*iter);
&&CCPoint pos =
pTouch-&getLocation();
&&CCSprite *sp =
CCSprite::create("icon.png");
&&sp-&setPosition(pos);
&&addChild(sp);
//////////////
void MyScene::ccTouchesBegan(CCSet *pTouches,CCEvent
*event)//得到每个触摸点
&//多点触控也可设置成单点触控
CCTouch *touch =
(CCTouch*)pTouches-&anyObject();
&CCPoint pos = touch-&getStartLocation();
&CCSprite *sp =
CCSprite::create("icon.png");
&sp-&setPosition(pos);
&addChild(sp)；
void MyScene::ccTouchesMoved(CCSet *pTouches,CCEvent *event)
void MyScene::ccTouchesEnded(CCSet *pTouches,CCEvent *event)
//////////////333
void MyScene::ccTouchesBegan(CCSet *pTouches,CCEvent
*event)//得到每个触摸点
&CCSetIterator iter = pTouches-&begin();
&for(;iter != pTouches-&end(); iter++)
&&CCTouch *pTouch =
(CCTouch*)(*iter);
&&CCPoint pos =
pTouch-&getLocation();
&&pTouch-&getID();//可以得到有几个点
&//CCTouch *touch =
(CCTouch*)pTouches-&anyObject();
&//CCPoint pos =
touch-&getStartLocation();
&//CCSprite *sp =
CCSprite::create("icon.png");
&//sp-&setPosition(pos);
&//addChild(sp);
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。手机交互（6）
触摸屏是现在所有智能手机的标配，还包括各种平板设备，而且很多桌面也慢慢在开始支持触摸操作。要开发支持触摸屏设备的 Web 应用，我们需要借助浏览器的触摸事件来实线。
下图是各种触摸事件说明：
本文我们介绍 11 个用来处理触摸事件以及支持多点触摸的 JS 库：
，OSCHINA原创编译
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：107790次
积分：1238
积分：1238
排名：千里之外
转载：68篇
评论：12条
(2)(7)(6)(1)(2)(1)(5)(1)(1)(3)(2)(4)(9)(4)(3)(7)(4)(1)(1)(3)(5)(1)(1)针对多点触控浏览器开展的开发 - Web前端当前位置:& &&&针对多点触控浏览器开展的开发针对多点触控浏览器开展的开发&&网友分享于：&&浏览：3次针对多点触控浏览器进行的开发
转自 http://select.yeeyan.org/view/991
在本文中，我会深入研究iOS和Android设备提供的触摸事件API，探索一下可以构建哪些类型的应用，给出一些最佳做法，并论及一些使得可触控应用（touch-enabled application）的开发变得更加容易的有用技术。
诸如智能手机和平板电脑一类的移动设备通常会有一个电容式触摸屏（capacitive touch-sensitive screen），以捕捉用户的手指所做的交互。随着移动网络的发展，其能够支持越来越复杂的应用，web开发者需要一种方法来处理这些事件。例如，几乎所有的快节奏游戏都需要玩家一次按下多个按钮，这种方式，在触摸屏情况下，意味着多点触摸。
Apple在iOS 2.0中引入了触摸事件API，Android正迎头赶上这一事实标准，缩小差距。最近一个W3C工作组正合力制定这一触摸事件规范。
在本文中，我会深入研究iOS和Android设备提供的触摸事件API，探索一下可以构建哪些类型的应用，给出一些最佳做法，并论及一些使得可触控应用（touch-enabled application）的开发变得更加容易的有用技术。
三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件：
1. touchstart：手指放在一个DOM元素上。2. touchmove：手指拖曳一个DOM元素。3. touchend：手指从一个DOM元素上移开。
每个触摸事件都包括了三个触摸列表：
1. touches：当前位于屏幕上的所有手指的一个列表。2. targetTouches：位于当前DOM元素上的手指的一个列表。3. changedTouches：涉及当前事件的手指的一个列表。
例如，在一个touchend事件中，这就会是移开的手指。
这些列表由包含了触摸信息的对象组成：
1. identifier：一个数值，唯一标识触摸会话（touch session）中的当前手指。2. target：DOM元素，是动作所针对的目标。3. 客户/页面/屏幕坐标：动作在屏幕上发生的位置。4. 半径坐标和 rotationAngle：画出大约相当于手指形状的椭圆形。
可触控应用
touchstart、touchmove和touchend事件提供了一组足够丰富的功能来支持几乎是任何类型的基于触摸的交互——其中包括常见的多点触摸手势，比如说捏缩放、旋转等待。
下面的这段代码让你使用单指触摸来四处拖曳一个DOM元素：
var obj = document.getElementById('id');obj.addEventListener('touchmove', function(event) {// 如果这个元素的位置内只有一个手指的话if (event.targetTouches.length == 1) {var touch = event.targetTouches[0];// 把元素放在手指所在的位置obj.style.left = touch.pageX + 'px';obj.style.top = touch.pageY + 'px';}}, false);
下面是一个示例，该例子显示了屏幕上当前所有的触点，它的作用就是用来感受一下设备的响应性。
// 设置画布并通过ctx变量来暴露上下文canvas.addEventListener('touchmove', function(event) {for (var i = 0; i & event.touches. i++) {var touch = event.touches[i];ctx.beginPath();ctx.arc(touch.pageX, touch.pageY, 20, 0, 2*Math.PI, true);ctx.fill();ctx.stroke();}}, false);
到处都有着许多有意思的多点触摸演示，比如说这个由Paul Irish和其他人实现的基于画布的绘画演示。
还有Browser Ninja，一个技术演示，是一个使用了CSS3的转换、过渡和画布的Fruit Ninja克隆。
缺省的多点触摸设置不是特别的好用，因为你的滑动和手势往往与浏览器的行为有关联，比如说滚动和缩放。
要禁用缩放功能的话，使用下面的元标记设置你的视图区（viewport），这样其对于用户来说就是不可伸缩的了：
content="width=device-width, initial-scale=1.0, user-scalable=no"&
看看这篇关于移动HTML 5的文章，了解更多关于视图区设置的信息。
一些移动设备有缺省的touchmove行为，比如说经典的iOS overscroll效果，当滚动超出了内容的界限时就引发视图反弹。这种做法在许多多点触控应用中会带来混乱，但要禁用它很容易。
document.body.addEventListener('touchmove', function(event) {event.preventDefault();}, false);
如果你正在编写的多点触控应用涉及了复杂的多指手势的话，要小心地考虑如何响应触摸事件，因为一次要处理这么多的事情。考虑一下前面一节中的在屏幕上画出所有触点的例子，你可以在有触摸输入的时候就立刻进行绘制：
canvas.addEventListener('touchmove', function(event) {renderTouches(event.touches);},
不过这一技术并不是要随着屏幕上的手指个数的增多而扩充，替代做法是，可以跟踪所有的手指，然后在一个循环中做渲染，这样可获得更好的性能：
var touches = []canvas.addEventListener('touchmove', function(event) {touches = event.}, false);// 设置一个每秒60帧的定时器timer = setInterval(function() {renderTouches(touches);}, 15);
提示：setInterval不太适合于动画，因为它没有考虑到浏览器自己的渲染循环。现代的桌面浏览器提供了requestAnimationFrame这一函数，基于性能和电池工作时间原因，这是一个更好的选择。一但浏览器提供了对该函数的支持，那将是首选的处理事情的方式。
使用targetTouches和changedTouches
要记住的一点是，event.touches是与屏幕接触的所有手指的一个数组，而不仅是位于目标DOM元素上的那些。你可能会发现使用 event.targetTouches和event.changedTouches来代替event.touches更有用一些。
最后一点，因为你是在为移动设备做开发，因此你应该要留心移动的最佳做法，这些在Eric Bidelman的文章中有论及，以及要了解这一W3C文档。
遗憾的是，触摸事件的实现在完备性和质量方面的差别很大。我编写了一个诊断脚本来显示一些关于触摸API实现的基本信息，其中包括哪些事件是支持的，以及touchmove事件触发的解决方案。我在Nexus One和Nexus S硬件上测试了Android 2.3.3，在Xoom上测试了Android 3.0.1，以及在iPad和iPhone上测试了iOS 4.2。
简而言之，所有被测试的浏览器都支持touchstart、touchend和touchmove事件。
规范提供了额外的三个触摸事件，但被测试的浏览器没有支持它们：
1. touchenter：移动的手指进入一个DOM元素。2. toucheleave：移动手指离开一个DOM元素。3. touchcancel：触摸被中断（实现规范）。被测试的浏览器还在每个触摸列表内部都提供了touches、targetTouches和changedTouches列表。不过，被测试的浏览器没有支持 radiusX、radiusY或是rotationAngle属性，这些属性指明触摸屏幕的手指的形状。在一次touchmove期间，事件大约一秒钟触发60次，所有的被测试设备都是这样。
Android 2.3.3 (Nexus)
Android的Gingerbread浏览器（在Nexus One和Nexus S上测试）不支持多点触摸，这是一个已知的问题。
Android 3.0.1 (Xoom)
Xoom的浏览器对多点触摸有一个基本的支持，不过只能是在单个的DOM元素上起作用。浏览器不能正确响应同时发生在不同DOM元素上的两处触摸，换句话说，下面的代码会对两个同时发生的触摸的给出反应：
obj1.addEventListener('touchmove', function(event) {for (var i = 0; i & event.targetT i++) {var touch = event.targetTouches[i];console.log('touched ' + touch.identifier);}}, false);
但下面的代码则不会：
var objs = [obj1, obj2];for (var i = 0; i & objs. i++) {var obj = objs[i];obj.addEventListener('touchmove', function(event) {if (event.targetTouches.length == 1) {console.log('touched ' + event.targetTouches[0].identifier);}}, false);}
iOS 4.x (iPad, iPhone)
iOS设备完全支持多点触摸，能够跟踪多个手指，并在浏览器中提供一个非常敏感的触摸体验。
开发者工具
在移动开发中，一种较为容易的做法是，先在桌面上开始原型设计，然后再在打算要支持的设备上处理移动特有的部分。多点触摸正是难以在PC上进行测试的那些功能之一，因为大部分的PC都没有触摸输入。
不得不在移动设备上进行的测试有可能会拉长你的开发周期，因为你所做的每项改变都需要提交代码到服务器上，接着再加载到设备上。然后，一旦运行后，对应用也就没有太多的调试了，因为平板电脑和智能手机都很缺乏web开发者所用的工具。
这个问题的一个解决方案是在开发机器上模拟触发事件。对于单点触摸，触摸事件可以基于鼠标事件来模拟。如果你有触摸输入设备的话，比如说现代的App MacBook，那么多点触摸也可以被模拟。
单点触摸事件
如果你想在桌面上模拟单点触摸事件的话，试一下Phantom Limb，该程序在网页上模拟触摸事件并提供一只巨手来引导。
另外还有Touchable这一jQuery插件，该插件跨平台地统一了触摸和鼠标事件。
多点触摸事件
为了能够让你的多点触摸web应用在你的浏览器或是多点触摸控板（比如说Apple MacBook或是MagicPad）上起作用，我创建了这一个MagicTouch.js填充工具，其捕捉来自触控板的触摸事件，然后把它们转换成标准兼容的触摸事件。
1. 下载npTuioClient NPAPI插件并把它安装到~/Library/Internet Plug-Ins/目录下。
2. 下载这一Mac MagicPad的TongSeng TUIO应用并启动这一服务器。
3. 下载MagicTouch.js这一javascript库来基于npTuioClient回调模拟规范兼容的触摸事件。
4. 以如下方式把magictouch.js脚本和npTuioClient插件包含到你的应用中：
& head&...& script src="/path/to/magictouch.js" kesrc="/path/to/magictouch.js"&& /script&& /head&& body&...& object id="tuio" type="application/x-tuio" style="width: 0 height: 0"&Touch input plugin failed to load!& /object&& /body&
我只在Chrome 10上测试了这一方法，不过只要稍做调整它应该能够在其他的现代浏览器上工作。
如果你的计算机没有多点触摸输入的话，你可以使用其他的TUIO跟踪器，比如说reacTIVision来模拟触摸事件。欲了解更多信息，请参阅TUIO项目页面。
需要注意的一点是，你的手势可以是和OS层面的多点触摸手势相同的。在OS X上，你可以通过进入System Preferences中的Trackpad偏好设定版面来配置系统范围的事件。
随着多点触摸功能逐渐得到跨移动浏览器的的广泛支持，我非常高兴地看到新的web应用充分利用了这一丰富的API。
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 12345678910 Copyright & &&版权所有随笔 - 32&
文章 - 94&
trackbacks - 0
2010年12月
28293012345678910111213141516181920212223242526272829303112345678
阅读排行榜
评论排行榜
又好久没有更新blog了，这段时间仍然是造那个车轮，是一个用opengl es1.0 + 一些平台相关的工具函数，实现的2d游戏gui引擎，还造得破破烂烂不堪入目的那种。结果却拿去做移植一个以gui表现为主的游戏。。。。。一开始还好，只是各种消息焦点、对象Capture引发的问题，直到后来的多点触摸。。。。。刚开始虽然没有多点触摸的需求，但也是留有一个多点触摸的接口的，就是各种TouchDown、TouchMove、TouchUp里面都有传递一个TouchID，后来确定了使用多点触摸，于是原来的地方就出现了问题：1、第一个手指点下某个对象A（比如按钮），这时A就记住了被某个TouchID点下的状态，保持点下状态，同时另外一个手指点击另一个对象B按钮，B按钮响应点击弹出一个界面，这个界面就把A挡在后面了，这时第一个手指才弹起来，这时的UI控件树第一个遍历到的是上面那个界面，于是A响应不到弹起的事件了。。。。2、正常的UI消息传递都是父对象先把touch消息传给各个子对象，发现没有子对象响应时，才考虑父对象自己的响应。但如今要模仿iphone的那个滚动列表，滚动列表容器里面放了很多子对象，一开始，滚动容器处于静止状态，按下和弹起时，确实子对象先响应，但按下并移动到一个阈值，滚动容器进入滚动状态，于是让子对象响应失去消息，后面的移动就都是响应滚动了，直到弹起并再次点击，才响应停止滚动，进入正常状态。这样就有一个问题：无法嵌套多个滚动对象？，另外，也出现了各种响应不正常的bug3、这个问题从上面扩展开来。一个项目做了一半，又要加入多点触摸进行放大缩小的功能，再加上上面的滚动列表功能，为了保持原来的功能不变，滚动列表的代码不改，于是设计了一个多点触摸对象作为父对象，初始化时确定最大支持的触控数量值，响应触摸时，响应回调函数来处理各种功能，另外回调函数还可以决定是否把触摸消息传给子对象。这样假设初始化一个2点触摸对象，回调函数判断只有一个触摸时，传递给滚动列表子对象，有两个触摸时，让滚动列表子对象失去消息，并再不传递给它，照理来说应该不会有什么隐患，不过测试多次，也是会出现响应不正常的bug。解决方案：UI控件对象保存自己被哪个Touch对象响应到 是有缺陷的，应该是实现一系列Touch对象，让Touch对象保存响应的UI对象。这样貌似整个框架要重构？
阅读(2679)
&re: 多点触摸的GUI？& 23:58&
你觉悟了，很好&&&&&&
&re: 多点触摸的GUI？& 13:17&
@陈梓瀚(vczh)生米煮成熟饭了。。。。&&&&&&
&re: 多点触摸的GUI？& 20:07&
&&正常的UI消息传递都是父对象先把touch消息传给各个子对象楼主的这个理解有问题吧，应该是ui消息从子对象向父对象传递。如果这个ui的坐标系是你自己管理的，应该可以准确定位到任意一个对象。消息应该是先传到子对象，子对象不处理，父对象再处理。我曾经也做了一个类似的系统，后来发现消息的传导应该是从小到打。虽然从大到小逻辑上容易理解，但是实际上从小到大更加灵活和有效率。&&&&&&
&re: 多点触摸的GUI？& 02:04&
话说，最近看WPF对消息的处理很有感悟啊，UI这个东西还有多点触摸，的确得有一个很灵活的架构才能好做。
给楼主一点个人建议：每个UI控件对某一个输入设备的消息都有一对响应，譬如鼠标左键按下要调用两个函数：preMouseLDown和onMouseLDown，前者是从父控件穿来的，后者是从子控件传来的，楼上说的从子控件往父控件传是必须的，但是不能舍弃从父控件往子控件传消息的这一流程。判断输入点的过程是从父到子的，每级递归判断找到响应控件是最有效率的，顺带就调用一下每个控件的preMouseLDown()函数，这样的消息流通机制是自顶向下，又回溯向上到顶的一个过程。
如此设计的话，应该改动不大，但收效会很明显，多点触摸和滚动的实现会变得很容易。&&&&&&
&re: 多点触摸的GUI？& 17:07&
@magicRoy
我读书的时候做的系统是，先从大到小，再从小到大……后来一看，TM那个WPF也是这么干的&&&&&&
&re: 多点触摸的GUI？& 17:07&
@酿
嗯&&&&&&
&re: 多点触摸的GUI？& 18:03&
@陈梓瀚(vczh)什么意思？先从大到小，再从小到大？简单的说，你认为是应该子对象先收到鼠标事件，还是父对象先收到？&&&&&&
&re: 多点触摸的GUI？& 11:55&
我在从小到大的回馈流程只有一个简单的『是否捕获』标识&&&&&&
&re: 多点触摸的GUI？& 13:19&
回馈流程一个bool标识在鼠标上是没有问题的，但不能简单搬到多点触摸上。消息响应有问题的原因是 对象要记住的TouchID已经不存在了。鼠标位置是一直存在的，但是一个touch是有生命的。&&&&&&
&re: 多点触摸的GUI？& 00:14&
为什么要 TouchDown 的时候 B 按钮响应点击弹出一个界面？要识别 TouchDown、TouchMove、TouchUp 整个过程的轨迹后，UI 对象才能执行相应的动作。&&&&&&}