Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

graphics

v2.6.5arrow_drop_down
v2.6.5
v2.5.5
STATUS
Passing
DOWNLOADS
4,373
LICENSE
Apache 2.0
VISIBILITY
Public
PUBLISHED
9 months ago
SIZE
711 B
1 contributor
Use graphics in your project ?
Copied
npm i @bit/grommet.grommet.utils.graphics
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Files
graphics.js
39 Lines(34 sloc)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
const POST_DECIMAL_DIGITS = 10;

export const baseUnit = 24;

export const polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
  const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
  return {
    x: centerX + radius * Math.cos(angleInRadians),
    y: centerY + radius * Math.sin(angleInRadians),
  };
};

export const arcCommands = (centerX, centerY, radius, startAngle, endAngle) => {
  // handle that we can't draw a complete circle
  let normalizedEndAngle = endAngle;
  if (endAngle - startAngle >= 360) {
    normalizedEndAngle = startAngle + 359.99;
  }
  const start = polarToCartesian(centerX, centerY, radius, normalizedEndAngle);
  const end = polarToCartesian(centerX, centerY, radius, startAngle);
  const arcSweep = normalizedEndAngle - startAngle <= 180 ? '0' : '1';
  const d = [
    'M',
    start.x.toFixed(POST_DECIMAL_DIGITS),
    start.y.toFixed(POST_DECIMAL_DIGITS),
    'A',
    radius.toFixed(POST_DECIMAL_DIGITS),
    radius.toFixed(POST_DECIMAL_DIGITS),
    0,
    arcSweep,
    0,
    end.x.toFixed(POST_DECIMAL_DIGITS),
    end.y.toFixed(POST_DECIMAL_DIGITS),
  ].join(' ');
  return d;
};

export const translateEndAngle = (startAngle, anglePer, value) =>
  Math.min(360, Math.max(0, startAngle + anglePer * value));