fixes cartocss comp-op conversion and adds clear color :D

This commit is contained in:
javi 2014-12-17 08:31:46 +01:00
parent d25011681a
commit e9f738914c
4 changed files with 43 additions and 3 deletions

View File

@ -29,6 +29,13 @@ var _torque_reference_latest = {
"default-meaning": "No buffer will be used",
"doc": "Extra tolerance around the Layer extent (in pixels) used to when querying and (potentially) clipping the layer data during rendering"
},
"-torque-clear-color": {
"css": "-torque-clear-color",
"type": "color",
"default-value": "rgba(255, 255, 255, 0)",
"default-meaning": "full clear",
"doc": "color used to clear canvas on each frame"
},
"-torque-frame-count": {
"css": "-torque-frame-count",
"default-value": "128",

View File

@ -180,7 +180,7 @@ GMapsTorqueLayer.prototype = torque.extend({},
if(this.hidden) return;
var t, tile, pos;
var canvas = this.canvas;
canvas.width = canvas.width;
this.renderer.clearCanvas();
var ctx = canvas.getContext('2d');
// renders only a "frame"

View File

@ -207,7 +207,7 @@ L.TorqueLayer = L.CanvasLayer.extend({
if(this.hidden) return;
var t, tile, pos;
var canvas = this.getCanvas();
canvas.width = canvas.width;
this.renderer.clearCanvas();
var ctx = canvas.getContext('2d');
for(t in this._tiles) {

View File

@ -18,6 +18,21 @@ var carto = global.carto || require('carto');
'}'
].join('\n');
var COMP_OP_TO_CANVAS = {
"src": 'source-over',
"src-over": 'source-over',
"dst-over": 'destination-over',
"src-in": 'source-in',
"dst-in": 'destination-in',
"src-out": 'source-out',
"dst-out": 'destination-out',
"src-atop": '',
"dst-atop": '',
"xor": '',
"darken": 'darken',
"lighten": 'lighten'
}
//
// this renderer just render points depending of the value
//
@ -36,6 +51,22 @@ var carto = global.carto || require('carto');
PointRenderer.prototype = {
clearCanvas: function() {
var canvas = this._canvas;
var color = this._Map['-torque-clear-color']
// shortcut for the default value
if (color === "rgba(255, 255, 255, 0)" || !color) {
this._canvas.width = this._canvas.width;
} else {
var ctx = this._ctx;
ctx.setTransform(1, 0, 0, 1, 0, 0);
var compop = this._Map['comp-op']
ctx.globalCompositeOperation = COMP_OP_TO_CANVAS[compop];
ctx.fillStyle = color;
ctx.fillRect(0, 0, this._canvas.width, canvas.height);
}
},
setCanvas: function(canvas) {
this._canvas = canvas;
this._ctx = canvas.getContext('2d');
@ -53,12 +84,14 @@ var carto = global.carto || require('carto');
// clean sprites
this._sprites = [];
this._shader = shader;
this._Map = this._shader.getDefault().getStyle({}, { zoom: 0 });
},
clearSpriteCache: function() {
this._sprites = [];
},
//
// generate sprite based on cartocss style
//
@ -145,7 +178,7 @@ var carto = global.carto || require('carto');
var prof = Profiler.metric('torque.renderer.point.renderTile').start();
var ctx = this._ctx;
var blendMode = shader.eval('comp-op') || this.options.blendmode;
var blendMode = COMP_OP_TO_CANVAS[shader.eval('comp-op')] || this.options.blendmode;
if(blendMode) {
ctx.globalCompositeOperation = blendMode;
}