adds gradient function to ballrenderer

This commit is contained in:
Francisco Dans 2015-03-09 10:29:51 +01:00
parent c524df2f01
commit 49d7d5b300
2 changed files with 30 additions and 8 deletions

View File

@ -218,16 +218,36 @@ BallRenderer.prototype = {
}
this.isoplethLayer = iso;
},
colorize: function (pixels, gradient) {
for (var i = 3, len = pixels.length, j; i < len; i += 4) {
j = pixels[i] * 4; // get gradient color from opacity value
colorize: function () {
for (var i = 3, len = this.pointLayer.length, j; i < len; i += 4) {
j = this.pointLayer[i] * 4; // get gradient color from opacity value
if (j) {
pixels[i - 3] = gradient[j];
pixels[i - 2] = gradient[j + 1];
pixels[i - 1] = gradient[j + 2];
this.pointLayer[i - 3] = this._grad[j];
this.pointLayer[i - 2] = this._grad[j + 1];
this.pointLayer[i - 1] = this._grad[j + 2];
}
}
},
gradient: function (grad) {
// create a 256x1 gradient that we'll use to turn a grayscale heatmap into a colored one
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
gradient = ctx.createLinearGradient(0, 0, 0, 256);
canvas.width = 1;
canvas.height = 256;
for (var i in grad) {
gradient.addColorStop(i, grad[i]);
}
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 1, 256);
this._grad = ctx.getImageData(0, 0, 1, 256).data;
return this;
}
}

View File

@ -399,8 +399,10 @@ var ballRenderer = require('./ball.js');
flush: function(full){
this._ctx.setTransform(1, 0, 0, 1, 0, 0);
if(!this.ballRenderer) return;
this.ballRenderer.contour(6);
this.ballRenderer.isopleth();
//this.ballRenderer.contour(6);
//this.ballRenderer.isopleth();
this.ballRenderer.gradient({0.1:"#21313E",0.3:"#20575F",0.5:"#268073",0.7:"#53A976",0.9:"#98CF6F",1:"#EFEE69"});
this.ballRenderer.colorize();
this.ballRenderer.draw();
this.ballRenderer.invalidate(full);
}