docs/examples/layout example 02 - percentages/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>GOWN.layout example: calculate width/height using in pixel using percentages</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="../../lib/pixi/pixi.js"></script>
<script src="../../dist/gown.js"></script>
</head>
<body>
<script>
var renderer = PIXI.autoDetectRenderer(800, 600,{backgroundColor : 0xffffff});
document.body.appendChild(renderer.view);
var stage = new PIXI.Container();
function createRect(color, parent) {
parent = parent || stage;
var rect = new PIXI.Graphics();
rect.percentWidth = 100;
rect.percentHeight = 100;
rect.color = color;
rect.drawMe = function() {
// you like to use PIXI.shapes for something more complicated
this.beginFill(this.color);
this.drawRect(0, 0, this._width, this._height);
}
parent.addChild(rect);
return rect;
}
var container = new PIXI.Container();
container.width = 660;
container.height = 50;
stage.addChild(container);
for (var i = 0; i < 6; i++) {
var rect = createRect(0xffffff*Math.random(), container);
}
rect.percentWidth = 40;
rect.percentHeight = 70;
var layout = new GOWN.layout.HorizontalLayout();
layout.gap = 5;
layout.layoutContainer(container);
for (i = 0; i < 6; i++) {
container.children[i].drawMe();
}
/*
nested_layout.gap = 3;
for (var i = 0; i < 3; i++) {
createRect(0x0000ff, container);
}
container.width = 200;
nested_layout.layoutContainer(container);
stage.addChild(container);
horizontal_layout.layout(stage.children, 400);
*/
renderer.render(stage);
</script>
</body>
</html>