MOBILE WEB程式設計--第二版

設備互動

|

561

若要在偵測手勢的元素中套用 CSS 變形，我們可以使用下列來自 Microsoft 官方文件範

例的程式片段：

myElement.addEventListener("MSGestureChange", function(e) {

// 取得元素中最新的 CSS 變形

var m = new MSCSSMatrix(e.target.style.transform);

e.target.style.transform = m

// 在手勢的中心點下方移動變形原點

.translate(e.offsetX, e.offsetY)

.rotate(e.rotation * 180 / Math.PI) // 套用旋轉

.scale(e.scale) // 套用縮放

.translate(e.translationX, e.translationY) // 套用變形

.translate(-e.offsetX, -e.offsetY); // 移回變形原點

}, false);

感應器

觸碰並非唯一可讓 HTML5 行動 App 讀取的輸入方式。在 iPhone 出現之後問世的設

備，大都具備許多感應器，我們也可以用它們來為 App 與遊戲提供輸入資料，其中包括

加速度計、磁強計（數位羅盤），與陀螺儀。有一些設備也具備壓力與光感應器。

這些感應器的原理已超出本書的範圍，我們的重點在於瞭解每一種感應器的用途：

加速度計

以三個軸（

x

、

y

、

z

）來測量設備的線性移動（當下的加速度），包括重力。也就是 ...