Question

似乎我对渲染树的工作原理有点困惑，或者更具体地说，修饰符如何影响它们的后代。

例如，如果我有一个看起来像的渲染树：

                     -------------------
                     | Global Modifier |
                     -------------------
                             |
            ---------------------------------------
            |                |                    |
    ----------------  ----------------   --------------------
    | Blue Surface |  | Top Left Mod |   | Bottom Right Mod |
    ----------------  ----------------   --------------------
                             |                    |
                      -----------------    ---------------
                      | Green Surface |    | Red Surface |
                      -----------------    ---------------

全局修改器设置整体大小。
蓝色表面填满了空间。
左上角和右下角修改器的尺寸较小，并使用origin和align将其子表面与角落对齐。

到目前为止，这么好。这一切都运作良好。但是，如果我对全局修改器进行转换，例如旋转它，我期望整个单元旋转，但看起来我的三个表面中的每一个都围绕它们自己的原点独立旋转。

为什么这样做？

如何将其变成一个我可以整体操作的单位？

感谢。

这里有一些代码：

http://jsfiddle.net/scucLw0h/1/

var Surface = famous.core.Surface;
var View = famous.core.View;
var Modifier = famous.core.Modifier;
var StateModifier = famous.modifiers.StateModifier;
var Engine = famous.core.Engine;
var Transform = famous.core.Transform;
var Transitionable = famous.core.Transitionable;


var globalModifier = new StateModifier({
    size: [100, 100],
    origin: [.5, .5],
    align: [.5, .5]
});

var topLeftModifier = new Modifier({
    size: [50, 50],
    align: [0, 0],
    origin: [0, 0]
});

var bottomRightModifier = new Modifier({
    size: [50, 50],
    align: [1, 1],
    origin: [1, 1]
});

var blueSurface = new Surface({
    properties: {
        backgroundColor: 'blue'
    }
});

var redSurface = new Surface({
    properties: {
        backgroundColor: 'red'
    }
});

var greenSurface = new Surface({
    properties: {
        backgroundColor: 'green'
    }
});


var mainContext = Engine.createContext();

var globalContext = mainContext.add(globalModifier);

globalContext.add(blueSurface);

globalContext.add(topLeftModifier).add(greenSurface);
globalContext.add(bottomRightModifier).add(redSurface);


globalModifier.setTransform(Transform.rotate(0, 45, 0), {duration: 1000});

Answer 1

在famo.us中，起源是两个不同的事情，这对我来说也是麻烦。 Famo.us university解释说：

更改原点不仅仅是更改子元素上的锚点。 Origin也是关于转换应用的重点。

然而，使用你的代码，在我看来，对齐是决定应用哪些转换的关键点。至少如果我将内部对齐设置为[0,0]，那么它按预期工作，请参阅： fiddle: http://jsfiddle.net/nzmsvans/

我没有说明我完全理解 - 也许有一个错误 - 但也许它会有所帮助。

Answer 2

要使其相对于原点进行整体转换，需要有一个定位修改器和一个单独的转换修改器。在上面的示例中，位置修改器还基于它自己的原点转换渲染节点。您希望它从位置的根源（本例中的上下文中心）转换。

                     -------------------
                     | Global Modifier | <=== Modifier for position
                     -------------------
                             |
                     -------------------
                     |  Root Modifier  | <=== Modifier that will transition
                     -------------------        the root node from/to position
                             |
            ---------------------------------------
            |                |                    |
    ----------------  ----------------   --------------------
    |   Blue Mod   |  |  Green Mod   |   |     Red Mod      | <=== Positions each renderable
    ----------------  ----------------   --------------------        with respect to the root
            |                |                    |
    ----------------  -----------------    ----------------
    | Blue Surface |  | Green Surface |    | Red Surface  |
    ----------------   -----------------    ---------------

以下是一些显示如何完成的代码。

<强> Click Here for a running example

var globalModifier = new Modifier({
  size: [100, 100],
  origin: [0, 0],
  align: [0.5, 0.5],
  transform: Transform.translate(0, 0, 0.0001)
});

var rootModifier = new Modifier({
  size: [undefined, undefined],
  origin: [0, 0],
  align: [0, 0],
  transform: Transform.translate(0, 0, 0.0001)
});

var blueModifier = new Modifier({
  size: [100, 100],
  origin: [0.5, 0.5],
  align: [0, 0],
  transform: Transform.translate(0, 0, 1)
});

var greenModifier = new Modifier({
  size: [50, 50],
  origin: [0, 0],
  align: [0, 0],
  transform: Transform.translate(0, 0, 2)
});

var redModifier = new Modifier({
  size: [50, 50],
  origin: [1, 1],
  align: [0, 0],
  transform: Transform.translate(0, 0, 2)
});

var blueSurface = new Surface({
  content: 'blue',
  size: [undefined, undefined],
  classes: ['double-sided'],
  properties: {
    color: 'white',
    textAlign: 'right',
    backgroundColor: 'blue'
  }
});

var redSurface = new Surface({
  content: 'red',
  size: [undefined, undefined],
  classes: ['double-sided'],
  properties: {
    backgroundColor: 'red'
  }
});

var greenSurface = new Surface({
  content: 'green',
  size: [undefined, undefined],
  classes: ['double-sided'],
  properties: {
    backgroundColor: 'green'
  }
});

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

var globalContext = mainContext.add(globalModifier);
var rootContext = globalContext.add(rootModifier);

rootContext.add(blueModifier).add(blueSurface);
rootContext.add(greenModifier).add(greenSurface);
rootContext.add(redModifier).add(redSurface);

父母famo.us修饰语如何影响他们的孩子？

2 个答案:

<强> Click Here for a running example