square.js 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. exports.createSquarePattern = exports.drawSquare = exports.defaultSquarePatternCfg = void 0;
  4. var utils_1 = require("../../utils");
  5. var util_1 = require("./util");
  6. /**
  7. * squarePattern 的 默认配置
  8. */
  9. exports.defaultSquarePatternCfg = {
  10. size: 6,
  11. padding: 1,
  12. isStagger: true,
  13. backgroundColor: 'transparent',
  14. opacity: 1,
  15. rotation: 0,
  16. fill: '#fff',
  17. fillOpacity: 0.5,
  18. stroke: 'transparent',
  19. lineWidth: 0,
  20. };
  21. /**
  22. * 绘制square
  23. *
  24. * @param context canvasContext
  25. * @param cfg squarePattern 的配置
  26. * @param x和y square的中心位置
  27. */
  28. function drawSquare(context, cfg, x, y) {
  29. var stroke = cfg.stroke, size = cfg.size, fill = cfg.fill, lineWidth = cfg.lineWidth, fillOpacity = cfg.fillOpacity;
  30. context.globalAlpha = fillOpacity;
  31. context.strokeStyle = stroke;
  32. context.lineWidth = lineWidth;
  33. context.fillStyle = fill;
  34. // 因为正方形绘制从左上角开始,所以x,y做个偏移
  35. context.strokeRect(x - size / 2, y - size / 2, size, size);
  36. context.fillRect(x - size / 2, y - size / 2, size, size);
  37. }
  38. exports.drawSquare = drawSquare;
  39. /**
  40. * 创建 squarePattern
  41. */
  42. function createSquarePattern(cfg) {
  43. var squareCfg = (0, utils_1.deepAssign)({}, exports.defaultSquarePatternCfg, cfg);
  44. var size = squareCfg.size, padding = squareCfg.padding, isStagger = squareCfg.isStagger, rotation = squareCfg.rotation;
  45. // 计算 画布大小,squares的位置
  46. var unitSize = (0, util_1.getUnitPatternSize)(size, padding, isStagger);
  47. var squares = (0, util_1.getSymbolsPosition)(unitSize, isStagger); // 计算方法与 dots 一样
  48. // 初始化 patternCanvas
  49. var canvas = (0, util_1.initCanvas)(unitSize, unitSize);
  50. var ctx = canvas.getContext('2d');
  51. // 绘制 background,squares
  52. (0, util_1.drawBackground)(ctx, squareCfg, unitSize);
  53. for (var _i = 0, squares_1 = squares; _i < squares_1.length; _i++) {
  54. var _a = squares_1[_i], x = _a[0], y = _a[1];
  55. drawSquare(ctx, squareCfg, x, y);
  56. }
  57. var pattern = ctx.createPattern(canvas, 'repeat');
  58. if (pattern) {
  59. var dpr = (0, util_1.getPixelRatio)();
  60. var matrix = (0, util_1.transformMatrix)(dpr, rotation);
  61. pattern.setTransform(matrix);
  62. }
  63. return pattern;
  64. }
  65. exports.createSquarePattern = createSquarePattern;
  66. //# sourceMappingURL=square.js.map