Réactif de largeur avec wordcloud2.js (toile élément html5)

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

Question

Avec wordcloud2.js vous pouvez créer de magnifiques et facile wordclouds sur toile-éléments.Je n'ai pas vraiment de problèmes avec ce script, en fait seulement avec de la toile-élément en général:J'aimerais avoir un réactif de largeur (dans ce cas, portant sur le navigateur de largeur).

Il montre la largeur correcte (100%), mais la toile est juste rétrogrades et "l'image" est déformé.Si je sauver le "png" elle a l'ancienne/la base de la résolution donnée par le script.

Comment résoudre ce problème?

<!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>
Était-ce utile?

La solution

Je l'ai eu!Sourrouin la toile avec un élément << fort> div >, qui est 100% de large et a l'id "Sourrounding_Div". 

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

dans le script << Strong> > Ajouter avant que les options var sont : 

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

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

canvas.height = div.offsetHeight;

canvas.width  = div.offsetWidth;

C'est tout: -)

Autres conseils

<canvas> est un bitmap "toile", il suffit de penser à cela comme une plaine <img> pour le JavaScript pour dessiner des pixels.Vous ne pouvez pas le rendre "responsive" tout comme vous ne pouvez pas faire des choses sur une image réactive w/o remplacement de l'image.

Cela dit, je n'ai mis en place une fonctionnalité expérimentale qui utilisent un <div> comme une "toile" et dessiner le texte avec <span>s.Ils sont toujours absolu position, mais si vous voulez écrire du JavaScript supplémentaire pour les déplacer lorsque la fenêtre est redimensionnée, vous pourriez être en mesure d'atteindre le responsive effet que vous voulez.

Bonne chance!

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top