Famo.us 滚动视图定位

Question

在我的上下文中，我有一个滚动视图，我正在尝试使用状态修饰符中的 origin/align 属性将子元素定位在视图中。但是由于某种原因，当我滚动到底部时，最后一个表面没有正确显示。

我可以看到这是因为我正在使用原点/对齐，但我不确定在滚动视图中定位子元素的正确方法？如果有人能指出我正确的方向，那就太好了。

谢谢

代码： main.js

// Create the main context
var mainContext = Engine.createContext();

// Create scroll view 
var scrollView = new Scrollview();
var surfaces = [];
scrollView.sequenceFrom(surfaces);

// Create logo
var logoNode = new RenderNode();

var logo = new ImageSurface({
    size: [150, 112],
    content: 'img/logo.png',
    classes: ['logo']
});

// Center logo within context, center and set opacity
var modifier = new StateModifier({
    align: [0.5, 0.05],
    origin: [0.5, 0.05],
});

logoNode.add(modifier).add(logo);
logo.pipe(scrollView);
surfaces.push(logoNode);

var tribesLength = Object.keys(tribes).length;

for (var t = 0; t < tribesLength; t++) {
    var tribe = new TribesView({tribes: tribes, tribe: t});

    tribe.pipe(scrollView);
    surfaces.push(tribe);
}

mainContext.add(scrollView);

TribesView.js

function TribesView() {
    View.apply(this, arguments);

    _displayTribe.call(this);
}

TribesView.prototype = Object.create(View.prototype);
TribesView.prototype.constructor = TribesView;

TribesView.DEFAULT_OPTIONS = {
    tribes: {},
    tribe: 0,
};

function _displayTribe() {
    var tribes = this.options.tribes;
    var tribe = this.options.tribe;

    var node = new RenderNode();

    var surface = new Surface({
        size: [, 100],
        content: tribes[tribe]['name'],
        properties: {
            background: tribes[tribe]['bg'],
            color: 'blue'
        }
    });

    var modifier = new StateModifier({
        origin: [0, 0.1],
        align: [0, 0.1]
    });

    node.add(modifier).add(surface);
    surface.pipe(this._eventOutput);
    this.add(node);
}

module.exports = TribesView;

Answer 1

问题出在你所怀疑的，来自使用..

var modifier = new StateModifier({
    origin: [0, 0.1],
    align: [0, 0.1]
});

在 _displayTribe 函数中。您必须记住，尽管 TribeView 被标记为视图，但它并不能代表屏幕上的视觉内容。这意味着当您将此修饰符添加到视图内的表面时，视图认为它是一个地方，将在滚动视图中布局，而修饰符会将其放在另一个地方（在您的情况下屏幕太低）。

很难给你一个清晰的例子，因为我没有数据或图像或任何东西让这个看起来不错。如果您想在 TribeViews 中使用修饰符，请查看链修饰符。我发现它有助于在不使用 containerSurface 的情况下创建一种容器表面。

这是我对 _displayTribe 所做的，它为内容文本提供了相对于视图的偏移量..

function _displayTribe() {
    var tribes = this.options.tribes;
    var tribe = this.options.tribe;

    var surface = new Surface({
        size: [undefined, 100],
        properties: {
            color: 'blue',
            border:'1px solid black'
        }
    });

    this.add(surface)

    var text = new Surface({
        size:[undefined,true],
        content: "Helloo",
    })

    chain = new ModifierChain()

    var containerModifier = new StateModifier({
        size: [undefined, 100],
    });

    var modifier = new StateModifier({
        origin: [0, 0.1],
        align: [0, 0.1]
    });


    chain.addModifier(modifier)
    chain.addModifier(containerModifier)

    this.add(chain).add(text);

    surface.pipe(this._eventOutput);
}

我删除了任何与“资产”相关的内容，因为我无法使用它。我添加到视图中的第一个表面完全未修改。这让我们可以看到 scrollview 将我们的视图放在哪里。对于文本表面，我使用真实大小，并创建一个 ModifierChain 来模拟我之前提到的容器。为此，您可以定义两个修饰符，一个用于容器的大小，另一个用于在容器中定位，然后将它们链接在一起。

信息量很大，希望对你有帮助！