Question

angular directive使用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 promise的一部分创建的。

我尝试了font-size="project.wordSize"并传递了一串{from:0.06, to: 0.04}（根据大小不同的数字）但是，这并没有奏效。我假设因为project.wordSize是承诺的一部分，所以在创建元素时它不可用，因此fontSize将等于null。

Answer 1

我最终使用以下代码修改了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');
   }

  ...
}

不是最好的，而是快速的解决方案。

Angular-jQCloud：根据单词数量调整单词大小

1 个答案: