Skip to content

Latest commit

 

History

History
135 lines (114 loc) · 3.14 KB

README.md

File metadata and controls

135 lines (114 loc) · 3.14 KB
Raw

almete.WordCloud

almete.WordCloud(words, cloudWidth, cloudHeight, {
  createCanvas = function() {
    return document.createElement('canvas');
  },
  fontFamily = 'serif',
  fontSizeRatio = 0,
  fontStyle = 'normal',
  fontVariant = 'normal',
  fontWeight = 'normal',
  gap = 0,
  rotation = 0,
  rotationUnit = 'turn',
  text = '',
  weight = 1,
})

Generates a cloud out of the words.

argument description
words An array of the words to place into the cloud. A word is an object which is resolved to {text, weight, rotation, rotationUnit, fontFamily, fontStyle, fontVariant, fontWeight}.
cloudWidth The width of the cloud, in pixels.
cloudHeight The height of the cloud, in pixels.
createCanvas Creates a new Canvas instance.
fontFamily The default font family for each word.
fontSizeRatio The font size ratio between the words. For example, if the value is 5, then the largest word will be 5 times larger than the smallest one. The value 5 has the same effect as the value 1/5.
fontStyle The default font style for each word.
fontVariant The default font variant for each word.
fontWeight The default font weight for each word.
gap The gap between the words. The value is relative to the font size.
rotation The default rotation for each word.
rotationUnit The default rotation unit for each word. Possible values are 'turn', 'deg' and 'rad'.
text The default text for each word.
weight The default weight for each word.

Returns bounded words as an array of objects.

[{
  centerLeft,
  centerTop,
  font,
  fontFamily,
  fontSize,
  fontStyle,
  fontVariant,
  fontWeight,
  height,
  left,
  rotationDeg,
  rotationRad,
  rotationTurn,
  text,
  textWidth,
  top,
  weight,
  width,
}]

demo

Try it out!

setup

npm

npm install almete.wordcloud

ES module

import WordCloud from 'almete.wordcloud';

Node

let WordCloud = require('almete.wordcloud');

browser

<script src="https://unpkg.com/almete.wordcloud"></script>

The function WordCloud will be available under the namespace almete.

usage

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
let words = [
  {text: 'romance', weight: 19, rotation: 45},
  {text: 'horror', weight: 3, rotation: -45},
  {text: 'fantasy', weight: 7, rotation: 45},
  {text: 'adventure', weight: 3, rotation: -45},
];
let boundedWords = almete.WordCloud(words, canvas.width, canvas.height, {
  fontFamily: 'Roboto',
  fontWeight: 'bold',
  rotationUnit: 'deg',
});
boundedWords.forEach(({
  centerLeft,
  centerTop,
  font,
  rotationRad,
  text,
}) => {
  ctx.save();
  ctx.translate(centerLeft, centerTop);
  ctx.rotate(rotationRad);
  ctx.font = font;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillStyle = 'LightCoral';
  ctx.fillText(text, 0, 0);
  ctx.restore();
});

see also