dot.js 2.1 KB

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