如何获得famo.us Surface的当前状态？

Question

我需要确定特定曲面的位置，通常我会使用getTransform()来访问translate修饰符的x，y，z属性。不幸的是，根据famo.us文档，Modifier的getTransform()方法是deprecated。

我的目的是使用这些值来使用transitionableTransform.setTranslate()

相对于这些坐标定位另一个表面

非常感谢任何反馈！

Answer 1

Famo.us希望开发人员考虑更新修改器之外的3D转换，并让修改器通过返回的transitionable值访问这些值。一旦你理解了框架的核心，这实际上是一种很好的做法。

以下示例显示了在两个不同实例中执行此操作的简单方法。

记住：返回的翻译值是相对于修饰符的原点和对齐方式，因此您将获得相对于起始位置{{1}的位置[x，y，z] }。两个表面都需要具有相同的树节点原点或相对位置。

示例1：在依赖曲面

的最终转换之后设置变换

根据主曲面[0,0,0]从TransitionableTransform获取变换。

＆＃13;

＆＃13;

TransitionableTransform

＆＃13;

define('main', function(require, exports, module) {
  var Engine = require("famous/core/Engine");
  var Surface = require("famous/core/Surface");
  var RenderNode = require('famous/core/RenderNode');
  var Modifier = require('famous/core/Modifier');
  var Transform = require('famous/core/Transform');
  var TransitionableTransform = require('famous/transitions/TransitionableTransform');

  var mainContext = Engine.createContext();
  mainContext.setPerspective(1000);
  
  var surface = new Surface({
    content: 'Click to Transition',
    properties: {
      backgroundColor: 'rgba(255, 255, 0, 0.5)',
      textAlign: 'center'
    }
  });
  surface._trans = new TransitionableTransform();
  surface._mod = new Modifier({
    origin: [0.5, 0],
    align: [0.5, 0],
    size: [200, 200],
    transform: surface._trans
  });

  var surfaceFollower = new Surface({
    content: 'F o l l o w e r',
    properties: {
      backgroundColor: 'rgba(0, 255, 255, 0.5)',
      fontSize: '1em'
    }
  });
  surfaceFollower._trans = new TransitionableTransform();
  surfaceFollower._mod = new Modifier({
    origin: [0.5, 0],
    align: [0.5, 0],
    size: [12, 200],
    transform: surfaceFollower._trans
  });
  
  mainContext.add(surface._mod).add(surface);
  mainContext.add(surfaceFollower._mod).add(surfaceFollower);

  function followSurface() {
    //var translate = surface._trans.translate.get(); // returns [x, y, z]
    //var pos = [translate[0]+106,translate[1],translate[2]];
    var translate = surface._trans.get(); // returns 3D transform matrix
    var pos = [translate[12]+106,translate[13],translate[14]];
      surfaceFollower._trans.setTranslate(pos , {duration: 300});
  }
  surface.on('click', function() {
    var randomX = Math.floor(Math.random() * 200);
    var randomY = Math.floor(Math.random() * 200);
    if (this.randomly)
      this._trans.setTranslate([0, 0, 0], {duration: 300}, followSurface);
    else
      this._trans.setTranslate([randomX, randomY, 0], {duration: 300}, followSurface);
    
    this.randomly = !this.randomly;
  });

  
  
  followSurface();
});

// Start Main App
require(['main']);

＆＃13;

＆＃13;

＆＃13;

示例2：在每个刻度上设置变换

根据相关的Surface位置返回平移变换。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>

<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />

<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>

＆＃13;

＆＃13;

  surfaceFollower._mod = new Modifier({
    origin: [0.5, 0],
    align: [0.5, 0],
    size: [12, 200],
    transform: followSurface
  });
  function followSurface(e) {
    var translate = surface._trans.get();
    return Transform.translate(translate[12]+106,translate[13],translate[14]);
  }

＆＃13;

define('main', function(require, exports, module) {
  var Engine = require("famous/core/Engine");
  var Surface = require("famous/core/Surface");
  var RenderNode = require('famous/core/RenderNode');
  var Modifier = require('famous/core/Modifier');
  var Transform = require('famous/core/Transform');
  var TransitionableTransform = require('famous/transitions/TransitionableTransform');

  var mainContext = Engine.createContext();
  mainContext.setPerspective(1000);
  
  var surface = new Surface({
    content: 'Click to Transition',
    properties: {
      backgroundColor: 'rgba(255, 255, 0, 0.5)',
      textAlign: 'center'
    }
  });
  surface._trans = new TransitionableTransform();
  surface._mod = new Modifier({
    origin: [0.5, 0],
    align: [0.5, 0],
    size: [200, 200],
    transform: surface._trans
  });

  var surfaceFollower = new Surface({
    content: 'F o l l o w e r',
    properties: {
      backgroundColor: 'rgba(0, 255, 255, 0.5)',
      fontSize: '1em'
    }
  });
  surfaceFollower._mod = new Modifier({
    origin: [0.5, 0],
    align: [0.5, 0],
    size: [12, 200],
    transform: followSurface
  });
  
  mainContext.add(surface._mod).add(surface);
  mainContext.add(surfaceFollower._mod).add(surfaceFollower);

  function followSurface(e) {
    //var translate = surface._trans.translate.get(); // returns [x,y,z]
    //return Transform.translate(translate[0]+106,translate[1],translate[2]);
    var translate = surface._trans.get();
    return Transform.translate(translate[12]+106,translate[13],translate[14]);
  }
  surface.on('click', function() {
    var randomX = Math.floor(Math.random() * 200);
    var randomY = Math.floor(Math.random() * 200);
    if (this.randomly)
      this._trans.setTranslate([0, 0, 0], {duration: 300});
    else
      this._trans.setTranslate([randomX, randomY, 0], {duration: 300});
    
    this.randomly = !this.randomly;
  });
});

// Start Main App
require(['main']);

＆＃13;

＆＃13;

＆＃13;