HeatmapLayer.js 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. /*
  2. * Licensed to the Apache Software Foundation (ASF) under one
  3. * or more contributor license agreements. See the NOTICE file
  4. * distributed with this work for additional information
  5. * regarding copyright ownership. The ASF licenses this file
  6. * to you under the Apache License, Version 2.0 (the
  7. * "License"); you may not use this file except in compliance
  8. * with the License. You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing,
  13. * software distributed under the License is distributed on an
  14. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  15. * KIND, either express or implied. See the License for the
  16. * specific language governing permissions and limitations
  17. * under the License.
  18. */
  19. /**
  20. * AUTO-GENERATED FILE. DO NOT MODIFY.
  21. */
  22. /*
  23. * Licensed to the Apache Software Foundation (ASF) under one
  24. * or more contributor license agreements. See the NOTICE file
  25. * distributed with this work for additional information
  26. * regarding copyright ownership. The ASF licenses this file
  27. * to you under the Apache License, Version 2.0 (the
  28. * "License"); you may not use this file except in compliance
  29. * with the License. You may obtain a copy of the License at
  30. *
  31. * http://www.apache.org/licenses/LICENSE-2.0
  32. *
  33. * Unless required by applicable law or agreed to in writing,
  34. * software distributed under the License is distributed on an
  35. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  36. * KIND, either express or implied. See the License for the
  37. * specific language governing permissions and limitations
  38. * under the License.
  39. */
  40. /* global Uint8ClampedArray */
  41. import { platformApi } from 'zrender/lib/core/platform.js';
  42. import tokens from '../../visual/tokens.js';
  43. var GRADIENT_LEVELS = 256;
  44. var HeatmapLayer = /** @class */function () {
  45. function HeatmapLayer() {
  46. this.blurSize = 30;
  47. this.pointSize = 20;
  48. this.maxOpacity = 1;
  49. this.minOpacity = 0;
  50. this._gradientPixels = {
  51. inRange: null,
  52. outOfRange: null
  53. };
  54. var canvas = platformApi.createCanvas();
  55. this.canvas = canvas;
  56. }
  57. /**
  58. * Renders Heatmap and returns the rendered canvas
  59. * @param data array of data, each has x, y, value
  60. * @param width canvas width
  61. * @param height canvas height
  62. */
  63. HeatmapLayer.prototype.update = function (data, width, height, normalize, colorFunc, isInRange) {
  64. var brush = this._getBrush();
  65. var gradientInRange = this._getGradient(colorFunc, 'inRange');
  66. var gradientOutOfRange = this._getGradient(colorFunc, 'outOfRange');
  67. var r = this.pointSize + this.blurSize;
  68. var canvas = this.canvas;
  69. var ctx = canvas.getContext('2d');
  70. var len = data.length;
  71. canvas.width = width;
  72. canvas.height = height;
  73. for (var i = 0; i < len; ++i) {
  74. var p = data[i];
  75. var x = p[0];
  76. var y = p[1];
  77. var value = p[2];
  78. // calculate alpha using value
  79. var alpha = normalize(value);
  80. // draw with the circle brush with alpha
  81. ctx.globalAlpha = alpha;
  82. ctx.drawImage(brush, x - r, y - r);
  83. }
  84. if (!canvas.width || !canvas.height) {
  85. // Avoid "Uncaught DOMException: Failed to execute 'getImageData' on
  86. // 'CanvasRenderingContext2D': The source height is 0."
  87. return canvas;
  88. }
  89. // colorize the canvas using alpha value and set with gradient
  90. var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  91. var pixels = imageData.data;
  92. var offset = 0;
  93. var pixelLen = pixels.length;
  94. var minOpacity = this.minOpacity;
  95. var maxOpacity = this.maxOpacity;
  96. var diffOpacity = maxOpacity - minOpacity;
  97. while (offset < pixelLen) {
  98. var alpha = pixels[offset + 3] / 256;
  99. var gradientOffset = Math.floor(alpha * (GRADIENT_LEVELS - 1)) * 4;
  100. // Simple optimize to ignore the empty data
  101. if (alpha > 0) {
  102. var gradient = isInRange(alpha) ? gradientInRange : gradientOutOfRange;
  103. // Any alpha > 0 will be mapped to [minOpacity, maxOpacity]
  104. alpha > 0 && (alpha = alpha * diffOpacity + minOpacity);
  105. pixels[offset++] = gradient[gradientOffset];
  106. pixels[offset++] = gradient[gradientOffset + 1];
  107. pixels[offset++] = gradient[gradientOffset + 2];
  108. pixels[offset++] = gradient[gradientOffset + 3] * alpha * 256;
  109. } else {
  110. offset += 4;
  111. }
  112. }
  113. ctx.putImageData(imageData, 0, 0);
  114. return canvas;
  115. };
  116. /**
  117. * get canvas of a black circle brush used for canvas to draw later
  118. */
  119. HeatmapLayer.prototype._getBrush = function () {
  120. var brushCanvas = this._brushCanvas || (this._brushCanvas = platformApi.createCanvas());
  121. // set brush size
  122. var r = this.pointSize + this.blurSize;
  123. var d = r * 2;
  124. brushCanvas.width = d;
  125. brushCanvas.height = d;
  126. var ctx = brushCanvas.getContext('2d');
  127. ctx.clearRect(0, 0, d, d);
  128. // in order to render shadow without the distinct circle,
  129. // draw the distinct circle in an invisible place,
  130. // and use shadowOffset to draw shadow in the center of the canvas
  131. ctx.shadowOffsetX = d;
  132. ctx.shadowBlur = this.blurSize;
  133. // draw the shadow in black, and use alpha and shadow blur to generate
  134. // color in color map
  135. ctx.shadowColor = tokens.color.neutral99;
  136. // draw circle in the left to the canvas
  137. ctx.beginPath();
  138. ctx.arc(-r, r, this.pointSize, 0, Math.PI * 2, true);
  139. ctx.closePath();
  140. ctx.fill();
  141. return brushCanvas;
  142. };
  143. /**
  144. * get gradient color map
  145. * @private
  146. */
  147. HeatmapLayer.prototype._getGradient = function (colorFunc, state) {
  148. var gradientPixels = this._gradientPixels;
  149. var pixelsSingleState = gradientPixels[state] || (gradientPixels[state] = new Uint8ClampedArray(256 * 4));
  150. var color = [0, 0, 0, 0];
  151. var off = 0;
  152. for (var i = 0; i < 256; i++) {
  153. colorFunc[state](i / 255, true, color);
  154. pixelsSingleState[off++] = color[0];
  155. pixelsSingleState[off++] = color[1];
  156. pixelsSingleState[off++] = color[2];
  157. pixelsSingleState[off++] = color[3];
  158. }
  159. return pixelsSingleState;
  160. };
  161. return HeatmapLayer;
  162. }();
  163. export default HeatmapLayer;