dot.js 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. exports.createDotPattern = exports.drawDot = exports.defaultDotPatternCfg = void 0;
  4. var utils_1 = require("../../utils");
  5. var util_1 = require("./util");
  6. /**
  7. * dotPattern的默认配置
  8. */
  9. exports.defaultDotPatternCfg = {
  10. size: 6,
  11. padding: 2,
  12. backgroundColor: 'transparent',
  13. opacity: 1,
  14. rotation: 0,
  15. fill: '#fff',
  16. fillOpacity: 0.5,
  17. stroke: 'transparent',
  18. lineWidth: 0,
  19. isStagger: true,
  20. };
  21. /**
  22. * 绘制圆点
  23. *
  24. * @param context
  25. * @param cfg
  26. * @param x 圆点中心坐标x
  27. * @param y 圆点中心坐标y
  28. */
  29. function drawDot(context, cfg, x, y) {
  30. var size = cfg.size, fill = cfg.fill, lineWidth = cfg.lineWidth, stroke = cfg.stroke, fillOpacity = cfg.fillOpacity;
  31. context.beginPath();
  32. context.globalAlpha = fillOpacity;
  33. context.fillStyle = fill;
  34. context.strokeStyle = stroke;
  35. context.lineWidth = lineWidth;
  36. context.arc(x, y, size / 2, 0, 2 * Math.PI, false);
  37. context.fill();
  38. if (lineWidth) {
  39. context.stroke();
  40. }
  41. context.closePath();
  42. }
  43. exports.drawDot = drawDot;
  44. /**
  45. * 创建 dot pattern,返回 HTMLCanvasElement
  46. *
  47. * @param cfg
  48. * @returns HTMLCanvasElement
  49. */
  50. function createDotPattern(cfg) {
  51. var dotCfg = (0, utils_1.deepAssign)({}, exports.defaultDotPatternCfg, cfg);
  52. var size = dotCfg.size, padding = dotCfg.padding, isStagger = dotCfg.isStagger, rotation = dotCfg.rotation;
  53. // 计算 画布大小,dots的位置
  54. var unitSize = (0, util_1.getUnitPatternSize)(size, padding, isStagger);
  55. var dots = (0, util_1.getSymbolsPosition)(unitSize, isStagger);
  56. // 初始化 patternCanvas
  57. var canvas = (0, util_1.initCanvas)(unitSize, unitSize);
  58. var ctx = canvas.getContext('2d');
  59. // 绘制 background,dots
  60. (0, util_1.drawBackground)(ctx, dotCfg, unitSize);
  61. for (var _i = 0, dots_1 = dots; _i < dots_1.length; _i++) {
  62. var _a = dots_1[_i], x = _a[0], y = _a[1];
  63. drawDot(ctx, dotCfg, x, y);
  64. }
  65. var pattern = ctx.createPattern(canvas, 'repeat');
  66. if (pattern) {
  67. var dpr = (0, util_1.getPixelRatio)();
  68. var matrix = (0, util_1.transformMatrix)(dpr, rotation);
  69. pattern.setTransform(matrix);
  70. }
  71. return pattern;
  72. }
  73. exports.createDotPattern = createDotPattern;
  74. //# sourceMappingURL=dot.js.map