CylinderComposition.js 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  1. /* *
  2. *
  3. * Highcharts cylinder - a 3D series
  4. *
  5. * (c) 2010-2021 Highsoft AS
  6. *
  7. * Author: Kacper Madej
  8. *
  9. * License: www.highcharts.com/license
  10. *
  11. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  12. *
  13. * */
  14. 'use strict';
  15. import Color from '../../Core/Color/Color.js';
  16. var color = Color.parse;
  17. import H from '../../Core/Globals.js';
  18. var charts = H.charts, deg2rad = H.deg2rad, RendererProto = H.Renderer.prototype;
  19. import Math3D from '../../Extensions/Math3D.js';
  20. var perspective = Math3D.perspective;
  21. import U from '../../Core/Utilities.js';
  22. var merge = U.merge, pick = U.pick;
  23. /* *
  24. *
  25. * Composition
  26. *
  27. * */
  28. var cuboidPath = RendererProto.cuboidPath;
  29. // Check if a path is simplified. The simplified path contains only lineTo
  30. // segments, whereas non-simplified contain curves.
  31. var isSimplified = function (path) {
  32. return !path.some(function (seg) { return seg[0] === 'C'; });
  33. };
  34. // cylinder extends cuboid
  35. var cylinderMethods = merge(RendererProto.elements3d.cuboid, {
  36. parts: ['top', 'bottom', 'front', 'back'],
  37. pathType: 'cylinder',
  38. fillSetter: function (fill) {
  39. this.singleSetterForParts('fill', null, {
  40. front: fill,
  41. back: fill,
  42. top: color(fill).brighten(0.1).get(),
  43. bottom: color(fill).brighten(-0.1).get()
  44. });
  45. // fill for animation getter (#6776)
  46. this.color = this.fill = fill;
  47. return this;
  48. }
  49. });
  50. RendererProto.elements3d.cylinder = cylinderMethods;
  51. RendererProto.cylinder = function (shapeArgs) {
  52. return this.element3d('cylinder', shapeArgs);
  53. };
  54. // Generates paths and zIndexes.
  55. RendererProto.cylinderPath = function (shapeArgs) {
  56. var renderer = this, chart = charts[renderer.chartIndex],
  57. // decide zIndexes of parts based on cubiod logic, for consistency.
  58. cuboidData = cuboidPath.call(renderer, shapeArgs), isTopFirst = !cuboidData.isTop, isFronFirst = !cuboidData.isFront, top = renderer.getCylinderEnd(chart, shapeArgs), bottom = renderer.getCylinderEnd(chart, shapeArgs, true);
  59. return {
  60. front: renderer.getCylinderFront(top, bottom),
  61. back: renderer.getCylinderBack(top, bottom),
  62. top: top,
  63. bottom: bottom,
  64. zIndexes: {
  65. top: isTopFirst ? 3 : 0,
  66. bottom: isTopFirst ? 0 : 3,
  67. front: isFronFirst ? 2 : 1,
  68. back: isFronFirst ? 1 : 2,
  69. group: cuboidData.zIndexes.group
  70. }
  71. };
  72. };
  73. // Returns cylinder Front path
  74. RendererProto.getCylinderFront = function (topPath, bottomPath) {
  75. var path = topPath.slice(0, 3);
  76. if (isSimplified(bottomPath)) {
  77. var move = bottomPath[0];
  78. if (move[0] === 'M') {
  79. path.push(bottomPath[2]);
  80. path.push(bottomPath[1]);
  81. path.push(['L', move[1], move[2]]);
  82. }
  83. }
  84. else {
  85. var move = bottomPath[0], curve1 = bottomPath[1], curve2 = bottomPath[2];
  86. if (move[0] === 'M' && curve1[0] === 'C' && curve2[0] === 'C') {
  87. path.push(['L', curve2[5], curve2[6]]);
  88. path.push(['C', curve2[3], curve2[4], curve2[1], curve2[2], curve1[5], curve1[6]]);
  89. path.push(['C', curve1[3], curve1[4], curve1[1], curve1[2], move[1], move[2]]);
  90. }
  91. }
  92. path.push(['Z']);
  93. return path;
  94. };
  95. // Returns cylinder Back path
  96. RendererProto.getCylinderBack = function (topPath, bottomPath) {
  97. var path = [];
  98. if (isSimplified(topPath)) {
  99. var move = topPath[0], line2 = topPath[2];
  100. if (move[0] === 'M' && line2[0] === 'L') {
  101. path.push(['M', line2[1], line2[2]]);
  102. path.push(topPath[3]);
  103. // End at start
  104. path.push(['L', move[1], move[2]]);
  105. }
  106. }
  107. else {
  108. if (topPath[2][0] === 'C') {
  109. path.push(['M', topPath[2][5], topPath[2][6]]);
  110. }
  111. path.push(topPath[3], topPath[4]);
  112. }
  113. if (isSimplified(bottomPath)) {
  114. var move = bottomPath[0];
  115. if (move[0] === 'M') {
  116. path.push(['L', move[1], move[2]]);
  117. path.push(bottomPath[3]);
  118. path.push(bottomPath[2]);
  119. }
  120. }
  121. else {
  122. var curve2 = bottomPath[2], curve3 = bottomPath[3], curve4 = bottomPath[4];
  123. if (curve2[0] === 'C' && curve3[0] === 'C' && curve4[0] === 'C') {
  124. path.push(['L', curve4[5], curve4[6]]);
  125. path.push(['C', curve4[3], curve4[4], curve4[1], curve4[2], curve3[5], curve3[6]]);
  126. path.push(['C', curve3[3], curve3[4], curve3[1], curve3[2], curve2[5], curve2[6]]);
  127. }
  128. }
  129. path.push(['Z']);
  130. return path;
  131. };
  132. // Retruns cylinder path for top or bottom
  133. RendererProto.getCylinderEnd = function (chart, shapeArgs, isBottom) {
  134. // A half of the smaller one out of width or depth (optional, because
  135. // there's no depth for a funnel that reuses the code)
  136. var depth = pick(shapeArgs.depth, shapeArgs.width), radius = Math.min(shapeArgs.width, depth) / 2,
  137. // Approximated longest diameter
  138. angleOffset = deg2rad * (chart.options.chart.options3d.beta - 90 +
  139. (shapeArgs.alphaCorrection || 0)),
  140. // Could be top or bottom of the cylinder
  141. y = shapeArgs.y + (isBottom ? shapeArgs.height : 0),
  142. // Use cubic Bezier curve to draw a cricle in x,z (y is constant).
  143. // More math. at spencermortensen.com/articles/bezier-circle/
  144. c = 0.5519 * radius, centerX = shapeArgs.width / 2 + shapeArgs.x, centerZ = depth / 2 + shapeArgs.z,
  145. // points could be generated in a loop, but readability will plummet
  146. points = [{
  147. x: 0,
  148. y: y,
  149. z: radius
  150. }, {
  151. x: c,
  152. y: y,
  153. z: radius
  154. }, {
  155. x: radius,
  156. y: y,
  157. z: c
  158. }, {
  159. x: radius,
  160. y: y,
  161. z: 0
  162. }, {
  163. x: radius,
  164. y: y,
  165. z: -c
  166. }, {
  167. x: c,
  168. y: y,
  169. z: -radius
  170. }, {
  171. x: 0,
  172. y: y,
  173. z: -radius
  174. }, {
  175. x: -c,
  176. y: y,
  177. z: -radius
  178. }, {
  179. x: -radius,
  180. y: y,
  181. z: -c
  182. }, {
  183. x: -radius,
  184. y: y,
  185. z: 0
  186. }, {
  187. x: -radius,
  188. y: y,
  189. z: c
  190. }, {
  191. x: -c,
  192. y: y,
  193. z: radius
  194. }, {
  195. x: 0,
  196. y: y,
  197. z: radius
  198. }], cosTheta = Math.cos(angleOffset), sinTheta = Math.sin(angleOffset), perspectivePoints, path, x, z;
  199. // rotete to match chart's beta and translate to the shape center
  200. points.forEach(function (point, i) {
  201. x = point.x;
  202. z = point.z;
  203. // x′ = (x * cosθ − z * sinθ) + centerX
  204. // z′ = (z * cosθ + x * sinθ) + centerZ
  205. points[i].x = (x * cosTheta - z * sinTheta) + centerX;
  206. points[i].z = (z * cosTheta + x * sinTheta) + centerZ;
  207. });
  208. perspectivePoints = perspective(points, chart, true);
  209. // check for sub-pixel curve issue, compare front and back edges
  210. if (Math.abs(perspectivePoints[3].y - perspectivePoints[9].y) < 2.5 &&
  211. Math.abs(perspectivePoints[0].y - perspectivePoints[6].y) < 2.5) {
  212. // use simplied shape
  213. path = this.toLinePath([
  214. perspectivePoints[0],
  215. perspectivePoints[3],
  216. perspectivePoints[6],
  217. perspectivePoints[9]
  218. ], true);
  219. }
  220. else {
  221. // or default curved path to imitate ellipse (2D circle)
  222. path = this.getCurvedPath(perspectivePoints);
  223. }
  224. return path;
  225. };
  226. // Returns curved path in format of:
  227. // [ M, x, y, ...[C, cp1x, cp2y, cp2x, cp2y, epx, epy]*n_times ]
  228. // (cp - control point, ep - end point)
  229. RendererProto.getCurvedPath = function (points) {
  230. var path = [['M', points[0].x, points[0].y]], limit = points.length - 2, i;
  231. for (i = 1; i < limit; i += 3) {
  232. path.push([
  233. 'C',
  234. points[i].x, points[i].y,
  235. points[i + 1].x, points[i + 1].y,
  236. points[i + 2].x, points[i + 2].y
  237. ]);
  238. }
  239. return path;
  240. };