縮放文本以適應在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' 
    } 
})