index.esm.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348
  1. import { isDisplayObject, Shape, AbstractRendererPlugin } from '@antv/g-lite';
  2. import { clamp } from '@antv/util';
  3. function _inheritsLoose(subClass, superClass) {
  4. subClass.prototype = Object.create(superClass.prototype);
  5. subClass.prototype.constructor = subClass;
  6. _setPrototypeOf(subClass, superClass);
  7. }
  8. function _setPrototypeOf(o, p) {
  9. _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
  10. o.__proto__ = p;
  11. return o;
  12. };
  13. return _setPrototypeOf(o, p);
  14. }
  15. function generatePath(context, parsedStyle) {
  16. var r = parsedStyle.r;
  17. context.arc(r, r, r, 0, Math.PI * 2, false);
  18. }
  19. function generatePath$1(context, parsedStyle) {
  20. var rxInPixels = parsedStyle.rx,
  21. ryInPixels = parsedStyle.ry;
  22. var rx = rxInPixels;
  23. var ry = ryInPixels;
  24. // @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/ellipse
  25. if (context.ellipse) {
  26. context.ellipse(rx, ry, rx, ry, 0, 0, Math.PI * 2, false);
  27. } else {
  28. // 如果不支持,则使用圆来绘制,进行变形
  29. var r = rx > ry ? rx : ry;
  30. var scaleX = rx > ry ? 1 : rx / ry;
  31. var scaleY = rx > ry ? ry / rx : 1;
  32. context.save();
  33. context.scale(scaleX, scaleY);
  34. context.arc(0, 0, r, 0, Math.PI * 2);
  35. }
  36. }
  37. function generatePath$2(context, parsedStyle) {
  38. var x1 = parsedStyle.x1,
  39. y1 = parsedStyle.y1,
  40. x2 = parsedStyle.x2,
  41. y2 = parsedStyle.y2,
  42. _parsedStyle$defX = parsedStyle.defX,
  43. defX = _parsedStyle$defX === void 0 ? 0 : _parsedStyle$defX,
  44. _parsedStyle$defY = parsedStyle.defY,
  45. defY = _parsedStyle$defY === void 0 ? 0 : _parsedStyle$defY,
  46. markerStart = parsedStyle.markerStart,
  47. markerEnd = parsedStyle.markerEnd,
  48. markerStartOffset = parsedStyle.markerStartOffset,
  49. markerEndOffset = parsedStyle.markerEndOffset;
  50. var startOffsetX = 0;
  51. var startOffsetY = 0;
  52. var endOffsetX = 0;
  53. var endOffsetY = 0;
  54. var rad = 0;
  55. var x;
  56. var y;
  57. if (markerStart && isDisplayObject(markerStart) && markerStartOffset) {
  58. x = x2 - x1;
  59. y = y2 - y1;
  60. rad = Math.atan2(y, x);
  61. startOffsetX = Math.cos(rad) * (markerStartOffset || 0);
  62. startOffsetY = Math.sin(rad) * (markerStartOffset || 0);
  63. }
  64. if (markerEnd && isDisplayObject(markerEnd) && markerEndOffset) {
  65. x = x1 - x2;
  66. y = y1 - y2;
  67. rad = Math.atan2(y, x);
  68. endOffsetX = Math.cos(rad) * (markerEndOffset || 0);
  69. endOffsetY = Math.sin(rad) * (markerEndOffset || 0);
  70. }
  71. context.moveTo(x1 - defX + startOffsetX, y1 - defY + startOffsetY);
  72. context.lineTo(x2 - defX + endOffsetX, y2 - defY + endOffsetY);
  73. }
  74. function generatePath$3(context, parsedStyle) {
  75. var _parsedStyle$defX = parsedStyle.defX,
  76. defX = _parsedStyle$defX === void 0 ? 0 : _parsedStyle$defX,
  77. _parsedStyle$defY = parsedStyle.defY,
  78. defY = _parsedStyle$defY === void 0 ? 0 : _parsedStyle$defY,
  79. markerStart = parsedStyle.markerStart,
  80. markerEnd = parsedStyle.markerEnd,
  81. markerStartOffset = parsedStyle.markerStartOffset,
  82. markerEndOffset = parsedStyle.markerEndOffset;
  83. var _parsedStyle$path = parsedStyle.path,
  84. absolutePath = _parsedStyle$path.absolutePath,
  85. segments = _parsedStyle$path.segments;
  86. var startOffsetX = 0;
  87. var startOffsetY = 0;
  88. var endOffsetX = 0;
  89. var endOffsetY = 0;
  90. var rad = 0;
  91. var x;
  92. var y;
  93. if (markerStart && isDisplayObject(markerStart) && markerStartOffset) {
  94. var _markerStart$parentNo = markerStart.parentNode.getStartTangent(),
  95. p1 = _markerStart$parentNo[0],
  96. p2 = _markerStart$parentNo[1];
  97. x = p1[0] - p2[0];
  98. y = p1[1] - p2[1];
  99. rad = Math.atan2(y, x);
  100. startOffsetX = Math.cos(rad) * (markerStartOffset || 0);
  101. startOffsetY = Math.sin(rad) * (markerStartOffset || 0);
  102. }
  103. if (markerEnd && isDisplayObject(markerEnd) && markerEndOffset) {
  104. var _markerEnd$parentNode = markerEnd.parentNode.getEndTangent(),
  105. _p = _markerEnd$parentNode[0],
  106. _p2 = _markerEnd$parentNode[1];
  107. x = _p[0] - _p2[0];
  108. y = _p[1] - _p2[1];
  109. rad = Math.atan2(y, x);
  110. endOffsetX = Math.cos(rad) * (markerEndOffset || 0);
  111. endOffsetY = Math.sin(rad) * (markerEndOffset || 0);
  112. }
  113. for (var i = 0; i < absolutePath.length; i++) {
  114. var params = absolutePath[i];
  115. var command = params[0];
  116. var nextSegment = absolutePath[i + 1];
  117. var useStartOffset = i === 0 && (startOffsetX !== 0 || startOffsetY !== 0);
  118. var useEndOffset = (i === absolutePath.length - 1 || nextSegment && (nextSegment[0] === 'M' || nextSegment[0] === 'Z')) && endOffsetX !== 0 && endOffsetY !== 0;
  119. switch (command) {
  120. case 'M':
  121. // Use start marker offset
  122. if (useStartOffset) {
  123. context.moveTo(params[1] - defX + startOffsetX, params[2] - defY + startOffsetY);
  124. context.lineTo(params[1] - defX, params[2] - defY);
  125. } else {
  126. context.moveTo(params[1] - defX, params[2] - defY);
  127. }
  128. break;
  129. case 'L':
  130. if (useEndOffset) {
  131. context.lineTo(params[1] - defX + endOffsetX, params[2] - defY + endOffsetY);
  132. } else {
  133. context.lineTo(params[1] - defX, params[2] - defY);
  134. }
  135. break;
  136. case 'Q':
  137. context.quadraticCurveTo(params[1] - defX, params[2] - defY, params[3] - defX, params[4] - defY);
  138. if (useEndOffset) {
  139. context.lineTo(params[3] - defX + endOffsetX, params[4] - defY + endOffsetY);
  140. }
  141. break;
  142. case 'C':
  143. context.bezierCurveTo(params[1] - defX, params[2] - defY, params[3] - defX, params[4] - defY, params[5] - defX, params[6] - defY);
  144. if (useEndOffset) {
  145. context.lineTo(params[5] - defX + endOffsetX, params[6] - defY + endOffsetY);
  146. }
  147. break;
  148. case 'A':
  149. {
  150. var arcParams = segments[i].arcParams;
  151. var cx = arcParams.cx,
  152. cy = arcParams.cy,
  153. rx = arcParams.rx,
  154. ry = arcParams.ry,
  155. startAngle = arcParams.startAngle,
  156. endAngle = arcParams.endAngle,
  157. xRotation = arcParams.xRotation,
  158. sweepFlag = arcParams.sweepFlag;
  159. // @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/ellipse
  160. if (context.ellipse) {
  161. context.ellipse(cx - defX, cy - defY, rx, ry, xRotation, startAngle, endAngle, !!(1 - sweepFlag));
  162. } else {
  163. // @see https://stackoverflow.com/a/47494351
  164. var r = rx > ry ? rx : ry;
  165. var scaleX = rx > ry ? 1 : rx / ry;
  166. var scaleY = rx > ry ? ry / rx : 1;
  167. context.translate(cx - defX, cy - defY);
  168. context.rotate(xRotation);
  169. context.scale(scaleX, scaleY);
  170. context.arc(0, 0, r, startAngle, endAngle, !!(1 - sweepFlag));
  171. context.scale(1 / scaleX, 1 / scaleY);
  172. context.rotate(-xRotation);
  173. context.translate(-(cx - defX), -(cy - defY));
  174. }
  175. if (useEndOffset) {
  176. context.lineTo(params[6] - defX + endOffsetX, params[7] - defY + endOffsetY);
  177. }
  178. break;
  179. }
  180. case 'Z':
  181. context.closePath();
  182. break;
  183. }
  184. }
  185. }
  186. function generatePath$4(context, parsedStyle) {
  187. var _parsedStyle$defX = parsedStyle.defX,
  188. defX = _parsedStyle$defX === void 0 ? 0 : _parsedStyle$defX,
  189. _parsedStyle$defY = parsedStyle.defY,
  190. defY = _parsedStyle$defY === void 0 ? 0 : _parsedStyle$defY,
  191. markerStart = parsedStyle.markerStart,
  192. markerEnd = parsedStyle.markerEnd,
  193. markerStartOffset = parsedStyle.markerStartOffset,
  194. markerEndOffset = parsedStyle.markerEndOffset;
  195. var points = parsedStyle.points.points;
  196. var length = points.length;
  197. var x1 = points[0][0] - defX;
  198. var y1 = points[0][1] - defY;
  199. var x2 = points[length - 1][0] - defX;
  200. var y2 = points[length - 1][1] - defY;
  201. var startOffsetX = 0;
  202. var startOffsetY = 0;
  203. var endOffsetX = 0;
  204. var endOffsetY = 0;
  205. var rad = 0;
  206. var x;
  207. var y;
  208. if (markerStart && isDisplayObject(markerStart) && markerStartOffset) {
  209. x = points[1][0] - points[0][0];
  210. y = points[1][1] - points[0][1];
  211. rad = Math.atan2(y, x);
  212. startOffsetX = Math.cos(rad) * (markerStartOffset || 0);
  213. startOffsetY = Math.sin(rad) * (markerStartOffset || 0);
  214. }
  215. if (markerEnd && isDisplayObject(markerEnd) && markerEndOffset) {
  216. x = points[length - 1][0] - points[0][0];
  217. y = points[length - 1][1] - points[0][1];
  218. rad = Math.atan2(y, x);
  219. endOffsetX = Math.cos(rad) * (markerEndOffset || 0);
  220. endOffsetY = Math.sin(rad) * (markerEndOffset || 0);
  221. }
  222. context.moveTo(x1 + (startOffsetX || endOffsetX), y1 + (startOffsetY || endOffsetY));
  223. for (var i = 1; i < length - 1; i++) {
  224. var point = points[i];
  225. context.lineTo(point[0] - defX, point[1] - defY);
  226. }
  227. context.lineTo(x2, y2);
  228. }
  229. function generatePath$5(context, parsedStyle) {
  230. var _parsedStyle$defX = parsedStyle.defX,
  231. defX = _parsedStyle$defX === void 0 ? 0 : _parsedStyle$defX,
  232. _parsedStyle$defY = parsedStyle.defY,
  233. defY = _parsedStyle$defY === void 0 ? 0 : _parsedStyle$defY,
  234. markerStart = parsedStyle.markerStart,
  235. markerEnd = parsedStyle.markerEnd,
  236. markerStartOffset = parsedStyle.markerStartOffset,
  237. markerEndOffset = parsedStyle.markerEndOffset;
  238. var points = parsedStyle.points.points;
  239. var length = points.length;
  240. var x1 = points[0][0] - defX;
  241. var y1 = points[0][1] - defY;
  242. var x2 = points[length - 1][0] - defX;
  243. var y2 = points[length - 1][1] - defY;
  244. var startOffsetX = 0;
  245. var startOffsetY = 0;
  246. var endOffsetX = 0;
  247. var endOffsetY = 0;
  248. var rad = 0;
  249. var x;
  250. var y;
  251. if (markerStart && isDisplayObject(markerStart) && markerStartOffset) {
  252. x = points[1][0] - points[0][0];
  253. y = points[1][1] - points[0][1];
  254. rad = Math.atan2(y, x);
  255. startOffsetX = Math.cos(rad) * (markerStartOffset || 0);
  256. startOffsetY = Math.sin(rad) * (markerStartOffset || 0);
  257. }
  258. if (markerEnd && isDisplayObject(markerEnd) && markerEndOffset) {
  259. x = points[length - 2][0] - points[length - 1][0];
  260. y = points[length - 2][1] - points[length - 1][1];
  261. rad = Math.atan2(y, x);
  262. endOffsetX = Math.cos(rad) * (markerEndOffset || 0);
  263. endOffsetY = Math.sin(rad) * (markerEndOffset || 0);
  264. }
  265. context.moveTo(x1 + startOffsetX, y1 + startOffsetY);
  266. for (var i = 1; i < length - 1; i++) {
  267. var point = points[i];
  268. context.lineTo(point[0] - defX, point[1] - defY);
  269. }
  270. context.lineTo(x2 + endOffsetX, y2 + endOffsetY);
  271. }
  272. function generatePath$6(context, parsedStyle) {
  273. var radius = parsedStyle.radius,
  274. width = parsedStyle.width,
  275. height = parsedStyle.height;
  276. var w = width;
  277. var h = height;
  278. var hasRadius = radius && radius.some(function (r) {
  279. return r !== 0;
  280. });
  281. if (!hasRadius) {
  282. // Canvas support negative width/height of rect
  283. context.rect(0, 0, w, h);
  284. } else {
  285. var signX = width > 0 ? 1 : -1;
  286. var signY = height > 0 ? 1 : -1;
  287. var sweepFlag = signX + signY === 0;
  288. var _radius$map = radius.map(function (r) {
  289. return clamp(r, 0, Math.min(Math.abs(w) / 2, Math.abs(h) / 2));
  290. }),
  291. tlr = _radius$map[0],
  292. trr = _radius$map[1],
  293. brr = _radius$map[2],
  294. blr = _radius$map[3];
  295. context.moveTo(signX * tlr, 0);
  296. context.lineTo(w - signX * trr, 0);
  297. if (trr !== 0) {
  298. context.arc(w - signX * trr, signY * trr, trr, -signY * Math.PI / 2, signX > 0 ? 0 : Math.PI, sweepFlag);
  299. }
  300. context.lineTo(w, h - signY * brr);
  301. if (brr !== 0) {
  302. context.arc(w - signX * brr, h - signY * brr, brr, signX > 0 ? 0 : Math.PI, signY > 0 ? Math.PI / 2 : 1.5 * Math.PI, sweepFlag);
  303. }
  304. context.lineTo(signX * blr, h);
  305. if (blr !== 0) {
  306. context.arc(signX * blr, h - signY * blr, blr, signY > 0 ? Math.PI / 2 : -Math.PI / 2, signX > 0 ? Math.PI : 0, sweepFlag);
  307. }
  308. context.lineTo(0, signY * tlr);
  309. if (tlr !== 0) {
  310. context.arc(signX * tlr, signY * tlr, tlr, signX > 0 ? Math.PI : 0, signY > 0 ? Math.PI * 1.5 : Math.PI / 2, sweepFlag);
  311. }
  312. }
  313. }
  314. var Plugin = /*#__PURE__*/function (_AbstractRendererPlug) {
  315. _inheritsLoose(Plugin, _AbstractRendererPlug);
  316. function Plugin() {
  317. var _this;
  318. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  319. args[_key] = arguments[_key];
  320. }
  321. _this = _AbstractRendererPlug.call.apply(_AbstractRendererPlug, [this].concat(args)) || this;
  322. _this.name = 'canvas-path-generator';
  323. return _this;
  324. }
  325. var _proto = Plugin.prototype;
  326. _proto.init = function init() {
  327. var _pathGeneratorFactory;
  328. var pathGeneratorFactory = (_pathGeneratorFactory = {}, _pathGeneratorFactory[Shape.CIRCLE] = generatePath, _pathGeneratorFactory[Shape.ELLIPSE] = generatePath$1, _pathGeneratorFactory[Shape.RECT] = generatePath$6, _pathGeneratorFactory[Shape.LINE] = generatePath$2, _pathGeneratorFactory[Shape.POLYLINE] = generatePath$5, _pathGeneratorFactory[Shape.POLYGON] = generatePath$4, _pathGeneratorFactory[Shape.PATH] = generatePath$3, _pathGeneratorFactory[Shape.TEXT] = undefined, _pathGeneratorFactory[Shape.GROUP] = undefined, _pathGeneratorFactory[Shape.IMAGE] = undefined, _pathGeneratorFactory[Shape.HTML] = undefined, _pathGeneratorFactory[Shape.MESH] = undefined, _pathGeneratorFactory);
  329. // @ts-ignore
  330. this.context.pathGeneratorFactory = pathGeneratorFactory;
  331. };
  332. _proto.destroy = function destroy() {
  333. // @ts-ignore
  334. delete this.context.pathGeneratorFactory;
  335. };
  336. return Plugin;
  337. }(AbstractRendererPlugin);
  338. export { Plugin };