著名容器下神秘的著名表面

Mysterious famous-surface under famous-container

本文关键字：表面      更新时间：2023-09-26

我正在组装一个简单的移动应用程序。我试图了解一个著名的曲面是从哪里来的，因为我认为当我试图将一个元素定位在右上角时，它会引起问题。（但现在让我们继续关注这个神秘的表面）

以下代码：

var mainContext = Engine.createContext()
var surface = new ContainerSurface
mainContext.add(surface)

产生元素结构：

<body class=" hasGoogleVoiceExt famous-root">
<div class="famous-container" style="perspective: 1000px; -webkit-perspective: 1000;">
    <div class="famous-surface"
         style="width: 1366px; height: 0px; opacity: 0.999999; -webkit-transform-origin: 0% 0%; -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);">
        <div class="famous-group famous-container-group"></div>
    </div>
</div>
</body>

哪里有<div class="著名曲面"><div>来自
我特别担心的是，高度被列为"0px"。

谢谢，

JD

这个DOM元素没有什么"神秘"之处。famous-surface正是该类的含义。元素是一个著名的Surface，它是由您的代码在.add(surface)到上下文时创建的。这个恰好是一个ContainerSurface，所以在通过添加元素创建group之前，它不会调整大小

var mainContext = Engine.createContext(); 
var surface = new ContainerSurface();
mainContext.add(surface);

解释

您在上面的第一行创建了一个上下文"famous-container"。第二行创建容器对象，但它仍然没有添加到上下文中。第三行在视图中创建容器，并添加DOM元素作为上下文元素的子元素。

尺寸：您没有向曲面添加尺寸，因此默认高度保持为0px。您的宽度来自undefined值（默认值），该值告诉famo.us将宽度设为其父项的宽度，在本例中为上下文。

尝试此代码：

var Engine = require('famous/core/Engine');
var ContainerSurface = require('famous/surfaces/ContainerSurface');
var Surface = require('famous/core/Surface');
var mainContext = Engine.createContext();
var cSurface = new ContainerSurface({
    properties: {
        backgroundColor: 'rgba(0, 0, 0, 0.25)'
    }
});
var surface = new Surface({
    size: [200, 200],
    content: 'I am 200x200',
    properties: {
        backgroundColor: 'rgba(255, 0, 0, 0.25)'
    }
});
cSurface.add(surface);
mainContext.add(cSurface);

然后，您将看到您的容器表面（灰色）是用它的子famous-group和子famous-surface（粉红色）创建的。

相关文章：