123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166 |
- import { platformApi } from 'zrender/lib/core/platform.js';
- var GRADIENT_LEVELS = 256;
- var HeatmapLayer = function () {
- function HeatmapLayer() {
- this.blurSize = 30;
- this.pointSize = 20;
- this.maxOpacity = 1;
- this.minOpacity = 0;
- this._gradientPixels = {
- inRange: null,
- outOfRange: null
- };
- var canvas = platformApi.createCanvas();
- this.canvas = canvas;
- }
-
- HeatmapLayer.prototype.update = function (data, width, height, normalize, colorFunc, isInRange) {
- var brush = this._getBrush();
- var gradientInRange = this._getGradient(colorFunc, 'inRange');
- var gradientOutOfRange = this._getGradient(colorFunc, 'outOfRange');
- var r = this.pointSize + this.blurSize;
- var canvas = this.canvas;
- var ctx = canvas.getContext('2d');
- var len = data.length;
- canvas.width = width;
- canvas.height = height;
- for (var i = 0; i < len; ++i) {
- var p = data[i];
- var x = p[0];
- var y = p[1];
- var value = p[2];
-
- var alpha = normalize(value);
-
- ctx.globalAlpha = alpha;
- ctx.drawImage(brush, x - r, y - r);
- }
- if (!canvas.width || !canvas.height) {
-
-
- return canvas;
- }
-
- var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
- var pixels = imageData.data;
- var offset = 0;
- var pixelLen = pixels.length;
- var minOpacity = this.minOpacity;
- var maxOpacity = this.maxOpacity;
- var diffOpacity = maxOpacity - minOpacity;
- while (offset < pixelLen) {
- var alpha = pixels[offset + 3] / 256;
- var gradientOffset = Math.floor(alpha * (GRADIENT_LEVELS - 1)) * 4;
-
- if (alpha > 0) {
- var gradient = isInRange(alpha) ? gradientInRange : gradientOutOfRange;
-
- alpha > 0 && (alpha = alpha * diffOpacity + minOpacity);
- pixels[offset++] = gradient[gradientOffset];
- pixels[offset++] = gradient[gradientOffset + 1];
- pixels[offset++] = gradient[gradientOffset + 2];
- pixels[offset++] = gradient[gradientOffset + 3] * alpha * 256;
- } else {
- offset += 4;
- }
- }
- ctx.putImageData(imageData, 0, 0);
- return canvas;
- };
-
- HeatmapLayer.prototype._getBrush = function () {
- var brushCanvas = this._brushCanvas || (this._brushCanvas = platformApi.createCanvas());
-
- var r = this.pointSize + this.blurSize;
- var d = r * 2;
- brushCanvas.width = d;
- brushCanvas.height = d;
- var ctx = brushCanvas.getContext('2d');
- ctx.clearRect(0, 0, d, d);
-
-
-
- ctx.shadowOffsetX = d;
- ctx.shadowBlur = this.blurSize;
-
-
- ctx.shadowColor = '#000';
-
- ctx.beginPath();
- ctx.arc(-r, r, this.pointSize, 0, Math.PI * 2, true);
- ctx.closePath();
- ctx.fill();
- return brushCanvas;
- };
-
- HeatmapLayer.prototype._getGradient = function (colorFunc, state) {
- var gradientPixels = this._gradientPixels;
- var pixelsSingleState = gradientPixels[state] || (gradientPixels[state] = new Uint8ClampedArray(256 * 4));
- var color = [0, 0, 0, 0];
- var off = 0;
- for (var i = 0; i < 256; i++) {
- colorFunc[state](i / 255, true, color);
- pixelsSingleState[off++] = color[0];
- pixelsSingleState[off++] = color[1];
- pixelsSingleState[off++] = color[2];
- pixelsSingleState[off++] = color[3];
- }
- return pixelsSingleState;
- };
- return HeatmapLayer;
- }();
- export default HeatmapLayer;
|