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

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

Он показывает правильную ширину (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>

responsive-design html5-canvas word-cloud
person Sebastian    schedule 01.08.2014    source источник
comment
Спасибо за ваш пример. Я поэкспериментировал с параметрами (gridSize и т. д.), но так и не нашел комбинации, которая хорошо рисовала бы слова. Ваш пример работает из коробки.   -  person Josef Biehler    schedule 04.03.2020

Ответы (2)


arrow_upward
9
arrow_downward

Я понял! Окружите холст элементом ‹div> шириной 100 % и идентификатором "sourrounding_div".

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

В ‹скрипте> добавьте перед параметрами var:

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

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

canvas.height = div.offsetHeight;

canvas.width  = div.offsetWidth;

Это все :-)

person Sebastian    schedule 01.08.2014

arrow_upward
1
arrow_downward

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

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

Удачи!

person timdream    schedule 01.08.2014