I have containerSurface with Imagesurface inside. I want to resize my container and to keep my image in the center. for this i using modifier align and origin. The problem is that origin doesn't work for some reason.
Any ideas why? Is there any workaround?
The code pen implementation is here: http://codepen.io/Qvatra/pen/MYOYpz
var togle = false;
var mainCtx = Engine.createContext();
var mainNode = new View();
var rootModifier = new StateModifier({
size:[200,200],
align: [0.5, 0.5],
origin: [0.5, 0.5]
})
var cont = new ContainerSurface({
properties: {background: 'red'}
});
var mod = new StateModifier({
align: [0.5, 0.5],
origin: [0.5, 0.5] //<---- this doesn't work
});
var img = new ImageSurface({
content: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSbGYiXmH4bP2zLiyn8HGufqQWaUX4f_TGgntNvgSYuNi8fd9SRX27CAzpp',
size: [true, undefined]
});
cont.add(mod).add(img);
mainNode.add(rootModifier).add(cont);
mainCtx.add(mainNode);
Engine.on('click', function(){
if(!togle){
rootModifier.setSize([50,50], {duration: 1000});
} else {
rootModifier.setSize([200,200], {duration: 1000});
}
togle = !togle;
})