canvas.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
  6. var _merge = require("../help/merge.js");
  7. var _merge2 = _interopRequireDefault(_merge);
  8. var _shared = require("./shared.js");
  9. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  10. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  11. var CanvasRenderer = function () {
  12. function CanvasRenderer(canvas, encodings, options) {
  13. _classCallCheck(this, CanvasRenderer);
  14. this.canvas = canvas;
  15. this.encodings = encodings;
  16. this.options = options;
  17. }
  18. _createClass(CanvasRenderer, [{
  19. key: "render",
  20. value: function render() {
  21. // Abort if the browser does not support HTML5 canvas
  22. if (!this.canvas.getContext) {
  23. throw new Error('The browser does not support canvas.');
  24. }
  25. this.prepareCanvas();
  26. for (var i = 0; i < this.encodings.length; i++) {
  27. var encodingOptions = (0, _merge2.default)(this.options, this.encodings[i].options);
  28. this.drawCanvasBarcode(encodingOptions, this.encodings[i]);
  29. this.drawCanvasText(encodingOptions, this.encodings[i]);
  30. this.moveCanvasDrawing(this.encodings[i]);
  31. }
  32. this.restoreCanvas();
  33. }
  34. }, {
  35. key: "prepareCanvas",
  36. value: function prepareCanvas() {
  37. // Get the canvas context
  38. var ctx = this.canvas.getContext("2d");
  39. ctx.save();
  40. (0, _shared.calculateEncodingAttributes)(this.encodings, this.options, ctx);
  41. var totalWidth = (0, _shared.getTotalWidthOfEncodings)(this.encodings);
  42. var maxHeight = (0, _shared.getMaximumHeightOfEncodings)(this.encodings);
  43. this.canvas.width = totalWidth + this.options.marginLeft + this.options.marginRight;
  44. this.canvas.height = maxHeight;
  45. // Paint the canvas
  46. ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
  47. if (this.options.background) {
  48. ctx.fillStyle = this.options.background;
  49. ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
  50. }
  51. ctx.translate(this.options.marginLeft, 0);
  52. }
  53. }, {
  54. key: "drawCanvasBarcode",
  55. value: function drawCanvasBarcode(options, encoding) {
  56. // Get the canvas context
  57. var ctx = this.canvas.getContext("2d");
  58. var binary = encoding.data;
  59. // Creates the barcode out of the encoded binary
  60. var yFrom;
  61. if (options.textPosition == "top") {
  62. yFrom = options.marginTop + options.fontSize + options.textMargin;
  63. } else {
  64. yFrom = options.marginTop;
  65. }
  66. ctx.fillStyle = options.lineColor;
  67. for (var b = 0; b < binary.length; b++) {
  68. var x = b * options.width + encoding.barcodePadding;
  69. if (binary[b] === "1") {
  70. ctx.fillRect(x, yFrom, options.width, options.height);
  71. } else if (binary[b]) {
  72. ctx.fillRect(x, yFrom, options.width, options.height * binary[b]);
  73. }
  74. }
  75. }
  76. }, {
  77. key: "drawCanvasText",
  78. value: function drawCanvasText(options, encoding) {
  79. // Get the canvas context
  80. var ctx = this.canvas.getContext("2d");
  81. var font = options.fontOptions + " " + options.fontSize + "px " + options.font;
  82. // Draw the text if displayValue is set
  83. if (options.displayValue) {
  84. var x, y;
  85. if (options.textPosition == "top") {
  86. y = options.marginTop + options.fontSize - options.textMargin;
  87. } else {
  88. y = options.height + options.textMargin + options.marginTop + options.fontSize;
  89. }
  90. ctx.font = font;
  91. // Draw the text in the correct X depending on the textAlign option
  92. if (options.textAlign == "left" || encoding.barcodePadding > 0) {
  93. x = 0;
  94. ctx.textAlign = 'left';
  95. } else if (options.textAlign == "right") {
  96. x = encoding.width - 1;
  97. ctx.textAlign = 'right';
  98. }
  99. // In all other cases, center the text
  100. else {
  101. x = encoding.width / 2;
  102. ctx.textAlign = 'center';
  103. }
  104. ctx.fillText(encoding.text, x, y);
  105. }
  106. }
  107. }, {
  108. key: "moveCanvasDrawing",
  109. value: function moveCanvasDrawing(encoding) {
  110. var ctx = this.canvas.getContext("2d");
  111. ctx.translate(encoding.width, 0);
  112. }
  113. }, {
  114. key: "restoreCanvas",
  115. value: function restoreCanvas() {
  116. // Get the canvas context
  117. var ctx = this.canvas.getContext("2d");
  118. ctx.restore();
  119. }
  120. }]);
  121. return CanvasRenderer;
  122. }();
  123. exports.default = CanvasRenderer;