Wedge._createArcPath() — react Function Reference

Architecture documentation for the Wedge._createArcPath() function in Wedge.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ Wedge._createArcPath() — react Function Reference

Dependency Diagram

graph TD
  59f18d30_17fc_4345_a1c6_c8067d37c30e["Wedge._createArcPath()"]
  4fe47bd9_a391_af84_ed7e_092adf8086dd["Wedge.js"]
  59f18d30_17fc_4345_a1c6_c8067d37c30e -->|defined in| 4fe47bd9_a391_af84_ed7e_092adf8086dd
  style 59f18d30_17fc_4345_a1c6_c8067d37c30e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-art/npm/Wedge.js lines 100–151

  _createArcPath: function _createArcPath(startAngle, endAngle, or, ir) {
    var path = Path();

    // angles in radians
    var sa = this._degreesToRadians(startAngle);
    var ea = this._degreesToRadians(endAngle);

    // central arc angle in radians
    var ca = sa > ea ? this.circleRadians - sa + ea : ea - sa;

    // cached sine and cosine values
    var ss = Math.sin(sa);
    var es = Math.sin(ea);
    var sc = Math.cos(sa);
    var ec = Math.cos(ea);

    // cached differences
    var ds = es - ss;
    var dc = ec - sc;
    var dr = ir - or;

    // if the angle is over pi radians (180 degrees)
    // we will need to let the drawing method know.
    var large = ca > Math.PI;

    // TODO (sema) Please improve theses comments to make the math
    // more understandable.
    //
    // Formula for a point on a circle at a specific angle with a center
    // at (0, 0):
    // x = radius * Math.sin(radians)
    // y = radius * Math.cos(radians)
    //
    // For our starting point, we offset the formula using the outer
    // radius because our origin is at (top, left).
    // In typical web layout fashion, we are drawing in quadrant IV
    // (a.k.a. Southeast) where x is positive and y is negative.
    //
    // The arguments for path.arc and path.counterArc used below are:
    // (endX, endY, radiusX, radiusY, largeAngle)

    path
      .move(or + or * ss, or - or * sc) // move to starting point
      .arc(or * ds, or * -dc, or, or, large) // outer arc
      .line(dr * es, dr * -ec); // width of arc or wedge

    if (ir) {
      path.counterArc(ir * -ds, ir * dc, ir, ir, large); // inner arc
    }

    return path;
  },