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'是完美的尺寸。在健身房名称超过某个字符数的情况下，它太大了。

如果我不希望曲面的宽度为＆gt;，如何动态调整曲面内文本的fontSize？ window.innerWidth / 2

谢谢

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中。像这样：

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. });

提示commit function of a Surface：从上下文中，您可以在表面内容（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'
  }
})

缩放文本以适合Famo.us Surface

3 个答案: