Javascript 缩放文本以适应Famo.us曲面

这是表面

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

this.gymNameSurface=新曲面({
大小：[正确，项目高度]，
课程：[“健身房名称详细信息”]，
内容：[''，this.options.data.gymName.properties.gymName''，].join（''），
特性：{
背景颜色：“黑色”，
字体大小：“2米”，
线宽：“72px”
}
})

如果健身房的名称少于一定数量的字符，“2em”是最合适的尺寸。例如，当健身房名称超过一定数量的字符时，它就太大了

若我不希望曲面的宽度为>window.innerWidth/2，如何动态调整曲面内文本的字体大小

---

谢谢

您可以用纯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,
    ...
}

---

起初，您可能不知道文本的宽度，因此您不知道为字体选择什么字体大小，但可以在DOM中存在文本后进行计算。大概是这样的：

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元素）部署之前预先确定曲面的宽度。

多亏了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'
  }
})

this.gymNameSliderFontSize=“1.9em”
if（this.options.data.gymName.properties.gymName.length>22）{
this.gymNameSliderFontSize=“1.1em”//更多文本-更小的字体大小
}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=新曲面（{
大小：[正确，项目高度]，
课程：[“健身房名称详细信息”]，
内容：[''，this.options.data.gymName.properties.gymName''，].join（''），
特性：{
背景颜色：“黑色”，
fontSize:this.gymNameSliderFontSize，
线宽：“72px”，
字母间距：“1px”
}
})

下面评论trustkr的答案：您不需要jQuery来检查元素高度。通过

mySurface.getSize（true）

，您可以使用Famo.us获取元素的宽度和高度。true参数意味着获取元素的实际大小，而不是属性中设置的值。如果

s，则向下选择树
var len=this.options.data.gymName.properties.gymName.length；var size=Math.max（1,7-（len-16）；if（size>7）size=9；this.gymNameSliderFontSize=“1”。+size+“em”；
也可以工作（或数组、带键的对象等）。