如何向表面添加邊框？

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

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

<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"/>