Question

在尝试将SequentialLayout应用于已添加到布局的StateModifiers对象时使用Surface时，看起来会发生一些意外行为：

在setTransform上通过StateModifier应用转换时，我希望看到从相关Surface的来源应用转换。
相反，转换是从0,0的原点应用于父SequentialLayout

鉴于下面的代码，上面的行为似乎没有逻辑意义（对于上下文，我正在使用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

表面没有原点，（state-）修饰符具有原点。由于您没有提供任何原始值，因此设置了默认值，即[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的原点相同。 不是你想要的！

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

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

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

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

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

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

2 个答案:

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