0.3.0 • Published 9 years ago

famous-sizeconstraint v0.3.0

Weekly downloads
1
License
-
Repository
github
Last release
9 years ago

famous-sizeconstraint

SizeConstraint makes it possible to set the following constraints on renderables:

OptionDescription
scaleScales the size proportionally to the parent-size (factor).
paddingInner width/height padding (pixels).
maxSets the maximum-size (pixels).
minSets the minimum-size (pixels).
ratioAspect ratio to enforce (factor).
sizeDefault size to use instead of the parent size (pixels).

Demos

Getting started

Install using bower or npm:

bower install famous-sizeconstraint

npm install famous-sizeconstraint

If necessary, add to the requirejs paths config:

require.config({
    paths: {
        ...
        'famous-sizeconstraint': 'bower_components/famous-sizeconstraint/SizeConstraint',
        ...
    }
});

Create a surface with a width 20px less than its parent:

var SizeConstraint = require('famous-sizeconstraint');

var sizeConstraint = new SizeConstraint({
	padding: [20, undefined]
});
this.add(sizeConstraint);
var surface = new Surface({ properties: { backgroundColor: 'blue' }});
sizeConstraint.add(surface);

Create a surface which is 50% its parent size:

Note: this is different from Transform.scale, as it does not apply a scale-matrix, but it merely changes the size.

var sizeConstraint = new SizeConstraint({
	scale: [0.5, 0.5]
});
this.add(sizeConstraint);
var surface = new Surface({ properties: { backgroundColor: 'blue' }});
sizeConstraint.add(surface);

Create a surface with a maximum-width of 400px, and a minimum-height of 100px:

var sizeConstraint = new SizeConstraint({
    max: [400, undefined],
    min: [undefined, 100]
});
this.add(sizeConstraint);
var surface = new Surface({ properties: { backgroundColor: 'blue' }});
sizeConstraint.add(surface);

Create a surface with an aspect ratio of 4/3:

var sizeConstraint = new SizeConstraint({
    ratio: [4, 3]
});
this.add(sizeConstraint);
var surface = new Surface({ properties: { backgroundColor: 'blue' }});
sizeConstraint.add(surface);

Documentation

Using multiple constraints

All of the constraints can be combined. When using multiple constraints, the following execution order is in effect:

size -> scale -> padding -> max -> min -> aspect-ratio

Contribute

Feel free to contribute to this project in any way. The easiest way to support this project is by giving it a star.

Contact

  • @IjzerenHein
  • http://www.gloey.nl
  • hrutjes@gmail.com (for hire)

© 2014 - Hein Rutjes