Отзывчивая ширина с wordcloud2.js (элемент HTML5 Canvas HTML5)

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

Вопрос

с wordcloud2.js Вы можете создать красивые и легкие WordClouds на Canvas-Elements .У меня на самом деле нет проблем с этим скриптом, на самом деле только с элементом холста в целом: я хотел бы иметь адаптивную ширину (в этом случае, связанном с шириной браузера).

Это показывает правильную ширину (100%), но холст просто активирован, а «изображение» искажена.Если я сохраню «PNG», у него есть старое / базовое разрешение, заданное скриптом.

Как это исправить? 

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

Это было полезно?

Решение

Я получил это!Sourround холст с << Strong> Div > Элемент, который на 100% ширина и имеет идентификатор «SOURROUNDING_DIV». 

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

в << Strong> Script > Добавить перед опции var : 

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

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

canvas.height = div.offsetHeight;

canvas.width  = div.offsetWidth;
.

Это все: -)

Другие советы

<canvas> - это растровое изображение «холст», просто подумайте об этом как об этом как простой генеракодицетагкод для JavaScript для рисования пикселей.Вы не можете сделать это «отзывчивым» так же, как вы не можете сделать вещи на изображении отзывчивым с заменой изображения.

, который сказал, что я сделал экспериментальную функцию, которая использует генеракодицетагкод как «холст» и нарисовать текст генеракодицетагкодами.Они все еще являются абсолютным позиционным положением, но если вы хотите написать дополнительный JavaScript, чтобы переместить их, когда окно изменяется, вы сможете достичь адаптивного эффекта.

Удачи!

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top