Как добавить изображение внутри контейнера или поверхности для параллакса

Я пытался изменить этот пример здесь

https://github.com/Famous/examples/tree/master/src/examples/surfaces/ImageSurface

Моя цель - сделать изображение под модификатором, который является дочерним элементом какого-то контейнера. Затем я могу сделать setTransform для этого модификатора, чтобы переместить изображение.

var Engine       = require("famous/core/Engine");
var ContainerSurface = require("famous/surfaces/ContainerSurface");
var Modifier     = require("famous/core/Modifier");
var ImageSurface = require("famous/surfaces/ImageSurface");

var mainCtx = Engine.createContext();

var image = new ImageSurface({
    size: [200, 200]
});

var container = new ContainerSurface({
    size: [200, undefined],
    properties:{
        backgroundColor: 'blue',
        overflow: 'hidden'
    }
});

image.setContent("content/famous_symbol.svg");

mainCtx.add(container).add(new Modifier({origin: [0, 0]})).add(image);

Я надеялся, что приведенный выше код покажет логотип в левом верхнем углу, а затем синий фон. Но пока я не вижу, чтобы изображение появлялось вообще.

Любая помощь?

ОБНОВЛЕНИЕ 1:

Я понял, выполняя эту работу:

container.add(new Modifier({origin: [0, 0]})).add(image);
mainCtx.add(container);

Это немного странно, потому что я думал, что это то же самое, что и это:

mainCtx.add(container).add(new Modifier({origin: [0, 0]})).add(image);

Может ли кто-нибудь сказать мне разницу?


javascript html css dom famo.us
person HP.    schedule 23.05.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Причина, по которой ваш первоначальный метод не работает так, как вы ожидали, заключается в том, что container имеет собственный метод с именем .add.

mainCtx.add(container); возвращает RenderNode, который содержит container, поэтому, если вы делаете mainCtx.add(container).add(...);, вы вызываете RenderNode.add. Если вы делаете container.add(...), то вы вызываете ContainerSurface.add вместо RenderNode.add; два разных метода с одним и тем же именем. ContainerSurface.add добавляет вещи к новому Context, существующему внутри ContainerSurface. Внутри файла ContainerSurface есть совершенно новое дерево графа сцены.

person trusktr    schedule 07.11.2014

arrow_upward
-1
arrow_downward

Разница уровней вложенности. Думайте с точки зрения потока HTML. (хотя это не то, что здесь происходит.)

Первоначально вы делали это:

<mainCtx>
  <container/>
  <image/>
</mainCtx>

Когда вы изменили его на:

container.add(new Modifier({origin: [0, 0]})).add(image);
mainCtx.add(container);

Вы добавили модификатор и изображение внутрь контейнера, а не сразу под ним.

<mainCtx>
  <container>
    <image/>
  </container>
</mainCtx>

Это не идеальный пример, но я надеюсь, что он объясняет, что здесь происходит.

ИЗМЕНИТЬ:

Я удалил модификатор из кода примера. Вы правы в том, что модификаторы так не работают. Мое объяснение было верно только для Renderables (объекты с Surface в качестве корневого объекта)

Модификаторы модифицируют все, что под ними связано. Ваша проблема в том, что вы относились к Renderables как к модификаторам.

person Sivli    schedule 26.05.2014
comment
Хм, я не знаю, верно ли это для .add(new Modifier({origin: [0, 0]})).add(image);, поскольку image будет ребенком modifier, как я убедил... - person HP.; 27.05.2014