Question

这是我的代码我正试图在表面添加边框，我尝试了很多变化，我做错了什么？这只是一个红色的酒吧，我想要它的任何边界，但这证明是困难的，发生了什么？

var surface = new Surface({
    size: [window.innerWidth/2, 10],
    border: [10],
    properties: { 
        background: 'red',
        border:10,
        borderColor:'blue'}

});

var sizeModifier = new Modifier({
    size: [window.innerWidth, window.innerHeight]
});

var alignModifier = new Modifier({
    align: [0.5, 0.5],
    origin:[0.5, 0.5]
});

mainContext.add(sizeModifier).add(alignModifier).add(surface);

Answer 1

您的表面看起来高度太小，无法绘制10px的边框。您还应该为边框添加线条样式，例如固体。您可以尝试以下方法来查看边框：

var surface = new Surface({
    content: '<h1>Famous in JSFiddle</h1>',
    size: [window.innerWidth / 2, 100],
    border: [10],
    properties: {
        background: 'red',
        border: '10px solid',
        borderColor: 'blue'
    }
});

＆＃13;

Famous.loaded(function () {
    var Engine = Famous.Core.Engine;
    var Modifier = Famous.Core.Modifier;
    var RenderNode = Famous.Core.RenderNode;
    var Surface = Famous.Core.Surface;
    var Transform = Famous.Core.Transform;

    var mainContext = Engine.createContext();
    
    var surface = new Surface({
        content: '<h1>Famous in JSFiddle</h1>',
        size: [window.innerWidth / 2, 100],
        border: [10],
        properties: {
            background: 'red',
            border: '10px solid',
            borderColor: 'blue'
        }
    });

    var sizeModifier = new Modifier({
        size: [window.innerWidth, window.innerHeight]
    });

    var alignModifier = new Modifier({
        align: [0.5, 0.5],
        origin: [0.5, 0.5]
    });

    mainContext.add(sizeModifier).add(alignModifier).add(surface);

    
    /*
    var surface = new Surface({
        content: '<h1>Famous in JSFiddle</h1>'
    });

    var modifier = new Modifier({
        transform: Transform.translate(50, 50)
    });
    */

    //var node = new RenderNode(modifier);
    //node.add(surface);

    var appContext = mainContext; //Engine.createContext();
    //appContext.add(node);

    Engine.pipe(Application);
});

＆＃13;

<script src="https://rawgit.com/jperl/famous-compiled/97f85aaa64af255adfe0407c941e0e859b0759bc/dist/src/804b0adb.main.js"></script>
<script src="http://rawgit.com/jperl/famous-compiled/e9c12b1fa657820d3f9bad093ea72e8ee2dfec46/dist/src/4f231991.polyfills.js"></script>
<link href="https://rawgit.com/jperl/famous-compiled/e9c12b1fa657820d3f9bad093ea72e8ee2dfec46/dist/lib/famous/core/famous.css" rel="stylesheet"/>

＆＃13;

如何在曲面上添加边框？

1 个答案: