Ágil largura com wordcloud2.js (canvas html5)

StackOverflow https://stackoverflow.com//questions/25079736

Pergunta

Com wordcloud2.js você pode criar bonitas e fáceis wordclouds no lona-elementos.Eu realmente não tenho problemas com este script, na verdade, apenas com a tela elemento-geral:Eu gostaria de ter uma resposta largura (neste caso relacionados com o navegador de largura).

Ele mostra a largura correta (100%), mas a tela é apenas melhorada e a "imagem" é distorcida.Se eu salvar o "png" ele tem a velho/a resolução básica dada pelo script.

Como corrigir isso?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<script src="js/wordcloud2.js"></script>

<style type="text/css">    
#canvas_cloud{
width: 100%;
height:500px;
}
</style>

</head>

<body>

<canvas id="canvas_cloud"></canvas>

<script>

var options = 
{
  list : [ 
  ["Pear", "9"],
  ["Grape", "3"],
  ["Pineapple", "8"], 
  ["Apple", "5"]
  ],
  gridSize: Math.round(16 * document.getElementById('canvas_cloud').offsetWidth / 1024),
  weightFactor: function (size) {
    return Math.pow(size, 1.9) * document.getElementById('canvas_cloud').offsetWidth / 1024;
  }
}

WordCloud(document.getElementById('canvas_cloud'), options); 

</script>

</body>
</html>
Foi útil?

Solução

Eu tenho!Sourround a tela com um <div> elemento, que é 100% de largura e tem o id "sourrounding_div".

<div id="sourrounding_div" style="width:100%;height:500px">
<canvas id="canvas_cloud"></canvas>
</div>

No <script> antes de adicionar o var opções:

var div = document.getElementById("sourrounding_div");

var canvas = document.getElementById("canvas_cloud");

canvas.height = div.offsetHeight;

canvas.width  = div.offsetWidth;

Isso é tudo :-)

Outras dicas

<canvas> é um mapa de bits "lona", pense nisso como um simples <img> para o JavaScript para desenhar pixels.Você não pode fazer é "sensível" como você pode fazer coisas em uma imagem sensível w/o de substituir a imagem.

O que disse, eu fiz implementado um recurso experimental que usa uma <div> como uma "tela" e desenhar o texto com <span>s.Eles ainda estão posicionados absolutos, mas se você quiser escrever JavaScript adicional para movê-los quando a janela é redimensionada, você pode ser capaz de alcançar o responsiva de efeito que você deseja.

Boa sorte!

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top