javascript - 缩放文本以适合 Famo.us Surface

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,
    ...
}