util.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. exports.transformMatrix = exports.getSymbolsPosition = exports.getUnitPatternSize = exports.drawBackground = exports.initCanvas = exports.getPixelRatio = void 0;
  4. /**
  5. * 获取设备像素比
  6. */
  7. function getPixelRatio() {
  8. return typeof window === 'object' ? window === null || window === void 0 ? void 0 : window.devicePixelRatio : 2;
  9. }
  10. exports.getPixelRatio = getPixelRatio;
  11. /**
  12. * 初始化 cavnas,设置宽高等
  13. */
  14. function initCanvas(width, height) {
  15. if (height === void 0) { height = width; }
  16. var canvas = document.createElement('canvas');
  17. var pixelRatio = getPixelRatio();
  18. // 画布尺寸
  19. canvas.width = width * pixelRatio;
  20. canvas.height = height * pixelRatio;
  21. // 显示尺寸
  22. canvas.style.width = "".concat(width, "px");
  23. canvas.style.height = "".concat(height, "px");
  24. var ctx = canvas.getContext('2d');
  25. ctx.scale(pixelRatio, pixelRatio);
  26. return canvas;
  27. }
  28. exports.initCanvas = initCanvas;
  29. /**
  30. * 绘制背景
  31. *
  32. * @param context
  33. * @param cfg
  34. * @param width
  35. * @param height
  36. */
  37. function drawBackground(context, cfg, width, height) {
  38. if (height === void 0) { height = width; }
  39. var backgroundColor = cfg.backgroundColor, opacity = cfg.opacity;
  40. context.globalAlpha = opacity;
  41. context.fillStyle = backgroundColor;
  42. context.beginPath();
  43. context.fillRect(0, 0, width, height);
  44. context.closePath();
  45. }
  46. exports.drawBackground = drawBackground;
  47. /**
  48. * 计算贴图单元大小
  49. *
  50. * @param size 元素大小
  51. * @param padding 圆点间隔
  52. * @param isStagger 是否交错
  53. * @reutrn 返回贴图单元大小
  54. */
  55. function getUnitPatternSize(size, padding, isStagger) {
  56. // 如果交错, unitSize 放大两倍
  57. var unitSize = size + padding;
  58. return isStagger ? unitSize * 2 : unitSize;
  59. }
  60. exports.getUnitPatternSize = getUnitPatternSize;
  61. /**
  62. * 计算有交错情况的元素坐标
  63. *
  64. * @param unitSize 贴图单元大小
  65. * @param isStagger 是否交错
  66. * @reutrn 元素中心坐标 x,y 数组集合
  67. */
  68. function getSymbolsPosition(unitSize, isStagger) {
  69. // 如果交错, 交错绘制 dot
  70. var symbolsPos = isStagger
  71. ? [
  72. [unitSize * (1 / 4), unitSize * (1 / 4)],
  73. [unitSize * (3 / 4), unitSize * (3 / 4)],
  74. ]
  75. : [[unitSize * (1 / 2), unitSize * (1 / 2)]];
  76. return symbolsPos;
  77. }
  78. exports.getSymbolsPosition = getSymbolsPosition;
  79. /**
  80. * 给整个 pattern贴图 做变换, 目前支持旋转
  81. *
  82. * @param pattern 整个贴图
  83. * @param dpr 设备像素比
  84. * @param rotation 旋转角度
  85. */
  86. function transformMatrix(dpr, rotation) {
  87. var radian = (rotation * Math.PI) / 180;
  88. var matrix = {
  89. a: Math.cos(radian) * (1 / dpr),
  90. b: Math.sin(radian) * (1 / dpr),
  91. c: -Math.sin(radian) * (1 / dpr),
  92. d: Math.cos(radian) * (1 / dpr),
  93. e: 0,
  94. f: 0,
  95. };
  96. return matrix;
  97. }
  98. exports.transformMatrix = transformMatrix;
  99. //# sourceMappingURL=util.js.map