Skip to content
Browse files

Fix for Retina displays.

The canvas backing store ratio is automatically detected and taken into
account when computing the sprites.
  • Loading branch information...
1 parent 0597b96 commit 849b463527bb8357c5cb6b2f8ceb0a9f5efa199a @jasondavies committed Jul 4, 2012
Showing with 41 additions and 9 deletions.
  1. +13 −9 d3.layout.cloud.js
  2. +28 −0 package.json
View
22 d3.layout.cloud.js
@@ -201,7 +201,7 @@
// Load in batches for speed.
function cloudSprite(d, data, di) {
if (d.sprite) return;
- c.clearRect(0, 0, cw << 5, ch);
+ c.clearRect(0, 0, (cw << 5) / ratio, ch / ratio);
var x = 0,
y = 0,
maxh = 0,
@@ -210,8 +210,8 @@
while (++di < n) {
d = data[di];
c.save();
- c.font = (d.size + 1) + "px " + d.font;
- var w = c.measureText(d.text + "m").width,
+ c.font = ~~((d.size + 1) / ratio) + "px " + d.font;
+ var w = c.measureText(d.text + "m").width * ratio,
h = d.size << 1;
if (d.rotate) {
var sr = Math.sin(d.rotate * cloudRadians),
@@ -232,7 +232,7 @@
maxh = 0;
}
if (y + h >= ch) break;
- c.translate(x + (w >> 1), y + (h >> 1));
+ c.translate((x + (w >> 1)) / ratio, (y + (h >> 1)) / ratio);
if (d.rotate) c.rotate(d.rotate * cloudRadians);
c.fillText(d.text, 0, 0);
c.restore();
@@ -246,7 +246,7 @@
d.y0 = -d.y1;
x += w;
}
- var pixels = c.getImageData(0, 0, cw << 5, ch).data,
+ var pixels = c.getImageData(0, 0, (cw << 5) / ratio, ch / ratio).data,
sprite = [];
while (--di >= 0) {
d = data[di];
@@ -264,7 +264,7 @@
for (var j = 0; j < h; j++) {
for (var i = 0; i < w; i++) {
var k = w32 * j + (i >> 5),
- m = (pixels[((y + j) * (cw << 5) + (x + i)) << 2] ? 1 : 0) << (31 - (i % 32));
+ m = pixels[((y + j) * (cw << 5) + (x + i)) << 2] ? 1 << (31 - (i % 32)) : 0;
if (p) {
if (j) sprite[k - w32] |= m;
if (j < w - 1) sprite[k + w32] |= m;
@@ -357,12 +357,16 @@
var cloudRadians = Math.PI / 180,
cw = 1 << 11 >> 5,
ch = 1 << 11,
- canvas;
+ canvas,
+ ratio = 1;
if (typeof document !== "undefined") {
canvas = document.createElement("canvas");
- canvas.width = cw << 5;
- canvas.height = ch;
+ canvas.width = 1;
+ canvas.height = 1;
+ ratio = Math.sqrt(canvas.getContext("2d").getImageData(0, 0, 1, 1).data.length >> 2);
+ canvas.width = (cw << 5) / ratio;
+ canvas.height = ch / ratio;
} else {
// node-canvas support
var Canvas = require("canvas");
View
28 package.json
@@ -0,0 +1,28 @@
+{
+ "name": "d3.layout.cloud",
+ "version": "1.0.1",
+ "description": "Generate word clouds in JavaScript.",
+ "keywords": [
+ "word",
+ "cloud",
+ "tag",
+ "visualization",
+ "canvas"
+ ],
+ "homepage": "http://www.jasondavies.com/wordcloud/",
+ "author": {
+ "name": "Jason Davies",
+ "url": "http://www.jasondavies.com/"
+ },
+ "repository": {
+ "type": "git",
+ "url": "http://github.com/jasondavies/wordcloud.git"
+ },
+ "main": "d3.layout.cloud.js",
+ "dependencies": {
+ "canvas": "0.10.x"
+ },
+ "devDependencies": {
+ "uglify-js": "1.2.x"
+ }
+}

0 comments on commit 849b463

Please sign in to comment.
Something went wrong with that request. Please try again.