Ancho responsivo con wordcloud2.js (elemento canvas html5)

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

Pregunta

Con wordcloud2.js puedes crear hermosas y fáciles nubes de palabras en elementos-de-lienzo.Realmente no tengo problemas con este script, en realidad sólo con el elemento lienzo en general:Me gustaría tener un ancho de respuesta (en este caso relacionado con el ancho del navegador).

Muestra el ancho correcto (100%), pero el lienzo simplemente está ampliado y la "imagen" está distorsionada.Si guardo el "png", tendrá la resolución antigua/básica proporcionada por el script.

¿Como arreglarlo?

<!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>
¿Fue útil?

Solución

¡Lo tengo!Sourround el lienzo con un elemento << Strong> Div >, que es 100% de ancho y tiene la ID "SourRounding_Div". 

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

en el script << strong> > Agregar antes de las opciones VAR : 

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

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

canvas.height = div.offsetHeight;

canvas.width  = div.offsetWidth;

Eso es todo: -)

Otros consejos

<canvas> es un "lienzo" de mapa de bits, simplemente considérelo como un simple <img> para que JavaScript dibuje píxeles.No puede hacerlo "responsive" del mismo modo que no puede hacer que las cosas en una imagen respondan sin reemplazar la imagen.

Dicho esto, implementé una función experimental que utiliza un <div> como un "lienzo" y dibujar el texto con <span>s.Todavía están en posición absoluta, pero si desea escribir JavaScript adicional para moverlos cuando se cambia el tamaño de la ventana, es posible que pueda lograr el efecto de respuesta que desea.

¡Buena suerte!

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top