GridLayout 视图忽略 z-translate

Question

我想在 ScrollView 上下文中使用 GridLayout 并能够在 Z 方向平移 GridLayout 的表面。问题是由于某种原因 Z-translate 在 GridLayout 中被忽略了。似乎 GridLayout 的视角为零，因为在 x 和 y 方向上平移就可以了。如何解决？这是 z-translate 什么都不做的例子:(

define(function(require, exports, module) {
    var Engine     = require("famous/core/Engine");
    var Surface    = require("famous/core/Surface");
    var Scrollview = require("famous/views/Scrollview");
    var View      = require("famous/core/View");
    var ContainerSurface = require("famous/surfaces/ContainerSurface");
    var MouseSync = require("famous/inputs/MouseSync");
    var TouchSync = require("famous/inputs/TouchSync");
    var GenericSync = require("famous/inputs/GenericSync");
    GenericSync.register({ 'mouse': MouseSync, 'touch': TouchSync });
    var syncX = new GenericSync(['mouse', 'touch'], { direction: 0 });  
    var GridLayout = require("famous/views/GridLayout");
    var StateModifier = require('famous/modifiers/StateModifier');
    var Transform      = require("famous/core/Transform");

    var mainContext = Engine.createContext();
        mainContext.setPerspective(1000);

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

    var scrollview = new Scrollview({direction: 0});
    syncX.pipe(scrollview);

    var surfaces = [];
    var mods = [];
    var views = [];
    for (var i = 0, temp; i < 12; i++) {
        view = new View();
        mod = new StateModifier();
        temp = new Surface({
             content: "Surface: " + (i + 1),
             size: [200, 200],
             properties: {
                 backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
                 lineHeight: "200px",
                 textAlign: "center"
             }
        });

        temp.pipe(syncX);
        surfaces.push(temp);
        mods.push(mod);
        view.add(mod).add(temp);
        views.push(view);
    }
    grid.sequenceFrom(views);



    var container = new ContainerSurface({size:[1200,400]});
    container.context.setPerspective(1000);                  ///<----------
    container.add(grid);
    scrollview.sequenceFrom([container]);


    Engine.on('click', function(){
        mods[0].setTransform(Transform.translate(2,2,999), {duration:1000});
    });

    mainContext.add(scrollview);
});

顺便说一句，我在 Chrome

中测试过它

Answer 1

这是由于新引入的 chrome 错误。看起来 Chrome 尝试在所有内容最初都处于 0 的 z 平移时快速路径其渲染。如果您在不透明度为 0 的非零 z 处将 Surface 添加到场景中，您可以欺骗 Chrome 正确绘制。

mainContext
    .add(new StateModifier({
        transform: Transform.translate(0, 0, 100000000),
        size: [1, 1],
        opacity: 0
    })).add(new Surface({
        properties: {backgroundColor: 'chromeHack'}
    }));

当我制作一个更简单的示例并作为 chrome 错误归档时，我将编辑此 post。

Answer 2

GridLayout 不应忽略 z-translate，如您运行下面的代码所示。您在上面提供的代码中缺少一些您不需要的东西。

注意：按照您使用的方式在 GridLayout 的视图上放置修饰符可能不会最终为您提供所需的结果，但该示例确实显示了如何它有效。

Example jsBin

  var Engine     = require("famous/core/Engine");
  var Surface    = require("famous/core/Surface");
  var Scrollview = require("famous/views/Scrollview");
  var View      = require("famous/core/View");
  var ContainerSurface = require("famous/surfaces/ContainerSurface");
  var GridLayout = require("famous/views/GridLayout");
  var StateModifier = require('famous/modifiers/StateModifier');
  var Transform      = require("famous/core/Transform");

  var mainContext = Engine.createContext();
  mainContext.setPerspective(1000);

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

  var scrollview = new Scrollview({direction: 0});

  var surfaces = [];
  var mods = [];
  var views = [];
  for (var i = 0; i < 12; i++) {
    var view = new View();
    var mod = new StateModifier({
      size: [200, 200],
      transform: Transform.translate(0,0,0.001)
    });
    var temp = new Surface({
      content: "Surface: " + (i + 1),
      properties: {
        backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
        lineHeight: "200px",
        textAlign: "center"
      }
    });
    surfaces.push(temp);
    mods.push(mod);
    temp.pipe(view);
    view.add(mod).add(temp);
    views.push(view);

    temp.on('click', translateOut.bind(temp, i));

  }

  grid.sequenceFrom(views);

  var container = new ContainerSurface({size:[1200,400]});
  container.add(grid);
  grid.pipe(container);
  scrollview.sequenceFrom([container]);
  container.pipe(scrollview);

  function translateOut(index){
    if (!this.moved) {
       mods[index].setTransform(Transform.translate(0,0,400), {duration:1000});
    } else {
       mods[index].setTransform(Transform.translate(0, 0,0.001), {duration:1000});
    }
      this.moved =!this.moved;
  }

  mainContext.add(scrollview);

GridLayout 视图忽略 z-translate

z-translate is ignored by GridLayout view

famo.us