缩放文本以适应在Famo.us表面

Question

这里的表面

this.gymNameSurface = new Surface({ 
    size: [true, gymDetailItemHeight], 
    classes: ["gym_name_details"], 
    content: ['<div id="gym_name_details">',this.options.data.gymName.properties.gymName,'</div>'].join(''), 
    properties: { 
    backgroundColor: 'black', 
    fontSize: "2em", 
    lineHeight: '72px' 
    } 
}) 

在情况下，当健身房的名字是在一定＃字符，“2em的”是完美的大小。在体育场名称超过特定字符数的情况下，它太大了。

如果我不希望表面宽度> window.innerWidth/2，我该如何动态调整表面内文本的fontSize大小？

感谢

Answer 1

你可以用普通的js做到这一点：

var fontsize = "2em"; // Less text - big font 
if(this.options.data.gymName.properties.gymName.length > 32) { 
    fontsize = "1.4em"; // More text - smaller font size 
} 

然后在您的表面性能：

properties: { 
    ... 
    fontSize: fontsize, 
    ... 
} 

Answer 2

你可能不知道你的文本将有多宽在刚开始时，因此你不会知道为你的字体选择什么字体大小，但是你可以在之后计算它在之后它存在于DOM中。事情是这样的：在commit function of a Surface

gymNameSurface.on('deploy', function() { 

    var surfaceWidth = $('#gymNameSurface').width(); // or get the surface width on Surface.prototype.commit from the context. 
    var $myText = $('#text'); 
    var textWidth = $myText.width(); 
    var fontSize = 24; // randomly picked 
    var ratio = surfaceWidth/textWidth; 

    fontSize = fontSize*ratio; 

    $myText.css({'font-size': fontSize+'em'}); // or whatever unit you are using. 
}); 

提示：从上下文可以预先确定一个表面的宽度它的内容（DOM元素）之前甚至被部署。

Answer 3

感谢vtntimo，这里的最终代码：

this.gymNameSliderFontSize = "1.9em" 
if (this.options.data.gymName.properties.gymName.length > 22) { 
    this.gymNameSliderFontSize = "1.1em"; // More text - smaller font size 
} else if (this.options.data.gymName.properties.gymName.length > 21) { 
    this.gymNameSliderFontSize = "1.2em"; 
} else if (this.options.data.gymName.properties.gymName.length > 20) { 
    this.gymNameSliderFontSize = "1.3em"; 
} else if (this.options.data.gymName.properties.gymName.length > 19) { 
    this.gymNameSliderFontSize = "1.4em"; 
} else if (this.options.data.gymName.properties.gymName.length > 18) { 
    this.gymNameSliderFontSize = "1.5em"; 
} else if (this.options.data.gymName.properties.gymName.length > 17) { 
    this.gymNameSliderFontSize = "1.6em"; 
} else if (this.options.data.gymName.properties.gymName.length > 16) { 
    this.gymNameSliderFontSize = "1.7em"; 
} else if (this.options.data.gymName.properties.gymName.length > 15) { 
    this.gymNameSliderFontSize = "1.9em"; 
} 

this.gymNameSurface = new Surface({ 
    size: [true, gymDetailItemHeight], 
    classes: ["gym_name_details"], 
    content: ['<div id="gym_name_details">',this.options.data.gymName.properties.gymName,'</div>'].join(''), 
    properties: { 
    backgroundColor: 'black', 
    fontSize: this.gymNameSliderFontSize, 
    lineHeight: '72px', 
    letterSpacing: '1px' 
    } 
})