/ Famo.us

[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

手勢控制事件同步模組,用於雙指捏入與滑開的控制,基本上 PinchSyncScaleSync 是相當類似的東西,只不過 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);
});