/* * * * (c) 2010-2020 Torstein Honsi * * Extensions to the SVGRenderer class to enable 3D shapes * * License: www.highcharts.com/license * * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!! * * */ 'use strict'; import H from '../parts/Globals.js'; import U from '../parts/Utilities.js'; var animObject = U.animObject, defined = U.defined, extend = U.extend, merge = U.merge, objectEach = U.objectEach, pick = U.pick; import '../parts/Color.js'; import '../parts/SvgRenderer.js'; var cos = Math.cos, PI = Math.PI, sin = Math.sin; var charts = H.charts, color = H.color, deg2rad = H.deg2rad, perspective = H.perspective, SVGElement = H.SVGElement, SVGRenderer = H.SVGRenderer, // internal: dFactor, element3dMethods, cuboidMethods; /* EXTENSION TO THE SVG-RENDERER TO ENABLE 3D SHAPES */ // HELPER METHODS dFactor = (4 * (Math.sqrt(2) - 1) / 3) / (PI / 2); /* eslint-disable no-invalid-this, valid-jsdoc */ /** * Method to construct a curved path. Can 'wrap' around more then 180 degrees. * @private */ function curveTo(cx, cy, rx, ry, start, end, dx, dy) { var result = [], arcAngle = end - start; if ((end > start) && (end - start > Math.PI / 2 + 0.0001)) { result = result.concat(curveTo(cx, cy, rx, ry, start, start + (Math.PI / 2), dx, dy)); result = result.concat(curveTo(cx, cy, rx, ry, start + (Math.PI / 2), end, dx, dy)); return result; } if ((end < start) && (start - end > Math.PI / 2 + 0.0001)) { result = result.concat(curveTo(cx, cy, rx, ry, start, start - (Math.PI / 2), dx, dy)); result = result.concat(curveTo(cx, cy, rx, ry, start - (Math.PI / 2), end, dx, dy)); return result; } return [[ 'C', cx + (rx * Math.cos(start)) - ((rx * dFactor * arcAngle) * Math.sin(start)) + dx, cy + (ry * Math.sin(start)) + ((ry * dFactor * arcAngle) * Math.cos(start)) + dy, cx + (rx * Math.cos(end)) + ((rx * dFactor * arcAngle) * Math.sin(end)) + dx, cy + (ry * Math.sin(end)) - ((ry * dFactor * arcAngle) * Math.cos(end)) + dy, cx + (rx * Math.cos(end)) + dx, cy + (ry * Math.sin(end)) + dy ]]; } SVGRenderer.prototype.toLinePath = function (points, closed) { var result = []; // Put "L x y" for each point points.forEach(function (point) { result.push(['L', point.x, point.y]); }); if (points.length) { // Set the first element to M result[0][0] = 'M'; // If it is a closed line, add Z if (closed) { result.push(['Z']); } } return result; }; SVGRenderer.prototype.toLineSegments = function (points) { var result = [], m = true; points.forEach(function (point) { result.push(m ? ['M', point.x, point.y] : ['L', point.x, point.y]); m = !m; }); return result; }; // A 3-D Face is defined by it's 3D vertexes, and is only visible if it's // vertexes are counter-clockwise (Back-face culling). It is used as a // polyhedron Element SVGRenderer.prototype.face3d = function (args) { var renderer = this, ret = this.createElement('path'); ret.vertexes = []; ret.insidePlotArea = false; ret.enabled = true; ret.attr = function (hash) { if (typeof hash === 'object' && (defined(hash.enabled) || defined(hash.vertexes) || defined(hash.insidePlotArea))) { this.enabled = pick(hash.enabled, this.enabled); this.vertexes = pick(hash.vertexes, this.vertexes); this.insidePlotArea = pick(hash.insidePlotArea, this.insidePlotArea); delete hash.enabled; delete hash.vertexes; delete hash.insidePlotArea; var chart = charts[renderer.chartIndex], vertexes2d = perspective(this.vertexes, chart, this.insidePlotArea), path = renderer.toLinePath(vertexes2d, true), area = H.shapeArea(vertexes2d), visibility = (this.enabled && area > 0) ? 'visible' : 'hidden'; hash.d = path; hash.visibility = visibility; } return SVGElement.prototype.attr.apply(this, arguments); }; ret.animate = function (params) { if (typeof params === 'object' && (defined(params.enabled) || defined(params.vertexes) || defined(params.insidePlotArea))) { this.enabled = pick(params.enabled, this.enabled); this.vertexes = pick(params.vertexes, this.vertexes); this.insidePlotArea = pick(params.insidePlotArea, this.insidePlotArea); delete params.enabled; delete params.vertexes; delete params.insidePlotArea; var chart = charts[renderer.chartIndex], vertexes2d = perspective(this.vertexes, chart, this.insidePlotArea), path = renderer.toLinePath(vertexes2d, true), area = H.shapeArea(vertexes2d), visibility = (this.enabled && area > 0) ? 'visible' : 'hidden'; params.d = path; this.attr('visibility', visibility); } return SVGElement.prototype.animate.apply(this, arguments); }; return ret.attr(args); }; // A Polyhedron is a handy way of defining a group of 3-D faces. It's only // attribute is `faces`, an array of attributes of each one of it's Face3D // instances. SVGRenderer.prototype.polyhedron = function (args) { var renderer = this, result = this.g(), destroy = result.destroy; if (!this.styledMode) { result.attr({ 'stroke-linejoin': 'round' }); } result.faces = []; // destroy all children result.destroy = function () { for (var i = 0; i < result.faces.length; i++) { result.faces[i].destroy(); } return destroy.call(this); }; result.attr = function (hash, val, complete, continueAnimation) { if (typeof hash === 'object' && defined(hash.faces)) { while (result.faces.length > hash.faces.length) { result.faces.pop().destroy(); } while (result.faces.length < hash.faces.length) { result.faces.push(renderer.face3d().add(result)); } for (var i = 0; i < hash.faces.length; i++) { if (renderer.styledMode) { delete hash.faces[i].fill; } result.faces[i].attr(hash.faces[i], null, complete, continueAnimation); } delete hash.faces; } return SVGElement.prototype.attr.apply(this, arguments); }; result.animate = function (params, duration, complete) { if (params && params.faces) { while (result.faces.length > params.faces.length) { result.faces.pop().destroy(); } while (result.faces.length < params.faces.length) { result.faces.push(renderer.face3d().add(result)); } for (var i = 0; i < params.faces.length; i++) { result.faces[i].animate(params.faces[i], duration, complete); } delete params.faces; } return SVGElement.prototype.animate.apply(this, arguments); }; return result.attr(args); }; // Base, abstract prototype member for 3D elements element3dMethods = { /** * The init is used by base - renderer.Element * @private */ initArgs: function (args) { var elem3d = this, renderer = elem3d.renderer, paths = renderer[elem3d.pathType + 'Path'](args), zIndexes = paths.zIndexes; // build parts elem3d.parts.forEach(function (part) { elem3d[part] = renderer.path(paths[part]).attr({ 'class': 'highcharts-3d-' + part, zIndex: zIndexes[part] || 0 }).add(elem3d); }); elem3d.attr({ 'stroke-linejoin': 'round', zIndex: zIndexes.group }); // store original destroy elem3d.originalDestroy = elem3d.destroy; elem3d.destroy = elem3d.destroyParts; // Store information if any side of element was rendered by force. elem3d.forcedSides = paths.forcedSides; }, /** * Single property setter that applies options to each part * @private */ singleSetterForParts: function (prop, val, values, verb, duration, complete) { var elem3d = this, newAttr = {}, optionsToApply = [null, null, (verb || 'attr'), duration, complete], hasZIndexes = values && values.zIndexes; if (!values) { newAttr[prop] = val; optionsToApply[0] = newAttr; } else { // It is needed to deal with the whole group zIndexing // in case of graph rotation if (hasZIndexes && hasZIndexes.group) { this.attr({ zIndex: hasZIndexes.group }); } objectEach(values, function (partVal, part) { newAttr[part] = {}; newAttr[part][prop] = partVal; // include zIndexes if provided if (hasZIndexes) { newAttr[part].zIndex = values.zIndexes[part] || 0; } }); optionsToApply[1] = newAttr; } return elem3d.processParts.apply(elem3d, optionsToApply); }, /** * Calls function for each part. Used for attr, animate and destroy. * @private */ processParts: function (props, partsProps, verb, duration, complete) { var elem3d = this; elem3d.parts.forEach(function (part) { // if different props for different parts if (partsProps) { props = pick(partsProps[part], false); } // only if something to set, but allow undefined if (props !== false) { elem3d[part][verb](props, duration, complete); } }); return elem3d; }, /** * Destroy all parts * @private */ destroyParts: function () { this.processParts(null, null, 'destroy'); return this.originalDestroy(); } }; // CUBOID cuboidMethods = merge(element3dMethods, { parts: ['front', 'top', 'side'], pathType: 'cuboid', attr: function (args, val, complete, continueAnimation) { // Resolve setting attributes by string name if (typeof args === 'string' && typeof val !== 'undefined') { var key = args; args = {}; args[key] = val; } if (args.shapeArgs || defined(args.x)) { return this.singleSetterForParts('d', null, this.renderer[this.pathType + 'Path'](args.shapeArgs || args)); } return SVGElement.prototype.attr.call(this, args, void 0, complete, continueAnimation); }, animate: function (args, duration, complete) { if (defined(args.x) && defined(args.y)) { var paths = this.renderer[this.pathType + 'Path'](args), forcedSides = paths.forcedSides; this.singleSetterForParts('d', null, paths, 'animate', duration, complete); this.attr({ zIndex: paths.zIndexes.group }); // If sides that are forced to render changed, recalculate colors. if (forcedSides !== this.forcedSides) { this.forcedSides = forcedSides; cuboidMethods.fillSetter.call(this, this.fill); } } else { SVGElement.prototype.animate.call(this, args, duration, complete); } return this; }, fillSetter: function (fill) { var elem3d = this; elem3d.forcedSides = elem3d.forcedSides || []; elem3d.singleSetterForParts('fill', null, { front: fill, // Do not change color if side was forced to render. top: color(fill).brighten(elem3d.forcedSides.indexOf('top') >= 0 ? 0 : 0.1).get(), side: color(fill).brighten(elem3d.forcedSides.indexOf('side') >= 0 ? 0 : -0.1).get() }); // fill for animation getter (#6776) elem3d.color = elem3d.fill = fill; return elem3d; } }); // set them up SVGRenderer.prototype.elements3d = { base: element3dMethods, cuboid: cuboidMethods }; /** * return result, generalization * @private * @requires highcharts-3d */ SVGRenderer.prototype.element3d = function (type, shapeArgs) { // base var ret = this.g(); // extend extend(ret, this.elements3d[type]); // init ret.initArgs(shapeArgs); // return return ret; }; // generelized, so now use simply SVGRenderer.prototype.cuboid = function (shapeArgs) { return this.element3d('cuboid', shapeArgs); }; // Generates a cuboid path and zIndexes H.SVGRenderer.prototype.cuboidPath = function (shapeArgs) { var x = shapeArgs.x, y = shapeArgs.y, z = shapeArgs.z || 0, // For side calculation (right/left) // there is a need for height (and other shapeArgs arguments) // to be at least 1px h = shapeArgs.height, w = shapeArgs.width, d = shapeArgs.depth, chart = charts[this.chartIndex], front, back, top, bottom, left, right, shape, path1, path2, path3, isFront, isTop, isRight, options3d = chart.options.chart.options3d, alpha = options3d.alpha, // Priority for x axis is the biggest, // because of x direction has biggest influence on zIndex incrementX = 1000000, // y axis has the smallest priority in case of our charts // (needs to be set because of stacking) incrementY = 10, incrementZ = 100, zIndex = 0, // The 8 corners of the cube pArr = [{ x: x, y: y, z: z }, { x: x + w, y: y, z: z }, { x: x + w, y: y + h, z: z }, { x: x, y: y + h, z: z }, { x: x, y: y + h, z: z + d }, { x: x + w, y: y + h, z: z + d }, { x: x + w, y: y, z: z + d }, { x: x, y: y, z: z + d }], forcedSides = [], pickShape; // apply perspective pArr = perspective(pArr, chart, shapeArgs.insidePlotArea); /** * helper method to decide which side is visible * @private */ function mapSidePath(i) { // Added support for 0 value in columns, where height is 0 // but the shape is rendered. // Height is used from 1st to 6th element of pArr if (h === 0 && i > 1 && i < 6) { // [2, 3, 4, 5] return { x: pArr[i].x, // when height is 0 instead of cuboid we render plane // so it is needed to add fake 10 height to imitate cuboid // for side calculation y: pArr[i].y + 10, z: pArr[i].z }; } // It is needed to calculate dummy sides (front/back) for breaking // points in case of x and depth values. If column has side, // it means that x values of front and back side are different. if (pArr[0].x === pArr[7].x && i >= 4) { // [4, 5, 6, 7] return { x: pArr[i].x + 10, // when height is 0 instead of cuboid we render plane // so it is needed to add fake 10 height to imitate cuboid // for side calculation y: pArr[i].y, z: pArr[i].z }; } // Added dummy depth if (d === 0 && i < 2 || i > 5) { // [0, 1, 6, 7] return { x: pArr[i].x, // when height is 0 instead of cuboid we render plane // so it is needed to add fake 10 height to imitate cuboid // for side calculation y: pArr[i].y, z: pArr[i].z + 10 }; } return pArr[i]; } /** * method creating the final side * @private */ function mapPath(i) { return pArr[i]; } /** * First value - path with specific face * Second value - added information about side for later calculations. * Possible second values are 0 for path1, 1 for path2 and -1 for no path * chosen. * Third value - string containing information about current side * of cuboid for forcing side rendering. * @private */ pickShape = function (verticesIndex1, verticesIndex2, side) { var ret = [[], -1], // An array of vertices for cuboid face face1 = verticesIndex1.map(mapPath), face2 = verticesIndex2.map(mapPath), // dummy face is calculated the same way as standard face, // but if cuboid height is 0 additional height is added so it is // possible to use this vertices array for visible face calculation dummyFace1 = verticesIndex1.map(mapSidePath), dummyFace2 = verticesIndex2.map(mapSidePath); if (H.shapeArea(face1) < 0) { ret = [face1, 0]; } else if (H.shapeArea(face2) < 0) { ret = [face2, 1]; } else if (side) { forcedSides.push(side); if (H.shapeArea(dummyFace1) < 0) { ret = [face1, 0]; } else if (H.shapeArea(dummyFace2) < 0) { ret = [face2, 1]; } else { ret = [face1, 0]; // force side calculation. } } return ret; }; // front or back front = [3, 2, 1, 0]; back = [7, 6, 5, 4]; shape = pickShape(front, back, 'front'); path1 = shape[0]; isFront = shape[1]; // top or bottom top = [1, 6, 7, 0]; bottom = [4, 5, 2, 3]; shape = pickShape(top, bottom, 'top'); path2 = shape[0]; isTop = shape[1]; // side right = [1, 2, 5, 6]; left = [0, 7, 4, 3]; shape = pickShape(right, left, 'side'); path3 = shape[0]; isRight = shape[1]; /* New block used for calculating zIndex. It is basing on X, Y and Z position of specific columns. All zIndexes (for X, Y and Z values) are added to the final zIndex, where every value has different priority. The biggest priority is in X and Z directions, the lowest index is for stacked columns (Y direction and the same X and Z positions). Big differences between priorities is made because we need to ensure that even for big changes in Y and Z parameters all columns will be drawn correctly. */ if (isRight === 1) { // It is needed to connect value with current chart width // for big chart size. zIndex += incrementX * (chart.plotWidth - x); } else if (!isRight) { zIndex += incrementX * x; } zIndex += incrementY * (!isTop || // Numbers checked empirically (alpha >= 0 && alpha <= 180 || alpha < 360 && alpha > 357.5) ? chart.plotHeight - y : 10 + y); if (isFront === 1) { zIndex += incrementZ * (z); } else if (!isFront) { zIndex += incrementZ * (1000 - z); } return { front: this.toLinePath(path1, true), top: this.toLinePath(path2, true), side: this.toLinePath(path3, true), zIndexes: { group: Math.round(zIndex) }, forcedSides: forcedSides, // additional info about zIndexes isFront: isFront, isTop: isTop }; // #4774 }; // SECTORS // H.SVGRenderer.prototype.arc3d = function (attribs) { var wrapper = this.g(), renderer = wrapper.renderer, customAttribs = ['x', 'y', 'r', 'innerR', 'start', 'end', 'depth']; /** * Get custom attributes. Don't mutate the original object and return an * object with only custom attr. * @private */ function suckOutCustom(params) { var hasCA = false, ca = {}, key; params = merge(params); // Don't mutate the original object for (key in params) { if (customAttribs.indexOf(key) !== -1) { ca[key] = params[key]; delete params[key]; hasCA = true; } } return hasCA ? ca : false; } attribs = merge(attribs); attribs.alpha = (attribs.alpha || 0) * deg2rad; attribs.beta = (attribs.beta || 0) * deg2rad; // Create the different sub sections of the shape wrapper.top = renderer.path(); wrapper.side1 = renderer.path(); wrapper.side2 = renderer.path(); wrapper.inn = renderer.path(); wrapper.out = renderer.path(); // Add all faces wrapper.onAdd = function () { var parent = wrapper.parentGroup, className = wrapper.attr('class'); wrapper.top.add(wrapper); // These faces are added outside the wrapper group because the z index // relates to neighbour elements as well ['out', 'inn', 'side1', 'side2'].forEach(function (face) { wrapper[face] .attr({ 'class': className + ' highcharts-3d-side' }) .add(parent); }); }; // Cascade to faces ['addClass', 'removeClass'].forEach(function (fn) { wrapper[fn] = function () { var args = arguments; ['top', 'out', 'inn', 'side1', 'side2'].forEach(function (face) { wrapper[face][fn].apply(wrapper[face], args); }); }; }); /** * Compute the transformed paths and set them to the composite shapes * @private */ wrapper.setPaths = function (attribs) { var paths = wrapper.renderer.arc3dPath(attribs), zIndex = paths.zTop * 100; wrapper.attribs = attribs; wrapper.top.attr({ d: paths.top, zIndex: paths.zTop }); wrapper.inn.attr({ d: paths.inn, zIndex: paths.zInn }); wrapper.out.attr({ d: paths.out, zIndex: paths.zOut }); wrapper.side1.attr({ d: paths.side1, zIndex: paths.zSide1 }); wrapper.side2.attr({ d: paths.side2, zIndex: paths.zSide2 }); // show all children wrapper.zIndex = zIndex; wrapper.attr({ zIndex: zIndex }); // Set the radial gradient center the first time if (attribs.center) { wrapper.top.setRadialReference(attribs.center); delete attribs.center; } }; wrapper.setPaths(attribs); /** * Apply the fill to the top and a darker shade to the sides * @private */ wrapper.fillSetter = function (value) { var darker = color(value).brighten(-0.1).get(); this.fill = value; this.side1.attr({ fill: darker }); this.side2.attr({ fill: darker }); this.inn.attr({ fill: darker }); this.out.attr({ fill: darker }); this.top.attr({ fill: value }); return this; }; // Apply the same value to all. These properties cascade down to the // children when set to the composite arc3d. ['opacity', 'translateX', 'translateY', 'visibility'].forEach(function (setter) { wrapper[setter + 'Setter'] = function (value, key) { wrapper[key] = value; ['out', 'inn', 'side1', 'side2', 'top'].forEach(function (el) { wrapper[el].attr(key, value); }); }; }); // Override attr to remove shape attributes and use those to set child paths wrapper.attr = function (params) { var ca; if (typeof params === 'object') { ca = suckOutCustom(params); if (ca) { extend(wrapper.attribs, ca); wrapper.setPaths(wrapper.attribs); } } return SVGElement.prototype.attr.apply(wrapper, arguments); }; // Override the animate function by sucking out custom parameters related to // the shapes directly, and update the shapes from the animation step. wrapper.animate = function (params, animation, complete) { var ca, from = this.attribs, to, anim, randomProp = 'data-' + Math.random().toString(26).substring(2, 9); // Attribute-line properties connected to 3D. These shouldn't have been // in the attribs collection in the first place. delete params.center; delete params.z; delete params.alpha; delete params.beta; anim = animObject(pick(animation, this.renderer.globalAnimation)); if (anim.duration) { ca = suckOutCustom(params); // Params need to have a property in order for the step to run // (#5765, #7097, #7437) wrapper[randomProp] = 0; params[randomProp] = 1; wrapper[randomProp + 'Setter'] = H.noop; if (ca) { to = ca; anim.step = function (a, fx) { /** * @private */ function interpolate(key) { return from[key] + (pick(to[key], from[key]) - from[key]) * fx.pos; } if (fx.prop === randomProp) { fx.elem.setPaths(merge(from, { x: interpolate('x'), y: interpolate('y'), r: interpolate('r'), innerR: interpolate('innerR'), start: interpolate('start'), end: interpolate('end'), depth: interpolate('depth') })); } }; } animation = anim; // Only when duration (#5572) } return SVGElement.prototype.animate.call(this, params, animation, complete); }; // destroy all children wrapper.destroy = function () { this.top.destroy(); this.out.destroy(); this.inn.destroy(); this.side1.destroy(); this.side2.destroy(); return SVGElement.prototype.destroy.call(this); }; // hide all children wrapper.hide = function () { this.top.hide(); this.out.hide(); this.inn.hide(); this.side1.hide(); this.side2.hide(); }; wrapper.show = function (inherit) { this.top.show(inherit); this.out.show(inherit); this.inn.show(inherit); this.side1.show(inherit); this.side2.show(inherit); }; return wrapper; }; // Generate the paths required to draw a 3D arc SVGRenderer.prototype.arc3dPath = function (shapeArgs) { var cx = shapeArgs.x, // x coordinate of the center cy = shapeArgs.y, // y coordinate of the center start = shapeArgs.start, // start angle end = shapeArgs.end - 0.00001, // end angle r = shapeArgs.r, // radius ir = shapeArgs.innerR || 0, // inner radius d = shapeArgs.depth || 0, // depth alpha = shapeArgs.alpha, // alpha rotation of the chart beta = shapeArgs.beta; // beta rotation of the chart // Derived Variables var cs = Math.cos(start), // cosinus of the start angle ss = Math.sin(start), // sinus of the start angle ce = Math.cos(end), // cosinus of the end angle se = Math.sin(end), // sinus of the end angle rx = r * Math.cos(beta), // x-radius ry = r * Math.cos(alpha), // y-radius irx = ir * Math.cos(beta), // x-radius (inner) iry = ir * Math.cos(alpha), // y-radius (inner) dx = d * Math.sin(beta), // distance between top and bottom in x dy = d * Math.sin(alpha); // distance between top and bottom in y // TOP var top = [ ['M', cx + (rx * cs), cy + (ry * ss)] ]; top = top.concat(curveTo(cx, cy, rx, ry, start, end, 0, 0)); top.push([ 'L', cx + (irx * ce), cy + (iry * se) ]); top = top.concat(curveTo(cx, cy, irx, iry, end, start, 0, 0)); top.push(['Z']); // OUTSIDE var b = (beta > 0 ? Math.PI / 2 : 0), a = (alpha > 0 ? 0 : Math.PI / 2); var start2 = start > -b ? start : (end > -b ? -b : start), end2 = end < PI - a ? end : (start < PI - a ? PI - a : end), midEnd = 2 * PI - a; // When slice goes over bottom middle, need to add both, left and right // outer side. Additionally, when we cross right hand edge, create sharp // edge. Outer shape/wall: // // ------- // / ^ \ // 4) / / \ \ 1) // / / \ \ // / / \ \ // (c)=> ==== ==== <=(d) // \ \ / / // \ \<=(a)/ / // \ \ / / <=(b) // 3) \ v / 2) // ------- // // (a) - inner side // (b) - outer side // (c) - left edge (sharp) // (d) - right edge (sharp) // 1..n - rendering order for startAngle = 0, when set to e.g 90, order // changes clockwise (1->2, 2->3, n->1) and counterclockwise for negative // startAngle var out = [ ['M', cx + (rx * cos(start2)), cy + (ry * sin(start2))] ]; out = out.concat(curveTo(cx, cy, rx, ry, start2, end2, 0, 0)); // When shape is wide, it can cross both, (c) and (d) edges, when using // startAngle if (end > midEnd && start < midEnd) { // Go to outer side out.push([ 'L', cx + (rx * cos(end2)) + dx, cy + (ry * sin(end2)) + dy ]); // Curve to the right edge of the slice (d) out = out.concat(curveTo(cx, cy, rx, ry, end2, midEnd, dx, dy)); // Go to the inner side out.push([ 'L', cx + (rx * cos(midEnd)), cy + (ry * sin(midEnd)) ]); // Curve to the true end of the slice out = out.concat(curveTo(cx, cy, rx, ry, midEnd, end, 0, 0)); // Go to the outer side out.push([ 'L', cx + (rx * cos(end)) + dx, cy + (ry * sin(end)) + dy ]); // Go back to middle (d) out = out.concat(curveTo(cx, cy, rx, ry, end, midEnd, dx, dy)); out.push([ 'L', cx + (rx * cos(midEnd)), cy + (ry * sin(midEnd)) ]); // Go back to the left edge out = out.concat(curveTo(cx, cy, rx, ry, midEnd, end2, 0, 0)); // But shape can cross also only (c) edge: } else if (end > PI - a && start < PI - a) { // Go to outer side out.push([ 'L', cx + (rx * Math.cos(end2)) + dx, cy + (ry * Math.sin(end2)) + dy ]); // Curve to the true end of the slice out = out.concat(curveTo(cx, cy, rx, ry, end2, end, dx, dy)); // Go to the inner side out.push([ 'L', cx + (rx * Math.cos(end)), cy + (ry * Math.sin(end)) ]); // Go back to the artifical end2 out = out.concat(curveTo(cx, cy, rx, ry, end, end2, 0, 0)); } out.push([ 'L', cx + (rx * Math.cos(end2)) + dx, cy + (ry * Math.sin(end2)) + dy ]); out = out.concat(curveTo(cx, cy, rx, ry, end2, start2, dx, dy)); out.push(['Z']); // INSIDE var inn = [ ['M', cx + (irx * cs), cy + (iry * ss)] ]; inn = inn.concat(curveTo(cx, cy, irx, iry, start, end, 0, 0)); inn.push([ 'L', cx + (irx * Math.cos(end)) + dx, cy + (iry * Math.sin(end)) + dy ]); inn = inn.concat(curveTo(cx, cy, irx, iry, end, start, dx, dy)); inn.push(['Z']); // SIDES var side1 = [ ['M', cx + (rx * cs), cy + (ry * ss)], ['L', cx + (rx * cs) + dx, cy + (ry * ss) + dy], ['L', cx + (irx * cs) + dx, cy + (iry * ss) + dy], ['L', cx + (irx * cs), cy + (iry * ss)], ['Z'] ]; var side2 = [ ['M', cx + (rx * ce), cy + (ry * se)], ['L', cx + (rx * ce) + dx, cy + (ry * se) + dy], ['L', cx + (irx * ce) + dx, cy + (iry * se) + dy], ['L', cx + (irx * ce), cy + (iry * se)], ['Z'] ]; // correction for changed position of vanishing point caused by alpha and // beta rotations var angleCorr = Math.atan2(dy, -dx), angleEnd = Math.abs(end + angleCorr), angleStart = Math.abs(start + angleCorr), angleMid = Math.abs((start + end) / 2 + angleCorr); /** * set to 0-PI range * @private */ function toZeroPIRange(angle) { angle = angle % (2 * Math.PI); if (angle > Math.PI) { angle = 2 * Math.PI - angle; } return angle; } angleEnd = toZeroPIRange(angleEnd); angleStart = toZeroPIRange(angleStart); angleMid = toZeroPIRange(angleMid); // *1e5 is to compensate pInt in zIndexSetter var incPrecision = 1e5, a1 = angleMid * incPrecision, a2 = angleStart * incPrecision, a3 = angleEnd * incPrecision; return { top: top, // max angle is PI, so this is always higher zTop: Math.PI * incPrecision + 1, out: out, zOut: Math.max(a1, a2, a3), inn: inn, zInn: Math.max(a1, a2, a3), side1: side1, zSide1: a3 * 0.99, side2: side2, zSide2: a2 * 0.99 }; };