0

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;
})
31415926
  • 3,811
  • 7
  • 47
  • 78
  • I'm not sure why this is happening, but if you set the `ImageSurface`'s width to something other than `true` then the origin works correctly. example: http://codepen.io/anon/pen/raYabB – Moti Azu Feb 05 '15 at 13:46
  • @Moti Azu, But I need to keep the aspect ratio – 31415926 Feb 05 '15 at 13:54

0 Answers0