javascript - How to add a border to a surface? -


this code i'm trying add border surface, i've tried many variations doing wrong? red bar, want kind of border on it, proves difficult, what's going on?

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

it seems surface has small height draw 10px border. should add line style border e.g. solid. try following see border:

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


Comments

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -