rect.js 3.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. /**
  2. * @fileoverview rect
  3. * @author dengfuping_develop@163.com
  4. */
  5. import { __assign, __extends } from "tslib";
  6. import { each, isArray } from '@antv/util';
  7. import ShapeBase from './base';
  8. import { SVG_ATTR_MAP } from '../constant';
  9. import { parseRadius } from '../util/format';
  10. var Rect = /** @class */ (function (_super) {
  11. __extends(Rect, _super);
  12. function Rect() {
  13. var _this = _super !== null && _super.apply(this, arguments) || this;
  14. _this.type = 'rect';
  15. _this.canFill = true;
  16. _this.canStroke = true;
  17. return _this;
  18. }
  19. Rect.prototype.getDefaultAttrs = function () {
  20. var attrs = _super.prototype.getDefaultAttrs.call(this);
  21. return __assign(__assign({}, attrs), { x: 0, y: 0, width: 0, height: 0, radius: 0 });
  22. };
  23. Rect.prototype.createPath = function (context, targetAttrs) {
  24. var _this = this;
  25. var attrs = this.attr();
  26. var el = this.get('el');
  27. // 加上状态量,用来标记 path 是否已组装
  28. var completed = false;
  29. // 和组装 path 相关的绘图属性
  30. var pathRelatedAttrs = ['x', 'y', 'width', 'height', 'radius'];
  31. each(targetAttrs || attrs, function (value, attr) {
  32. if (pathRelatedAttrs.indexOf(attr) !== -1 && !completed) {
  33. el.setAttribute('d', _this._assembleRect(attrs));
  34. completed = true;
  35. }
  36. else if (pathRelatedAttrs.indexOf(attr) === -1 && SVG_ATTR_MAP[attr]) {
  37. el.setAttribute(SVG_ATTR_MAP[attr], value);
  38. }
  39. });
  40. };
  41. Rect.prototype._assembleRect = function (attrs) {
  42. var x = attrs.x;
  43. var y = attrs.y;
  44. var w = attrs.width;
  45. var h = attrs.height;
  46. var radius = attrs.radius;
  47. if (!radius) {
  48. return "M " + x + "," + y + " l " + w + ",0 l 0," + h + " l" + -w + " 0 z";
  49. }
  50. var r = parseRadius(radius);
  51. if (isArray(radius)) {
  52. if (radius.length === 1) {
  53. r.r1 = r.r2 = r.r3 = r.r4 = radius[0];
  54. }
  55. else if (radius.length === 2) {
  56. r.r1 = r.r3 = radius[0];
  57. r.r2 = r.r4 = radius[1];
  58. }
  59. else if (radius.length === 3) {
  60. r.r1 = radius[0];
  61. r.r2 = r.r4 = radius[1];
  62. r.r3 = radius[2];
  63. }
  64. else {
  65. r.r1 = radius[0];
  66. r.r2 = radius[1];
  67. r.r3 = radius[2];
  68. r.r4 = radius[3];
  69. }
  70. }
  71. else {
  72. r.r1 = r.r2 = r.r3 = r.r4 = radius;
  73. }
  74. var d = [
  75. ["M " + (x + r.r1) + "," + y],
  76. ["l " + (w - r.r1 - r.r2) + ",0"],
  77. ["a " + r.r2 + "," + r.r2 + ",0,0,1," + r.r2 + "," + r.r2],
  78. ["l 0," + (h - r.r2 - r.r3)],
  79. ["a " + r.r3 + "," + r.r3 + ",0,0,1," + -r.r3 + "," + r.r3],
  80. ["l " + (r.r3 + r.r4 - w) + ",0"],
  81. ["a " + r.r4 + "," + r.r4 + ",0,0,1," + -r.r4 + "," + -r.r4],
  82. ["l 0," + (r.r4 + r.r1 - h)],
  83. ["a " + r.r1 + "," + r.r1 + ",0,0,1," + r.r1 + "," + -r.r1],
  84. ['z'],
  85. ];
  86. return d.join(' ');
  87. };
  88. return Rect;
  89. }(ShapeBase));
  90. export default Rect;
  91. //# sourceMappingURL=rect.js.map