Question

如何将StateModifier附加到驻留在GridLayout中的Surface？

我的代码看起来像这样：

//...
var grid = new Gridlayout({dimensions: [2,1]});

var surfaces = [];
grid.sequenceFrom(surfaces);

var surface01 = new Surface({content: 'Surface 01'});
var surface02 = new Surface({content: 'Surface 02'});

surfaces.push(surface01,surface02);

this._node.add(grid);
//...

由于曲面未明确添加到渲染树中，如：

this._node.add(modifier).add(surface)

我不知道如何将修饰符附加到曲面上？！我错过了什么吗？非常感谢任何帮助

Answer 1

您需要从项目中添加视图作为序列。下面的示例代码使用RenderNode作为视图项，并添加了StateModifier和Surface

Example jsBin Code [Famo.us的v0.3.0]

  var mainContext = Engine.createContext();

  var surfaces = [];
  var grid = new GridLayout({
    dimensions: [2, 1]
  });

  var counter = 0;

  _getView = function(name) {
    var rnode = new RenderNode();
    var state = new StateModifier({
      size: [undefined, 500]
    });
    var surface = new Surface({
      content:name,
      properties: {
        backgroundColor: "hsl(" + (counter * 360 / 8) + ", 100%, 50%)",
        lineHeight: '500px',
        textAlign: 'center',
        cursor: 'pointer'
      }
    });
    rnode.add(state).add(surface);
    counter += 1;
    return rnode;
  };

  surfaces.push(_getView('Surface 1'));

  surfaces.push(_getView('Surface 2'));

  grid.sequenceFrom(surfaces);

  mainContext.add(grid);

Answer 2

如果我没有遗漏任何想要修改gridLayout内表面状态的内容，可以点击其中一个？ gridLayout有一个状态数组，您可以通过键入gridlayout._states [＆＃39;表面索引＆＃39;]来访问该状态

＆＃13;

var mainContext = Engine.createContext();

var surfaces = [];

var GridLayout = new GridLayout({
  dimensions: [4,10]
  });

for (var i = 0; i<40; i++){
  
  var surface = new Surface({
    content: 'surface' + i,
    size: [200, 200]
    });
  
  surface.index = i;
  
  surfaces.push(surface);
  });

GridLayout.sequenceFrom(surfaces);

//now if you want to modify the state of the surface with index 2
GridLayout._states[2].set(Transform.rotateX(Math.PI/2)); // your surface will rotate by 90° on X axis

mainContext.add(GridLayout);

＆＃13;

famo.us使用StateModifier在GridLayout中激活Surfaces状态

2 个答案: