util.js 2.5 KB

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