[Famo.us] inputs 模組 Part 2

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

接續著講滑鼠、觸控等其他的模組。

MouseSync

顧名思義，就是跟滑鼠控制相關的同步事件模組，預設值有以下項目，

MouseSync.DEFAULT_OPTIONS = {
     direction: undefined, // 方向
     rails: false, // 指定單一方向移動
     scale: 1, // 滑鼠軌跡放大倍率
     propogate: true // 在文件中加入 mouseleave 事件監聽
};

常數

這兩個常數是給 direction 所使用的，

• MouseSync.DIRECTION_X
• MouseSync.DIRECTION_Y

方法

• getOptions 取得設定值
• setOptions 設定設定值

事件

• start
• update
• end

ScrollSync

關於捲軸的同步事件模組，實際上他也會監聽滑鼠的滾輪事件，預設值有，

ScrollSync.DEFAULT_OPTIONS = {
     direction: undefined, // 方向
     minimumEndSpeed: Infinity, // 捲軸移動結束時的移動速度
     rails: false, // 指定單一方向移動
     scale: 1, // 移動軌跡放大倍率
     stallTime: 50, // 結束移動後多久（單位 ms）觸發 end 事件
     lineHeight: 40 // 捲動行高
};

常數

這兩個常數是給 direction 所使用的，

• ScrollSync.DIRECTION_X
• ScrollSync.DIRECTION_Y

方法

• getOptions 取得設定值
• setOptions 設定設定值

事件

• start
• update
• end

TouchSync

這個模組在 TouchTracker 有稍微提及，他監聽了觸控的三個動作，並且使用 TouchTracker 將觸控資料記錄下來，基本的預設值有，

TouchSync.DEFAULT_OPTIONS = {
     direction: undefined, // 方向
     rails: false, // 指定單一方向移動
     scale: 1 // 觸控軌跡放大倍率
};

常數

這兩個常數是給 direction 所使用的，

TouchSync.DIRECTION_X = 0; TouchSync.DIRECTION_Y = 1;

方法

• getOptions 取得設定值
• setOptions 設定設定值

事件

• start
• update
• end

PinchSync, ScaleSync, RotateSync

手勢控制事件同步模組，用於雙指捏入與滑開的控制，基本上 PinchSync 與 ScaleSync 是相當類似的東西，只不過 ScaleSync 控制了元件的縮放，差別僅止于此。

而 RotateSync 則是雙指之間的旋轉，其三者的預設值皆相同，

預設值有，

PinchSync.DEFAULT_OPTIONS = {
     scale: 1 // 雙指移動放大倍率
};

ScaleSync.DEFAULT_OPTIONS = {
     scale : 1 // 雙指移動放大倍率
};

RotateSync.DEFAULT_OPTIONS = {
     scale : 1 // 雙指移動放大倍率
};

方法

• getOptions 取得設定值
• setOptions 設定設定值

TwoFingerSync

雙指移動的幕後功臣，上述三個雙指移動的事件同步模組，都是由這裡擴展出去的，由於只是作為一個可擴展的模組，所以他沒有任何的預設值，都是提供方法讓其他人使用。

靜態方法

• calculateAngle(posA, posB) 計算兩點的 atan2（反正切弦）角度（單位是弧度
• calculateDistance(posA, posB) 計算兩點間的距離
• calculateCenter(posA, posB) 計算兩點間的中心點

私有方法

以下三個私有方法，皆由 EventHandler.setInputHandler 接管，

• handleStart(event)
• handleMove(event)
• handleEnd(event)

GenericSync

這個輸入事件同步模組，是先前介紹所有模組的集大成。也就是說，你可以用這一個模組來掌控所有前面所敘述過的模組。

register 靜態方法

GenericSync 提供了一個註冊的靜態方法，當你要使用相關模組時，你必須要把這些模組註冊過，才能夠使用。

define(function(require, exports, module) {
     var GenericSync = require('famous/inputs/GenericSync');
     var ScrollSync = require('famous/inputs/ScrollSync');
     var TouchSync = require('famous/inputs/TouchSync');
     GenericSync.register({scroll : ScrollSync, touch : TouchSync});

    var sync = new GenericSync(['scroll', 'touch'], {direction : GenericSync.DIRECTION_X}); });

方法

• setOptions 設定設定值
• pipeSync 將已註冊的同步事件模組傳遞至設定的物件上
• unpipeSync 在指定物件上註銷同步事件模組
• addSync 加入指定的同步事件模組

範例

這個例子會在畫面上畫出一個 500x5500 的紅色長方形，當你滑鼠在紅色區塊滾動時，會觸發事件 start，你可以利用事件傳回的資料，來任意移動你的長方形區塊（或是做其他的事情

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

    GenericSync.register({scroll : ScrollSync, touch : TouchSync});

    var mainContext = Engine.createContext();

    var sync = new GenericSync(['scroll', 'touch'], {direction : GenericSync.DIRECTION_X});

    sync.on('start', function() {
             console.log(arguments);
         });

    var surface = new Surface({
             size: [500, 5500],
             properties: {

            backgroundColor: 'red'
             }
         });

    surface.pipe(sync);
    mainContext.add(surface);
});