Larghezza reattiva con wordcloud2.js (elemento html5 tela)

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

Domanda

con wordcloud2.js Puoi creare wordclouds bellissimi e facili su tela-elements .Non ho davvero problemi con questo script, in realtà solo con l'elemento tela in generale: mi piacerebbe avere una larghezza reattiva (in questo caso relativo alla larghezza del browser).

Mostra la larghezza corretta (100%), ma la tela è appena upscattata e la "immagine" è distorta.Se salvo il "PNG" ha la risoluzione vecchia / base data dallo script.

Come ripararlo? 

<!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>
.

È stato utile?

Soluzione

L'ho preso!SOURROUND La tela con un elemento << Strong> Div >, che è largo al 100% e ha l'ID "Sourrounding_div". 

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

nello script << Strong> > Aggiungi prima delle opzioni var : 

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

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

canvas.height = div.offsetHeight;

canvas.width  = div.offsetWidth;
.

Questo è tutto: -)

Altri suggerimenti

<canvas> è un bitmap "tela", pensalo come un semplice <img> per JavaScript per disegnare pixel.Non puoi renderlo "reattivo" come non puoi rendere le cose su un'immagine reattiva w / o che sostituisce l'immagine.

Detto questo, ho implementato una caratteristica sperimentale che utilizza un <div> come "tela" e disegnare il testo con <span>s.Sono ancora posizionati assoluti, ma se vuoi scrivere ulteriore JavaScript per spostarli quando la finestra viene ridimensionata, potresti essere in grado di raggiungere l'effetto reattivo che desideri.

Buona fortuna!

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top