Famous / engine

MIT License
1.75k stars 250 forks source link

Ideas for solving blurred text on transform scaling #434

Open jd-carroll opened 9 years ago

jd-carroll commented 9 years ago

When the matrix3d contains decimal values, associated text content appears blurry. On Chome 43, open the developer tools and set the size of the window to an odd width & height and run the following code:

'use strict';

var DOMElement = require('famous/dom-renderables/DOMElement');
var FamousEngine = require('famous/core/FamousEngine');
var Size = require('famous/core/Size');

if (window.innerWidth % 2 === 0 || window.innerHeight % 2 === 0) {
    throw new Error('the innerWidth and innerHeight are not odd numbers');
}

FamousEngine.init();

var logo = FamousEngine.createScene().addChild();

var domLogo = new DOMElement(logo, {
    properties: {
        'background-color': '#49afeb',
        'white-space': 'nowrap',
        'text-overflow': 'ellipsis'
    }
});
domLogo.setContent('The quick brown fox jumps over the lazy dog, the quick brown fox jumps over the lazy dog');

logo
    .setSizeMode(Size.ABSOLUTE, Size.ABSOLUTE)
    .setAbsoluteSize(100, 100)
    .setAlign(0.5, 0.5)
    .setMountPoint(0.5, 0.5)
    .setOrigin(0.5, 0.5);

The text appears blurry because of the .5 in the transform, removing the .5 causes the text to appear crisp/sharp. (This is a known issue)

I'm wondering if a flag should be available that causes the transform calculations to be rounded to the nearest decimal... ? Or will this cause too much performance overhead?

Other ideas?