writeTextToCanvas.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. import measureText from "../ThirdParty/measureText.js";
  2. import Color from "./Color.js";
  3. import defaultValue from "./defaultValue.js";
  4. import defined from "./defined.js";
  5. import DeveloperError from "./DeveloperError.js";
  6. var imageSmoothingEnabledName;
  7. /**
  8. * Writes the given text into a new canvas. The canvas will be sized to fit the text.
  9. * If text is blank, returns undefined.
  10. *
  11. * @param {String} text The text to write.
  12. * @param {Object} [options] Object with the following properties:
  13. * @param {String} [options.font='10px sans-serif'] The CSS font to use.
  14. * @param {String} [options.textBaseline='bottom'] The baseline of the text.
  15. * @param {Boolean} [options.fill=true] Whether to fill the text.
  16. * @param {Boolean} [options.stroke=false] Whether to stroke the text.
  17. * @param {Color} [options.fillColor=Color.WHITE] The fill color.
  18. * @param {Color} [options.strokeColor=Color.BLACK] The stroke color.
  19. * @param {Number} [options.strokeWidth=1] The stroke width.
  20. * @param {Color} [options.backgroundColor=Color.TRANSPARENT] The background color of the canvas.
  21. * @param {Number} [options.padding=0] The pixel size of the padding to add around the text.
  22. * @returns {HTMLCanvasElement} A new canvas with the given text drawn into it. The dimensions object
  23. * from measureText will also be added to the returned canvas. If text is
  24. * blank, returns undefined.
  25. * @function writeTextToCanvas
  26. */
  27. function writeTextToCanvas(text, options) {
  28. //>>includeStart('debug', pragmas.debug);
  29. if (!defined(text)) {
  30. throw new DeveloperError("text is required.");
  31. }
  32. //>>includeEnd('debug');
  33. if (text === "") {
  34. return undefined;
  35. }
  36. options = defaultValue(options, defaultValue.EMPTY_OBJECT);
  37. var font = defaultValue(options.font, "10px sans-serif");
  38. var stroke = defaultValue(options.stroke, false);
  39. var fill = defaultValue(options.fill, true);
  40. var strokeWidth = defaultValue(options.strokeWidth, 1);
  41. var backgroundColor = defaultValue(
  42. options.backgroundColor,
  43. Color.TRANSPARENT
  44. );
  45. var padding = defaultValue(options.padding, 0);
  46. var doublePadding = padding * 2.0;
  47. var canvas = document.createElement("canvas");
  48. canvas.width = 1;
  49. canvas.height = 1;
  50. canvas.style.font = font;
  51. var context2D = canvas.getContext("2d");
  52. if (!defined(imageSmoothingEnabledName)) {
  53. if (defined(context2D.imageSmoothingEnabled)) {
  54. imageSmoothingEnabledName = "imageSmoothingEnabled";
  55. } else if (defined(context2D.mozImageSmoothingEnabled)) {
  56. imageSmoothingEnabledName = "mozImageSmoothingEnabled";
  57. } else if (defined(context2D.webkitImageSmoothingEnabled)) {
  58. imageSmoothingEnabledName = "webkitImageSmoothingEnabled";
  59. } else if (defined(context2D.msImageSmoothingEnabled)) {
  60. imageSmoothingEnabledName = "msImageSmoothingEnabled";
  61. }
  62. }
  63. context2D.font = font;
  64. context2D.lineJoin = "round";
  65. context2D.lineWidth = strokeWidth;
  66. context2D[imageSmoothingEnabledName] = false;
  67. // textBaseline needs to be set before the measureText call. It won't work otherwise.
  68. // It's magic.
  69. context2D.textBaseline = defaultValue(options.textBaseline, "bottom");
  70. // in order for measureText to calculate style, the canvas has to be
  71. // (temporarily) added to the DOM.
  72. canvas.style.visibility = "hidden";
  73. document.body.appendChild(canvas);
  74. var dimensions = measureText(context2D, text, stroke, fill);
  75. canvas.dimensions = dimensions;
  76. document.body.removeChild(canvas);
  77. canvas.style.visibility = "";
  78. //Some characters, such as the letter j, have a non-zero starting position.
  79. //This value is used for kerning later, but we need to take it into account
  80. //now in order to draw the text completely on the canvas
  81. var x = -dimensions.bounds.minx;
  82. //Expand the width to include the starting position.
  83. var width = Math.ceil(dimensions.width) + x + doublePadding;
  84. //While the height of the letter is correct, we need to adjust
  85. //where we start drawing it so that letters like j and y properly dip
  86. //below the line.
  87. var height = dimensions.height + doublePadding;
  88. var baseline = height - dimensions.ascent + padding;
  89. var y = height - baseline + doublePadding;
  90. canvas.width = width;
  91. canvas.height = height;
  92. // Properties must be explicitly set again after changing width and height
  93. context2D.font = font;
  94. context2D.lineJoin = "round";
  95. context2D.lineWidth = strokeWidth;
  96. context2D[imageSmoothingEnabledName] = false;
  97. // Draw background
  98. if (backgroundColor !== Color.TRANSPARENT) {
  99. context2D.fillStyle = backgroundColor.toCssColorString();
  100. context2D.fillRect(0, 0, canvas.width, canvas.height);
  101. }
  102. if (stroke) {
  103. var strokeColor = defaultValue(options.strokeColor, Color.BLACK);
  104. context2D.strokeStyle = strokeColor.toCssColorString();
  105. context2D.strokeText(text, x + padding, y);
  106. }
  107. if (fill) {
  108. var fillColor = defaultValue(options.fillColor, Color.WHITE);
  109. context2D.fillStyle = fillColor.toCssColorString();
  110. context2D.fillText(text, x + padding, y);
  111. }
  112. return canvas;
  113. }
  114. export default writeTextToCanvas;