0

我试图在这里修改这个例子

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

有人可以告诉我区别吗？

4

2 回答 2

0

您的原始方法无法按预期工作的原因是因为它container有自己的方法称为.add.

mainCtx.add(container);返回一个包含 的 RenderNode，container所以如果你这样做了，mainCtx.add(container).add(...);那么你就是在调用RenderNode.add. 如果你这样做，container.add(...)那么你打电话ContainerSurface.add而不是RenderNode.add; 同名的两种不同的方法。ContainerSurface.add将东西添加到Context存在于ContainerSurface. 里面有一个全新的场景图树ContainerSurface。

于 2014-11-07T18:49:14.943 回答
-1

嵌套级别的差异。从 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 视为修改器。

于 2014-05-26T20:29:32.207 回答