Sizing

There are two ways to change the size of elements in Famo.us:

By modifying the size property of an element
By scaling the element using a transform

Let’s take a quick look at both of these key techniques.

Modifying the base size

When we modify the size property, we are changing the base size of the element: the size, in pixels, that the element will appear to be before any transforms have been applied to it. We can modify the property directly on the surface, or use a modifier to apply a size to multiple elements in the render tree.

Setting the size property directly

Setting the size property is simplest, but is limited because the size is only applied to that one element:

var surface = new Surface({
    size: [100, 200]
});

Setting the size using a modifier

The more flexible approach is to use a modifier. This way, we can apply that size to many elements in the render tree at once, important if we want to achieve parent-aware sizing:

var modifier = new Modifier({
    size: [100, 200]
});

var surface = new Surface();

context.add(modifier).add(surface);

Transforming the scale

When we scale an element using a transform, we are changing its size with respect to its current size. We can use a transform to apply a scale factor in each of the three dimensions:

var surface = new Surface({
    size: [100, 100]
});

var modifier = new Modifier({
    // Each value is a *factor* that we intend
    // to scale the element by. 
    transform: Transform.scale(1.1, 1.2, 2.0)
});

context.add(modifier).add(surface);

A value of 1.0 would represent no change in scale (as in multiplying a value by 1), a value less than 1 would represent scaling down, and a value greater than 1 would represent scaling up.

Note: Transforms are cumulative. If we were to apply a scale transform to an element after a scale transform had already been applied, that second transform would apply its scale on top of the previous scaling.

Next: Positioning »