使用 jqcloud 的角度指令:
<jqcloud words="project.words" auto-resize="true" delay="10" steps="7" font-size="{from:0.06, to:0.04}" style="width:100%; height: 250px;"></jqcloud>
我希望能够根据字数更改字体大小,因为它根据用户所在的页面被赋予不同的单词集。单词集是作为angularjs承诺的一部分创建的。
我尝试font-size="project.wordSize"
并传递给它一串{from:0.06, to: 0.04}
(根据大小有不同的数字),但是,这不起作用。我假设是因为project.wordSize
是承诺的一部分,因此在创建元素时它不可用,因此 fontSize 将等于 null。
我最终使用以下代码修改了jqcloud.js源代码:
drawWordCloud: function() {
...
// Generate font sizes
this.data.sizes = [];
if (this.sizeGenerator) {
// apply a multipler depending on the number of words
var multiplier = 1.1;
if(this.word_array.length < 5){
multiplier = 2.1;
}
else if(this.word_array.length < 10){
multiplier = 2;
}
else if(this.word_array.length < 20){
multiplier = 1.2;
}
}
for (i=0; i<this.options.steps; i++) {
this.data.sizes.push((this.sizeGenerator(this.options.width, this.options.height, i+1)).replace('px', '') * multiplier + 'px');
}
...
}
不是最好的,但是一个快速的解决方案。