像 SequentialLayout 这样的 famo.us 布局是否参与渲染树？

Question

当使用SequentialLayout 尝试将StateModifiers 应用于已添加到布局的Surface 对象时，似乎发生了一些意外行为：

• 通过setTransform 对StateModifier 应用转换时，我希望看到从相关Surface 的原点应用的转换。
• 相反，变换是从相对于父级SequentialLayout 的原点 0,0 开始应用的

鉴于下面的代码，上述行为似乎没有逻辑意义（对于上下文，我正在使用 famo.us 进行排序算法演示）：

/* globals define */
define(function(require, exports, module) {
    'use strict';
    // import dependencies
    var Engine = require('famous/core/Engine');
    var Modifier = require('famous/core/Modifier');
    var Transform = require('famous/core/Transform');
    var Surface = require('famous/core/Surface');
    var StateModifier = require('famous/modifiers/StateModifier');
    var SequentialLayout = require('famous/views/SequentialLayout');

    // create the main context
    var mainContext = Engine.createContext();

    // your app here
    var surfaces = [];

    // Sorter
    var Sort = require('sort');

    var arr = [100,25,20,15,30,-20,-10,10,0];
    var min = Math.min.apply(null, arr);

    var base_dims = [ 50, 50 ];

    arr.forEach(function(el) {
      surfaces.push(new Surface({
        content: el,
        size: base_dims.map(function(d) { return d + (el - min); }),
        properties: {
          backgroundColor: 'rgb(240, 238, 233)',
          textAlign: 'center',
          padding: '5px',
          border: '2px solid rgb(210, 208, 203)',
          marginTop: '50px',
          marginLeft: '50px'
        }
      }));
    });

    var sequentialLayout = new SequentialLayout({
        direction: 0,
        itemSpacing:20
    });
    sequentialLayout.sequenceFrom(surfaces);

    mainContext.add(sequentialLayout);

    var swap_modifiers = [
      new StateModifier({}), new StateModifier({})
    ];

    Sort.bubble_sort_iterative(arr, function(first_swap_index, second_swap_index) {
      swap_modifiers[0].setTransform(
        Transform.translate(300, 0, 0),
        { duration : 750, curve: 'linear' }
      );

      swap_modifiers[1].setTransform(
        Transform.translate(300, 0, 0),
        { duration : 750, curve: 'linear' }
      );

      mainContext.add(swap_modifiers[0]).add(surfaces[first_swap_index]);
      mainContext.add(swap_modifiers[1]).add(surfaces[second_swap_index]);
    });
});

Answer 1

表面没有原点，（状态）修饰符有原点。由于您不提供任何原始值，因此设置了默认值，即 [0, 0]。看更多： http://famo.us/university/lessons/#/famous-101/positioning/8

Answer 2

将您的SequentialLayout 视为您树中的Render Node。向SequentialLayout 添加表面实质上是向该树分支添加单个节点。 SequentialLayout 恰好将每个项目添加到树中的同一级别。

Sort.bubble_sort_iterative(... 通过将表面添加到应用程序的 mainContext 来更改表面的位置。这与sequentialLayout 处于同一级别，并使它们的起源与sequentialLayout 相同。 不是你想要的！

记住：向上下文添加修饰符将使该上下文成为父节点。

在不知道上述代码的细节的情况下，我们知道我们可以向sequentialLayout 添加View 而不是表面，并且可以在每个项目中转换视图的修改器，而无需更改它们在渲染树中的位置。

顺序布局中视图的简单代码示例：

  arr.forEach(function(el) {
    var surfSize = base_dims.map(function(d) { return d + (el - min); });
    console.log(size);
    var view = new View();
    view.mod = new StateModifier({ size: surfSize });
    view.surface = new Surface({
      content: el,
      size: [undefined, undefined],
      properties: {
        backgroundColor: 'rgb(240, 238, 233)',
        textAlign: 'center',
        padding: '5px',
        border: '2px solid rgb(210, 208, 203)',
        marginTop: '50px',
        marginLeft: '50px'
      }
    });

    view.add(view.mod).add(view.surface);
    surfaces.push(view);
  });

尝试将视图从一个交换到另一个会给您带来一些意想不到的结果。最好只交换选项和内容值。