polyline.js 4.6 KB

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