polyline.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. import { __assign, __extends } from "tslib";
  2. import { Polyline as PolylineUtil } from '@antv/g-math';
  3. import { Line as LineUtil } from '@antv/g-math';
  4. import { each, isArray, isNil } from '@antv/util';
  5. import { SVG_ATTR_MAP } from '../constant';
  6. import ShapeBase from './base';
  7. var Polyline = /** @class */ (function (_super) {
  8. __extends(Polyline, _super);
  9. function Polyline() {
  10. var _this = _super !== null && _super.apply(this, arguments) || this;
  11. _this.type = 'polyline';
  12. _this.canFill = true;
  13. _this.canStroke = true;
  14. return _this;
  15. }
  16. Polyline.prototype.getDefaultAttrs = function () {
  17. var attrs = _super.prototype.getDefaultAttrs.call(this);
  18. return __assign(__assign({}, attrs), { startArrow: false, endArrow: false });
  19. };
  20. // 更新属性时,检测是否更改了 points
  21. Polyline.prototype.onAttrChange = function (name, value, originValue) {
  22. _super.prototype.onAttrChange.call(this, name, value, originValue);
  23. if (['points'].indexOf(name) !== -1) {
  24. this._resetCache();
  25. }
  26. };
  27. Polyline.prototype._resetCache = function () {
  28. this.set('totalLength', null);
  29. this.set('tCache', null);
  30. };
  31. Polyline.prototype.createPath = function (context, targetAttrs) {
  32. var attrs = this.attr();
  33. var el = this.get('el');
  34. each(targetAttrs || attrs, function (value, attr) {
  35. if (attr === 'points' && isArray(value) && value.length >= 2) {
  36. el.setAttribute('points', value.map(function (point) { return point[0] + "," + point[1]; }).join(' '));
  37. }
  38. else if (SVG_ATTR_MAP[attr]) {
  39. el.setAttribute(SVG_ATTR_MAP[attr], value);
  40. }
  41. });
  42. };
  43. /**
  44. * Get length of polyline
  45. * @return {number} length
  46. */
  47. Polyline.prototype.getTotalLength = function () {
  48. var points = this.attr().points;
  49. // get totalLength from cache
  50. var totalLength = this.get('totalLength');
  51. if (!isNil(totalLength)) {
  52. return totalLength;
  53. }
  54. this.set('totalLength', PolylineUtil.length(points));
  55. return this.get('totalLength');
  56. };
  57. /**
  58. * Get point according to ratio
  59. * @param {number} ratio
  60. * @return {Point} point
  61. */
  62. Polyline.prototype.getPoint = function (ratio) {
  63. var points = this.attr().points;
  64. // get tCache from cache
  65. var tCache = this.get('tCache');
  66. if (!tCache) {
  67. this._setTcache();
  68. tCache = this.get('tCache');
  69. }
  70. var subt;
  71. var index;
  72. each(tCache, function (v, i) {
  73. if (ratio >= v[0] && ratio <= v[1]) {
  74. subt = (ratio - v[0]) / (v[1] - v[0]);
  75. index = i;
  76. }
  77. });
  78. return LineUtil.pointAt(points[index][0], points[index][1], points[index + 1][0], points[index + 1][1], subt);
  79. };
  80. Polyline.prototype._setTcache = function () {
  81. var points = this.attr().points;
  82. if (!points || points.length === 0) {
  83. return;
  84. }
  85. var totalLength = this.getTotalLength();
  86. if (totalLength <= 0) {
  87. return;
  88. }
  89. var tempLength = 0;
  90. var tCache = [];
  91. var segmentT;
  92. var segmentL;
  93. each(points, function (p, i) {
  94. if (points[i + 1]) {
  95. segmentT = [];
  96. segmentT[0] = tempLength / totalLength;
  97. segmentL = LineUtil.length(p[0], p[1], points[i + 1][0], points[i + 1][1]);
  98. tempLength += segmentL;
  99. segmentT[1] = tempLength / totalLength;
  100. tCache.push(segmentT);
  101. }
  102. });
  103. this.set('tCache', tCache);
  104. };
  105. /**
  106. * Get start tangent vector
  107. * @return {Array}
  108. */
  109. Polyline.prototype.getStartTangent = function () {
  110. var points = this.attr().points;
  111. var result = [];
  112. result.push([points[1][0], points[1][1]]);
  113. result.push([points[0][0], points[0][1]]);
  114. return result;
  115. };
  116. /**
  117. * Get end tangent vector
  118. * @return {Array}
  119. */
  120. Polyline.prototype.getEndTangent = function () {
  121. var points = this.attr().points;
  122. var l = points.length - 1;
  123. var result = [];
  124. result.push([points[l - 1][0], points[l - 1][1]]);
  125. result.push([points[l][0], points[l][1]]);
  126. return result;
  127. };
  128. return Polyline;
  129. }(ShapeBase));
  130. export default Polyline;
  131. //# sourceMappingURL=polyline.js.map