Question

我想在ScrollView上下文中使用GridLayout，并能够在Z方向上转换GridLayout的表面。问题是由于某种原因，在GridLayout中忽略了Z-translate。看起来像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);
});

BTW我在Chrome中测试了它

Answer 1

如果你运行下面的代码，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);

Answer 2

这是由于新引入的chrome bug。当所有内容最初都处于0的z平移时，Chrome似乎会尝试快速路径渲染部分渲染。如果您将场景添加到场景中的no zero z且不透明度为0，则可以欺骗Chrome正确绘制。

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

当我制作一个更简单的示例并将文件作为chrome bug时，我将编辑此帖子。

GridLayout视图忽略z-translate

2 个答案: