Responsive Breite mit wordcloud2.js (Canvas-HTML5-Element)

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

Frage

Mit wordcloud2.js Sie können schöne und einfache Wortwolken erstellen Canvas-Elemente.Ich habe mit diesem Skript eigentlich keine Probleme, eigentlich nur mit dem Canvas-Element im Allgemeinen:Ich hätte gerne eine reaktionsfähige Breite (in diesem Fall bezogen auf die Browserbreite).

Es zeigt die richtige Breite (100 %), aber die Leinwand ist nur hochskaliert und das „Bild“ ist verzerrt.Wenn ich das „PNG“ speichere, hat es die alte/grundlegende Auflösung, die vom Skript vorgegeben ist.

Wie man es repariert?

<!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>
War es hilfreich?

Lösung

Ich habe es bekommen!Sourround Die Leinwand mit einem << strong> div > Element, das zu 100% breit ist und die ID "SourRounding_Div" hat.

generasacodicetagpre.

im << strong> script > addieren Sie sich vor den var-Optionen :

generasacodicetagpre.

das ist alles: -)

Andere Tipps

<canvas> ist eine Bitmap-„Leinwand“, stellen Sie sie sich einfach als Ebene vor <img> für JavaScript zum Zeichnen von Pixeln.Sie können es nicht „responsiv“ machen, genauso wie Sie Dinge auf einem Bild nicht responsiv machen können, ohne das Bild zu ersetzen.

Allerdings habe ich eine experimentelle Funktion implementiert, die a verwendet <div> als „Leinwand“ und zeichnen Sie den Text damit <span>S.Sie sind immer noch absolut positioniert, aber wenn Sie zusätzliches JavaScript schreiben möchten, um sie bei der Größenänderung des Fensters zu verschieben, können Sie möglicherweise den gewünschten Reaktionseffekt erzielen.

Viel Glück!

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top