javascript - 家长famo.us修饰符如何影响他们的 child ？

Question

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

例如，如果我有一个如下所示的渲染树:

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

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

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

为什么要这么做？

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

谢谢。

这是一些代码:

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

要使其相对于原点整体过渡，需要有一个定位修饰符和一个单独的过渡修饰符。在上面的示例中，位置修改器还根据其自身的原点转换渲染节点。您希望它从位置的根原点(在本例中为上下文中心)过渡。

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