缩放后表面内容质量差或由于带有透视选项的 Z 平移

Question

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);

在 onClick 事件中，以下代码导致显示内容的质量非常差 'im a content'：
1) modifier.setTransform(Transform.translate(0, 0, 300));
或者
2) modifier.setTransform(Transform.scale(3, 3, 1));

我在这里做错了什么？如何强制 famo.us 在转换后重新呈现内容以获得更好的质量？

Answer 1

这与其说是 Famo.us 的问题，不如说是浏览器的问题。 See the issue here. Windows Chrome 浏览器?

I tested it using this code. Example jsBin

Chrome (39.0.2171.95) 不工作
Firefox (31) 正在工作
IE (11.0.15) 正在工作

  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;
  });

缩放后表面内容质量差或由于带有透视选项的 Z 平移

bad quality of a surface content after scaling or as a result of Z-translate with perspective option

famo.us