Inputs 模組說明 Part 4

[hinablue]

#17, #18, #19 介紹完所有 Inputs 模組後，最後來講一般泛用的輸入事件同步模組。

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);
});