javascript - Famo.us 多点触控

Question

我按照这个例子

http://famo.us/university/famous-102/input/5/

它提到了多点触控，但没有示例

Famo.us also has support for multitouch gestures such as rotating, pinching and scaling. To familiarize yourself with these, please visit [LINK TO EXAMPLES.GIT]

通过数组或类似的东西获取触摸的简单示例是什么？我认为它与 TouchTracker https://famo.us/docs/0.2.0/inputs/TouchTracker 有关。 ？

Answer 1

这花了我一段时间。

首先是一个错误..

在 TouchSync.js 第 84 行:

payload.touch = data.identifier;

应该是..

payload.touch = data.touch.identifier;

接下来，如果您想跟踪所有事件，您可以通过每个 TouchSyncs 启动、更新和结束事件手动执行此操作。 TouchSync 只是使用 TouchTracker 来管理多点触控，但您不需要自己使用该类。

这是我跟踪多个触摸输入的示例。请注意，我需要在数据对象进入事件处理程序时对其进行克隆，以保持对它们的正确引用。这也花了一段时间才弄清楚。希望这对您有帮助!

var Engine    = require("famous/core/Engine");
var TouchSync = require("famous/inputs/TouchSync");
var Surface   = require("famous/core/Surface");

var mainContext = Engine.createContext();

var touches = {};

var touchSync = new TouchSync(function() { return position; });

Engine.pipe(touchSync);

var contentTemplate = function() {

    var string = "Touches:<br/>";

    for (var key in touches ) {
      var touch = touches[key];
      var x     = touch.clientX ? touch.clientX : "" ;
      var y     = touch.clientY ? touch.clientY : "" ;
      string += "key: "+key+", x: "+ x+", y: "+ y +"<br/>";
    }

    return string;
};

var surface = new Surface({
    size: [undefined, undefined],
    classes: ['grey-bg'],
    content: contentTemplate(),
    properties: {
      padding:'10px'
    }
});

var clone = function(obj){
  var newObj = {};
  for ( var key in obj ) { newObj[key] = obj[key]; }
  return newObj;
}

touchSync.on("start", function(data) {
    touches[data.touch] = clone(data);
    surface.setContent(contentTemplate());
});

touchSync.on("update", function(data) {
    touches[data.touch] = clone(data);
    surface.setContent(contentTemplate());
});

touchSync.on("end", function(data) {
    delete touches[data.touch];
    surface.setContent(contentTemplate());
});

mainContext.add(surface);