为什么画布中的wordcloud模糊？ [英] Why the wordcloud in the canvas is blurry?

问题描述

这是我有问题的代码

  $（document）。 ready（render）function render（）{wl = [['hello'，12]，['dear'，10]，['a'，9]，['Joe'，5]，['8'，2 ]]; $ canvas = $（'。wordcloud-canvas'）; options = {list：wl，fontFamily：'Times，serif'，weightFactor：2，color：'＃f02222'，rotationRatio：0，rotationSteps：0，shuffle：false，backgroundColor：'white'，drawOutOfBound：false，gridSize： 32}; window.WordCloud（$ canvas [0]，options）; }  

  .wordcloud-view {display：block;边距：01px 0;宽度：100％;高度：100％；}。wordcloud-container {边框：1px蓝色固体；填充：2px；宽度：600像素；高度：300像素； margin：0px;}。wordcloud-canvas {width：600px;高度：300像素；}  

 < script src = https ：//cdnjs.cloudflare.com/ajax/libs/wordcloud2.js/1.0.6/wordcloud2.min.js>< / script>< script src = https://ajax.googleapis.com/ ajax / libs / jquery / 2.1.1 / jquery.min.js>< / script>< div class = wordcloud-view> < div class = wordcloud-container> < canvas id = wordcloud-canvas class = wordcloud-canvas>< / canvas> < div class = user-input>< / div> < div>< / div>< / div>< / div>  

以某种方式输出非常模糊：

哪些因素使此处的输出模糊？

我正在使用

Here is my code in question:

$(document).ready(render)


function render() {

  wl = [['hello', 12], ['dear', 10], ['a', 9], ['Joe', 5], ['8', 2]];

  $canvas = $('.wordcloud-canvas');
  options = {
    list           : wl,
    fontFamily     : 'Times, serif',
    weightFactor   : 2,
    color          : '#f02222',
    rotateRatio    : 0,
    rotationSteps  : 0,
    shuffle        : false,
    backgroundColor: 'white',
    drawOutOfBound : false,
    gridSize       : 32
  };
    
  window.WordCloud($canvas[0], options);
  
}

.wordcloud-view {
  display: block;
  margin: 01px 0;
    width: 100%;
    height: 100%;
}
.wordcloud-container {
  border: 1px blue solid;
  padding: 2px;
  width: 600px;
  height: 300px;
  margin: 0px;
}

.wordcloud-canvas {
  width: 600px;
  height: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/wordcloud2.js/1.0.6/wordcloud2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wordcloud-view">
  <div class="wordcloud-container">
	  <canvas id="wordcloud-canvas" class="wordcloud-canvas"></canvas>
	  <div class="user-input"></div>
  <div></div>
</div></div>

Somehow the output is very blurry:

What factors are blurring the output here?

I am using wordcloud2.js to generate the word cloud.

I have tried increasing the grid size but it does not help. I think I am at loss here because I do not understand how the options works with the canvas.

You can also find the above code in this codepen: https://codepen.io/kongakong/pen/jaEMXG

解决方案

Add width="600" and height="300" to the element (or set it with JS before rendering the wordcloud – $canvas.attr('width', '600').attr('height', '300')).

It's not same as setting it in CSS only, details here: stackoverflow.com/a/43364730/3776299

$(document).ready(render);


function render() {
  var wl = [['hello', 12], ['dear', 10], ['a', 9], ['Joe', 5], ['8', 2]];

  var $canvas = $('.wordcloud-canvas');
  // this line is the only change from your snippet:
  $canvas.attr('width', '600').attr('height', '300');
  var options = {
    list           : wl,
    fontFamily     : 'Times, serif',
    weightFactor   : 2,
    color          : '#f02222',
    rotateRatio    : 0,
    rotationSteps  : 0,
    shuffle        : false,
    backgroundColor: 'white',
    drawOutOfBound : false,
    gridSize       : 32
  };
    
  window.WordCloud($canvas[0], options);
  
}

.wordcloud-canvas {
  width: 600px;
  height: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/wordcloud2.js/1.0.6/wordcloud2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="wordcloud-canvas" class="wordcloud-canvas"></canvas>

That of course leaves the words a bit undersized, because of the small weightFactor in your options. Values around 6-7 work pretty well with the 600x300 size. You can also calculate the factor based on the canvas size and word weight dynamically, for example:

weightFactor: function(size) {
    return Math.pow(size, 2.3) * $canvas.width() / 1024;
},

[taken & adjusted from the wordcloud2 website("Configuration" tab)]

这篇关于为什么画布中的wordcloud模糊？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！