/ Famo.us

[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,RotateSyncScaleSync

直接使用的模式檔案

亦即,這些檔案並非以 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