gradient.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. /**
  2. * @fileoverview gradient
  3. * @author dengfuping_develop@163.com
  4. */
  5. import { each, mod, toRadian, uniqueId } from '@antv/util';
  6. import { createSVGElement } from '../util/dom';
  7. var regexLG = /^l\s*\(\s*([\d.]+)\s*\)\s*(.*)/i;
  8. var regexRG = /^r\s*\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)\s*(.*)/i;
  9. var regexColorStop = /[\d.]+:(#[^\s]+|[^)]+\))/gi;
  10. function addStop(steps) {
  11. var arr = steps.match(regexColorStop);
  12. if (!arr) {
  13. return '';
  14. }
  15. var stops = '';
  16. arr.sort(function (a, b) {
  17. a = a.split(':');
  18. b = b.split(':');
  19. return Number(a[0]) - Number(b[0]);
  20. });
  21. each(arr, function (item) {
  22. item = item.split(':');
  23. stops += "<stop offset=\"" + item[0] + "\" stop-color=\"" + item[1] + "\"></stop>";
  24. });
  25. return stops;
  26. }
  27. function parseLineGradient(color, el) {
  28. var arr = regexLG.exec(color);
  29. var angle = mod(toRadian(parseFloat(arr[1])), Math.PI * 2);
  30. var steps = arr[2];
  31. var start;
  32. var end;
  33. if (angle >= 0 && angle < 0.5 * Math.PI) {
  34. start = {
  35. x: 0,
  36. y: 0,
  37. };
  38. end = {
  39. x: 1,
  40. y: 1,
  41. };
  42. }
  43. else if (0.5 * Math.PI <= angle && angle < Math.PI) {
  44. start = {
  45. x: 1,
  46. y: 0,
  47. };
  48. end = {
  49. x: 0,
  50. y: 1,
  51. };
  52. }
  53. else if (Math.PI <= angle && angle < 1.5 * Math.PI) {
  54. start = {
  55. x: 1,
  56. y: 1,
  57. };
  58. end = {
  59. x: 0,
  60. y: 0,
  61. };
  62. }
  63. else {
  64. start = {
  65. x: 0,
  66. y: 1,
  67. };
  68. end = {
  69. x: 1,
  70. y: 0,
  71. };
  72. }
  73. var tanTheta = Math.tan(angle);
  74. var tanTheta2 = tanTheta * tanTheta;
  75. var x = (end.x - start.x + tanTheta * (end.y - start.y)) / (tanTheta2 + 1) + start.x;
  76. var y = (tanTheta * (end.x - start.x + tanTheta * (end.y - start.y))) / (tanTheta2 + 1) + start.y;
  77. el.setAttribute('x1', start.x);
  78. el.setAttribute('y1', start.y);
  79. el.setAttribute('x2', x);
  80. el.setAttribute('y2', y);
  81. el.innerHTML = addStop(steps);
  82. }
  83. function parseRadialGradient(color, self) {
  84. var arr = regexRG.exec(color);
  85. var cx = parseFloat(arr[1]);
  86. var cy = parseFloat(arr[2]);
  87. var r = parseFloat(arr[3]);
  88. var steps = arr[4];
  89. self.setAttribute('cx', cx);
  90. self.setAttribute('cy', cy);
  91. self.setAttribute('r', r);
  92. self.innerHTML = addStop(steps);
  93. }
  94. var Gradient = /** @class */ (function () {
  95. function Gradient(cfg) {
  96. this.cfg = {};
  97. var el = null;
  98. var id = uniqueId('gradient_');
  99. if (cfg.toLowerCase()[0] === 'l') {
  100. el = createSVGElement('linearGradient');
  101. parseLineGradient(cfg, el);
  102. }
  103. else {
  104. el = createSVGElement('radialGradient');
  105. parseRadialGradient(cfg, el);
  106. }
  107. el.setAttribute('id', id);
  108. this.el = el;
  109. this.id = id;
  110. this.cfg = cfg;
  111. return this;
  112. }
  113. Gradient.prototype.match = function (type, attr) {
  114. return this.cfg === attr;
  115. };
  116. return Gradient;
  117. }());
  118. export default Gradient;
  119. //# sourceMappingURL=gradient.js.map