[Famo.us] inputs 模組 Part 1

[UPDATE] Famo.us 官方已捨棄此模組，詳情請看官方 Github

在 Famo.us 當中，提供了不少關於輸入（input）的模組，主要是用於接收使用者的操作輸入，諸如滑鼠、捲軸、觸控等等。

輸入控制

常見的輸入控制，除了滑鼠與觸控外，捲軸與手勢動作也包含在這些模組當中，主要有下列輸入模組可以使用，

非輸入模組

Accumulator 累加器，他提供一組累加功能，單純的使用 setter/getter 來加入或是取得你所累加的數字（或是數字陣列
TouchTracker 追蹤觸控輸入，當觸控元件並非選取狀態時，追蹤每一個觸控軌跡

同步事件模組

這些模組並不能直接使用在物件上，必須要與事件控制合併使用才會有效果，

GenericSync 通用輸入（包含滑鼠、觸控與捲軸輸入
MouseSync 滑鼠輸入
PinchSync 雙指捏入手勢
RotateSync 雙指旋轉手勢
ScaleSync 雙指縮放手勢（與 PinchSync 類似
ScrollSync 滑鼠滾輪輸入
TouchSync 觸控輸入
TwoFingerSync 雙指輸入（包含 PinchSync,RotateSync 與 ScaleSync

直接使用的模式檔案

亦即，這些檔案並非以 AMD 的模組形態存在，他只是單純初始化一個模式，只要載入檔案就會生效，

inputs/DesktopEmulationMode.js 只要是觸控裝置，他會取消所有滑鼠動作（恰巧與他的名字相反
inputs/FastClick.js 模擬觸控行為下的快速點擊，用於加速判別是否為 click 動作

Accumulator

累加器的使用方式很簡單，

// 你必須要傳入數字，陣列，或是他也接受 Transitionable 物件
// 第二個參數是事件名稱，亦即觸發該事件，會更新累加器

var accumulator = new Accumluator([0,0], 'update');
accumulator.emit('update', { delta: 10 });
console.log(accumulator.get()); // [10, 10]

TouchTracker

該模組本身會將事件傳回 TouchSync 與其相關同步事件模組上面，你可以在 TouchSync 上面看到私有變數 _touchTracker 就是由該模組所回傳的事件。

事件

touchstart
touchmove
touchend
touchcancel
unpipe 如果觸發該事件，會把自身所儲存的軌跡資料清除

方法

track 你必須要傳入一個觸控物件（Object）該物件必須包含 identifier 屬性

如果以下述範例來說明的話，這個物件會包含這些值，

{
  count: 1, // 觸控數量
  history: [ {...}, {...}, {...}, ... ], // 所有移動過的資料物件，裡面的物件跟這個物件結構相同
  identifier: 0, // 觸控數量唯一識別值
  origin: Surafce, // 觸控事件觸發來源
  timestamp: 140232312327, // 時間戳記
  x: 339, // 觸控坐標點 x
  y: 160 // 觸控坐標點 y
}

使用範例

直接使用的話，你必須要有個元件才行，

define(function(require, exports, module) {
    // import dependencies
    var Engine  = require('famous/core/Engine');
    var Surface = require('famous/core/Surface');
    var TouchTracker = require('famous/inputs/TouchTracker');

    var mainContext = Engine.createContext();

    var touchtracker = new TouchTracker();

    var surface = new Surface({
        size: [500, 500],
        properties: {
            backgroundColor: 'red'
        }
    });

    surface.pipe(touchtracker);

    touchtracker.on('trackmove', function() {
        console.log(arguments);
    });

    mainContext.add(surface);
});

下回待續 XDD