shape.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. import { __extends } from "tslib";
  2. import Element from './element';
  3. import { multiplyVec2 } from '../util/matrix';
  4. var AbstractShape = /** @class */ (function (_super) {
  5. __extends(AbstractShape, _super);
  6. function AbstractShape(cfg) {
  7. return _super.call(this, cfg) || this;
  8. }
  9. // 是否在包围盒内
  10. AbstractShape.prototype._isInBBox = function (refX, refY) {
  11. var bbox = this.getBBox();
  12. return bbox.minX <= refX && bbox.maxX >= refX && bbox.minY <= refY && bbox.maxY >= refY;
  13. };
  14. /**
  15. * 属性更改后需要做的事情
  16. * @protected
  17. * @param {ShapeAttrs} targetAttrs 渲染的图像属性
  18. */
  19. AbstractShape.prototype.afterAttrsChange = function (targetAttrs) {
  20. _super.prototype.afterAttrsChange.call(this, targetAttrs);
  21. this.clearCacheBBox();
  22. };
  23. // 计算包围盒时,需要缓存,这是一个高频的操作
  24. AbstractShape.prototype.getBBox = function () {
  25. var bbox = this.cfg.bbox;
  26. if (!bbox) {
  27. bbox = this.calculateBBox();
  28. this.set('bbox', bbox);
  29. }
  30. return bbox;
  31. };
  32. // 计算相对于画布的包围盒
  33. AbstractShape.prototype.getCanvasBBox = function () {
  34. var canvasBBox = this.cfg.canvasBBox;
  35. if (!canvasBBox) {
  36. canvasBBox = this.calculateCanvasBBox();
  37. this.set('canvasBBox', canvasBBox);
  38. }
  39. return canvasBBox;
  40. };
  41. AbstractShape.prototype.applyMatrix = function (matrix) {
  42. _super.prototype.applyMatrix.call(this, matrix);
  43. // 清理掉缓存的包围盒
  44. this.set('canvasBBox', null);
  45. };
  46. /**
  47. * 计算相对于画布的包围盒,默认等同于 bbox
  48. * @return {BBox} 包围盒
  49. */
  50. AbstractShape.prototype.calculateCanvasBBox = function () {
  51. var bbox = this.getBBox();
  52. var totalMatrix = this.getTotalMatrix();
  53. var minX = bbox.minX, minY = bbox.minY, maxX = bbox.maxX, maxY = bbox.maxY;
  54. if (totalMatrix) {
  55. var topLeft = multiplyVec2(totalMatrix, [bbox.minX, bbox.minY]);
  56. var topRight = multiplyVec2(totalMatrix, [bbox.maxX, bbox.minY]);
  57. var bottomLeft = multiplyVec2(totalMatrix, [bbox.minX, bbox.maxY]);
  58. var bottomRight = multiplyVec2(totalMatrix, [bbox.maxX, bbox.maxY]);
  59. minX = Math.min(topLeft[0], topRight[0], bottomLeft[0], bottomRight[0]);
  60. maxX = Math.max(topLeft[0], topRight[0], bottomLeft[0], bottomRight[0]);
  61. minY = Math.min(topLeft[1], topRight[1], bottomLeft[1], bottomRight[1]);
  62. maxY = Math.max(topLeft[1], topRight[1], bottomLeft[1], bottomRight[1]);
  63. }
  64. var attrs = this.attrs;
  65. // 如果存在 shadow 则计算 shadow
  66. if (attrs.shadowColor) {
  67. var _a = attrs.shadowBlur, shadowBlur = _a === void 0 ? 0 : _a, _b = attrs.shadowOffsetX, shadowOffsetX = _b === void 0 ? 0 : _b, _c = attrs.shadowOffsetY, shadowOffsetY = _c === void 0 ? 0 : _c;
  68. var shadowLeft = minX - shadowBlur + shadowOffsetX;
  69. var shadowRight = maxX + shadowBlur + shadowOffsetX;
  70. var shadowTop = minY - shadowBlur + shadowOffsetY;
  71. var shadowBottom = maxY + shadowBlur + shadowOffsetY;
  72. minX = Math.min(minX, shadowLeft);
  73. maxX = Math.max(maxX, shadowRight);
  74. minY = Math.min(minY, shadowTop);
  75. maxY = Math.max(maxY, shadowBottom);
  76. }
  77. return {
  78. x: minX,
  79. y: minY,
  80. minX: minX,
  81. minY: minY,
  82. maxX: maxX,
  83. maxY: maxY,
  84. width: maxX - minX,
  85. height: maxY - minY,
  86. };
  87. };
  88. /**
  89. * @protected
  90. * 清理缓存的 bbox
  91. */
  92. AbstractShape.prototype.clearCacheBBox = function () {
  93. this.set('bbox', null);
  94. this.set('canvasBBox', null);
  95. };
  96. // 实现接口
  97. AbstractShape.prototype.isClipShape = function () {
  98. return this.get('isClipShape');
  99. };
  100. /**
  101. * @protected
  102. * 不同的图形自己实现是否在图形内部的逻辑,要判断边和填充区域
  103. * @param {number} refX 相对于图形的坐标 x
  104. * @param {number} refY 相对于图形的坐标 Y
  105. * @return {boolean} 点是否在图形内部
  106. */
  107. AbstractShape.prototype.isInShape = function (refX, refY) {
  108. return false;
  109. };
  110. /**
  111. * 是否仅仅使用 BBox 检测就可以判定拾取到图形
  112. * 默认是 false,但是有些图形例如 image、marker 等都可直接使用 BBox 的检测而不需要使用图形拾取
  113. * @return {Boolean} 仅仅使用 BBox 进行拾取
  114. */
  115. AbstractShape.prototype.isOnlyHitBox = function () {
  116. return false;
  117. };
  118. // 不同的 Shape 各自实现
  119. AbstractShape.prototype.isHit = function (x, y) {
  120. var startArrowShape = this.get('startArrowShape');
  121. var endArrowShape = this.get('endArrowShape');
  122. var vec = [x, y, 1];
  123. vec = this.invertFromMatrix(vec);
  124. var refX = vec[0], refY = vec[1];
  125. var inBBox = this._isInBBox(refX, refY);
  126. // 跳过图形的拾取,在某些图形中可以省略一倍的检测成本
  127. if (this.isOnlyHitBox()) {
  128. return inBBox;
  129. }
  130. // 被裁减掉的和不在包围盒内的不进行计算
  131. if (inBBox && !this.isClipped(refX, refY)) {
  132. // 对图形进行拾取判断
  133. if (this.isInShape(refX, refY)) {
  134. return true;
  135. }
  136. // 对起始箭头进行拾取判断
  137. if (startArrowShape && startArrowShape.isHit(refX, refY)) {
  138. return true;
  139. }
  140. // 对结束箭头进行拾取判断
  141. if (endArrowShape && endArrowShape.isHit(refX, refY)) {
  142. return true;
  143. }
  144. }
  145. return false;
  146. };
  147. return AbstractShape;
  148. }(Element));
  149. export default AbstractShape;
  150. //# sourceMappingURL=shape.js.map