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
Post a Comment