0
var mainContext = Engine.createContext();
mainContext.setPerspective(500);

var surface = new Surface({
    content: 'im a content',
    size: [200, 200]
});
var modifier = new StateModifier();
mainContext.add(modifier).add(surface);

in onClick event the following code results in very bad quality of displayed content 'im a content':
1) modifier.setTransform(Transform.translate(0, 0, 300));
or
2) modifier.setTransform(Transform.scale(3, 3, 1));

What Im doing wrong here? How to force famo.us to rerender content after transformations for better quality?

31415926
  • 3,811
  • 7
  • 47
  • 78

1 Answers1

1

This is not so much an issue of Famo.us as it is the browser. See the issue here. Windows Chrome browser?

I tested it using this code. Example jsBin

  • Chrome (39.0.2171.95) Not Working
  • Firefox (31) Working
  • IE (11.0.15) Working
  var mainContext = Engine.createContext();
  mainContext.setPerspective(1000);

  var surface = new Surface({
    content: 'Famous Application',
    size: [200, 200],
    transform: Transform.scale(1, 1, 1),
    properties: {
      fontSize: '2em',
      backgroundColor: 'rgba(0, 0, 0, 0.4)'
    }
  });
  var modifier = new Modifier({
    origin: [0, 0],
    align: [0, 0]
  });
  mainContext.add(modifier).add(surface);

  surface.on('click', function() {
    console.log('clicked');
    if (!surface.clicked) {
      //modifier.setTransform(Transform.translate(0, 0, 300));
      modifier.setTransform(Transform.scale(3, 3, 1), {duration: 300}, function(){surface.setContent('');surface.setContent('<div>Scaled Now!</div>');});

    }
    else {
      modifier.setTransform(Transform.scale(1, 1, 1), {duration: 300}, function(){surface.setContent('');surface.setContent('Famous Application');});
    }
    surface.clicked = !surface.clicked;
  });
talves
  • 13,993
  • 5
  • 40
  • 63
  • Thanks. Is there at least a workaround for chrome? I need it crossbrowser – 31415926 Jan 04 '15 at 14:44
  • You may want to consider [using proportion](http://stackoverflow.com/questions/27767706/famo-us-using-proportionsfrom-in-modifiers/27769632#27769632) rather than scale, but you would not be able to transition :( – talves Jan 04 '15 at 19:58
  • as a workaround maybe it's possible to convert text to canvas and operate with an image OR to handle font size 'by hand' using surface css options? – 31415926 Jan 05 '15 at 13:04