Question

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

我可以看到这是因为我正在使用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虽然标记了一个视图，但它并不代表屏幕上的视觉效果。这意味着当您将此修改器添加到视图内的表面时，视图认为它是一个位置，将在scrollview中布局，并且修改器将把它放在另一个位置（在您的情况下在屏幕上太低）。

很难给你一个明确的例子，因为我没有数据或图像或任何东西使这个看起来中途好。如果要在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来模拟容器，如前所述。你可以通过定义两个修饰符来实现，一个用于容器的大小，另一个用于在容器中定位，然后将它们链接在一起。

很多信息，希望这有帮助！

Famo.us滚动视图定位

1 个答案: