Win10论坛

Win10正式版系统下载主题平板

重定义Modern UI,打造完美Windows全新体验

Windows10下载|安装|新手宝典|必备软件

搜索
查看: 3408|回复: 14

[测评] 用surface 触摸你的网站吧 [复制链接]

UID
597645
帖子
45225
PB币
51965
贡献
0
技术
776
活跃
1047

应用界 荣誉会员 水神勋章

发表于 2012-10-24 18:48:52 |显示全部楼层
万众瞩目的Surface相信大家已经有所耳闻,更关心它的用户应该已经有蠢蠢欲动的购买欲了。
surface最大的亮点莫过于对触摸屏,还有搭载的为触摸屏优化的windows rt/8系统。

给想详细了解surface工作原理的孩纸整理了一篇文章,算是评测吧


      随着新的输入设备和触摸屏的到来,网络变得更具有互动性、更有趣、更令人身临其境。 Windows 8 在网站和应用程序中引入了对触摸输入和手写笔输入处理的支持,Modern UI 风格的 IE 及应用程序给 Windows 8 带来了一流的触摸体验,同时并没有牺牲其他形式的输入。网站开发人员现在可以很轻松的确保他们的网站可以很好地支持触摸操作,构建出震撼的新体验,最大限度地利用多点触摸设备、手势等高级输入方式。在 Internet Explorer 测试驱动网站上新增和更新的演示触摸效果、捕鸟游戏、飞行图片中可以看到实际的效果。


在不影响鼠标的情况下,优先处理触摸输入


       首先从基本的输入处理开始。在 IE10 和 Modern UI 风格的应用程序中,开发人员能够写入更抽象的输入形式,称为“Pointer”。Pointer 可以是鼠标光标、笔、手指、或多个手指在屏幕上的任何接触点。利用这个模型编写的网站和应用程序,不论用户使用什么样的输入硬件,都可以很好地工作。与硬件加速的方法类似,硬件越好,这个体验越好,但开发人员编程时使用的 API 却是与硬件无关的。


clip_image002.gif


Pointer 事件封装了来自触摸、笔、鼠标的输入,有助于构建与独立于硬件的体验捕捉通用 Pointer 输入的事件,看起来与鼠标事件很像:MSPointerDown, MSPointerMove, MSPointerUp, MSPointerOver, MSPointerOut 等。Pointer 事件提供了鼠标事件的全部常规属性(客户的X/Y 坐标、目标元素、按钮状态等),还提供了针对其他输入形式的新属性:压力、接触几何、倾斜等。所以开发人员很容易针对Pointer 事件编程,不论使用什么样的输入硬件,他们的程序都可以工作。有些时候,开发人员想为触摸输入提供不同的体验。这时,Pointer 事件也可以通过event.pointerType 属性指定输入的类型(触摸、笔、鼠标)。下面是对IE10 开发人员指南(http://msdn.microsoft.com/library/ie/hh673549.aspx)中的绘图程序稍加修改的一个基本的绘图程序:

  1. <style>html {overflow: hidden;-ms-content-zooming: none; /* Disable pan/zoom */}</style><canvas id="drawSurface" width="500" height="500" style="border: 1px solidblack;"></canvas><script type='text/javascript'>var canvas = document.getElementById("drawSurface");var context = canvas.getContext("2d");context.fillStyle = "rgba(255, 0, 0, 0.5)";canvas.addEventListener("MSPointerMove", paint, false);function paint(event) {context.fillRect(event.offsetX, event.offsetY, 5, 5);}</script>
复制代码

Internet Explorer 10 默认启用触摸屏幕的触控(panning)和缩放。开发人员有时可能想自行管理网站的触控和缩放。在这个示例中,我们将介绍如何在网站上处理触摸输入,以及如何使用样式规则 overflow: hidden 和 –ms-content-zooming: none 准确地禁止触控和缩放。


内置的多点触摸支持


每次触摸接触都会触发按下、移动、抬起一系列事件。所以上面绘图示例这样的应用程序无需任何特殊代码就能支持多点触摸。某些情况下可能需要了解屏幕上其他 Pointer 的信息。在任何Pointer 事件中,都可以方便地得到屏幕上所有Pointer 的完整列表:

  1. <style>html {overflow: hidden;-ms-content-zooming: none; /* 禁用触控和缩放*/}#foo {width: 500px;height: 500px;background-color: red;}</style><div id="foo"></div><script>function handleEvent(event) {var currentPointers = event.getPointerList();if (currentPointers.length == 1) {event.target.style.backgroundColor = "red";} else {event.target.style.backgroundColor = "green"; //使用了多点触摸点}}document.getElementById("foo").addEventListener("MSPointerMove", handleEvent, false);</script>
复制代码

高级手势输入


Windows 还支持高级 Pointer 手势的识别,例如缩放、触控和旋转。开发人员可以通过MSGestureStart、MSGestureChange 和 MSGestureEnd 事件方便地利用这些支持。对于每个手势,都提供了手势转换的信息(旋转、绽放、转变,等等),可以用多种方式在应用程序中使用,例如CSS 转换:

  1. <style>html {overflow: hidden;-ms-content-zooming: none; /* 禁用触控和缩放*/}#foo {background-color: red;width: 500px;height: 500px;-ms-transform-origin: 50%;-ms-transform-origin: 50%;}</style><div id="foo"></div><script>function handleEvent(event) {event.target.style.msTransform = "scale(" + event.scale + ")";}document.getElementById("foo").addEventListener("MSGestureChange",handleEvent, false);</script>
复制代码


功能检测、fallback 和其他模型的支持


对于跨其他平台使用的代码,IE10 为Pointer 事件提供了简单的功能检测:if (window.navigator.msPointerEnabled) {// 系统将触发Pointer 事件}注意:在Windows8中,这个属性代表系统支持触摸输入或笔输入的Pointer 事件。但未来会更新,代表对鼠标、笔、触摸设备的Pointer 事件支持。使用功能检测,可以让网站支持不同的输入模式。“捕鸟”游戏示例在Windows 8、Apple iOS、Google Android、以及纯鼠标系统上都运行得很好。在Windows 8上,它使用 Pointer 事件在一条代码路径中处理所有输入。在其他平台上,它使用鼠标事件和专门的触摸事件结合,提供类似的体验。


  1. if (window.navigator.msPointerEnabled) {elem.addEventListener("MSPointerDown", handleInput, false); // 对触摸、笔、鼠标触发} else {elem.addEventListener("mousedown", handleInput, false); // 仅对鼠标触发}
复制代码


Pointer 事件和手势事件只是触摸开发人员模型的一部分。在未来的文章中,我们将深入介绍其他触摸API 以及“捕鸟”游戏。关于Pointer 事件、手势事件、以及其他触摸API 的更多细节,请参阅IE10 开发人员指南(http://msdn.microsoft.com/library/ie/hh673549.aspx)也可以通过http://connect.microsoft.com/ie 提供反馈。

良好的触摸体验对于网站用户是非常友好的,很多开发者将自己的网站优化并适应移动设备之后,发现触摸体验上有一些影响,这篇文章能够帮助你了解一些关于触摸的内容,,更多内容可以参阅IE10兼容性白皮书,获得更多的帮助,下载地址:http://vdisk.weibo.com/s/bKgeq









2

查看全部评分

Rank: 1

UID
2629437
帖子
6
PB币
4
贡献
0
技术
0
活跃
1
发表于 2012-11-5 18:55:58 |显示全部楼层
好强大啊!支持!支持!

Rank: 1

UID
2439238
帖子
29
PB币
36
贡献
0
技术
0
活跃
1
发表于 2012-11-5 19:07:24 |显示全部楼层
看到这些代码有种很亲切的感觉。

Rank: 1

UID
3143890
帖子
15
PB币
15
贡献
0
技术
0
活跃
0
发表于 2012-11-5 19:59:46 |显示全部楼层
楼主讲的很中肯啊,学习了,谢谢!

Rank: 1

UID
3200143
帖子
11
PB币
23
贡献
0
技术
0
活跃
0
发表于 2012-11-15 11:33:14 |显示全部楼层
非常值得期待,学习。。。。

Rank: 1

UID
2073214
帖子
24
PB币
46
贡献
0
技术
0
活跃
15
发表于 2012-11-15 11:46:32 |显示全部楼层
看起来很牛的样子啊

Rank: 2Rank: 2

UID
603357
帖子
291
PB币
118
贡献
0
技术
0
活跃
77
发表于 2012-11-15 16:07:59 |显示全部楼层
这个很有用,但是很难推广吧

Rank: 9

UID
1958594
帖子
1465
PB币
992
贡献
0
技术
0
活跃
20

荣誉会员 8周年庆典勋章

发表于 2012-11-15 17:26:03 |显示全部楼层
马克一下,以后做移动页面应该有用

Rank: 5Rank: 5Rank: 5

UID
2510549
帖子
53
PB币
91
贡献
0
技术
0
活跃
14
发表于 2012-11-19 10:19:00 |显示全部楼层
先占个位置,这玩意对我有用,收藏了

Rank: 5Rank: 5Rank: 5

UID
1726269
帖子
211
PB币
251
贡献
0
技术
0
活跃
11
发表于 2012-11-19 11:07:22 |显示全部楼层
这个真是强贴呀!!

贱人搞一基

Rank: 2Rank: 2

UID
873109
帖子
377
PB币
2514
贡献
0
技术
11
活跃
88

7周年庆典勋章 8周年庆典勋章

发表于 2012-11-19 11:33:01 |显示全部楼层
...没有surface。。表示无奈

Rank: 1

UID
2791667
帖子
22
PB币
1
贡献
0
技术
0
活跃
0
发表于 2012-11-19 11:53:39 |显示全部楼层
多谢楼主分享

Rank: 1

UID
1847868
帖子
26
PB币
296
贡献
0
技术
0
活跃
24
发表于 2012-11-19 13:17:54 |显示全部楼层

Rank: 7Rank: 7Rank: 7

UID
249885
帖子
1892
PB币
4839
贡献
0
技术
4
活跃
979

热心会员 I'm Windows Phone用户

发表于 2012-11-19 18:45:36 |显示全部楼层
学习一下。


Rank: 2Rank: 2

UID
2868579
帖子
198
PB币
261
贡献
0
技术
0
活跃
67
发表于 2012-11-19 20:02:41 |显示全部楼层

学习一下。
回顶部
Copyright (C) 2005-2019 pcbeta.com, All rights reserved
Powered by Discuz!  苏ICP备17027154号
请勿发布违反中华人民共和国法律法规的言论,会员观点不代表远景论坛官方立场。
远景在线 | 远景论坛 | 苹果论坛 | Win10论坛 | Win8论坛 | Win7论坛 | WP论坛 | Office论坛 | 电脑硬件 | 安卓软件