style-parse.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. "use strict";
  2. exports.__esModule = true;
  3. exports.parseStyle = parseStyle;
  4. exports["default"] = void 0;
  5. var _common = require("../../util/common");
  6. function _mod(n, m) {
  7. return (n % m + m) % m;
  8. }
  9. function _addStop(steps, gradient) {
  10. (0, _common.each)(steps, function (item) {
  11. item = item.split(':');
  12. gradient.addColorStop(Number(item[0]), item[1]);
  13. });
  14. } // the string format: 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff'
  15. function _parseLineGradient(color, shape, context) {
  16. var arr = color.split(' ');
  17. var angle = arr[0].slice(2, arr[0].length - 1);
  18. angle = _mod(parseFloat(angle) * Math.PI / 180, Math.PI * 2);
  19. var steps = arr.slice(1);
  20. var _shape$getBBox = shape.getBBox(),
  21. minX = _shape$getBBox.minX,
  22. minY = _shape$getBBox.minY,
  23. maxX = _shape$getBBox.maxX,
  24. maxY = _shape$getBBox.maxY;
  25. var start;
  26. var end;
  27. if (angle >= 0 && angle < 0.5 * Math.PI) {
  28. start = {
  29. x: minX,
  30. y: minY
  31. };
  32. end = {
  33. x: maxX,
  34. y: maxY
  35. };
  36. } else if (0.5 * Math.PI <= angle && angle < Math.PI) {
  37. start = {
  38. x: maxX,
  39. y: minY
  40. };
  41. end = {
  42. x: minX,
  43. y: maxY
  44. };
  45. } else if (Math.PI <= angle && angle < 1.5 * Math.PI) {
  46. start = {
  47. x: maxX,
  48. y: maxY
  49. };
  50. end = {
  51. x: minX,
  52. y: minY
  53. };
  54. } else {
  55. start = {
  56. x: minX,
  57. y: maxY
  58. };
  59. end = {
  60. x: maxX,
  61. y: minY
  62. };
  63. }
  64. var tanTheta = Math.tan(angle);
  65. var tanTheta2 = tanTheta * tanTheta;
  66. var x = (end.x - start.x + tanTheta * (end.y - start.y)) / (tanTheta2 + 1) + start.x;
  67. var y = tanTheta * (end.x - start.x + tanTheta * (end.y - start.y)) / (tanTheta2 + 1) + start.y;
  68. var gradient = context.createLinearGradient(start.x, start.y, x, y);
  69. _addStop(steps, gradient);
  70. return gradient;
  71. } // the string format: 'r(0.5, 0.5, 0.1) 0:#ffffff 1:#1890ff'
  72. function _parseRadialGradient(color, shape, context) {
  73. var arr = color.split(' ');
  74. var circleCfg = arr[0].slice(2, arr[0].length - 1);
  75. circleCfg = circleCfg.split(',');
  76. var fx = parseFloat(circleCfg[0]);
  77. var fy = parseFloat(circleCfg[1]);
  78. var fr = parseFloat(circleCfg[2]);
  79. var steps = arr.slice(1); // if radius is 0, no gradient, stroke with the last color
  80. if (fr === 0) {
  81. var _color = steps[steps.length - 1];
  82. return _color.split(':')[1];
  83. }
  84. var _shape$getBBox2 = shape.getBBox(),
  85. width = _shape$getBBox2.width,
  86. height = _shape$getBBox2.height,
  87. minX = _shape$getBBox2.minX,
  88. minY = _shape$getBBox2.minY;
  89. var r = Math.sqrt(width * width + height * height) / 2;
  90. var gradient = context.createRadialGradient(minX + width * fx, minY + height * fy, fr * r, minX + width / 2, minY + height / 2, r);
  91. _addStop(steps, gradient);
  92. return gradient;
  93. }
  94. function parseStyle(color, shape, context) {
  95. if (color[1] === '(') {
  96. try {
  97. var firstCode = color[0];
  98. if (firstCode === 'l') {
  99. return _parseLineGradient(color, shape, context);
  100. } else if (firstCode === 'r') {
  101. return _parseRadialGradient(color, shape, context);
  102. }
  103. } catch (ev) {
  104. console.error('error in parsing gradient string, please check if there are any extra whitespaces.');
  105. console.error(ev);
  106. }
  107. }
  108. return color;
  109. }
  110. var _default = {
  111. parseStyle: parseStyle
  112. };
  113. exports["default"] = _default;