Skip to content

Instantly share code, notes, and snippets.

@savelichalex
Last active June 23, 2017 05:11
Show Gist options
  • Save savelichalex/222ae90125a646f6732bc57948d9e1ef to your computer and use it in GitHub Desktop.
Save savelichalex/222ae90125a646f6732bc57948d9e1ef to your computer and use it in GitHub Desktop.
react native art sector
import {
ART,
Platform,
} from 'react-native';
const {
Surface,
Group,
Shape,
Path,
} = ART;
const circlePath = (cx, cy, r, startDegree, endDegree) => {
let p = Path();
if (Platform.OS === 'ios') {
p.path.push(0, cx + r, cy);
p.path.push(4, cx, cy, r, startDegree * Math.PI / 180, endDegree * Math.PI / 180, 1);
} else {
// For Android we have to resort to drawing low-level Path primitives, as ART does not support
// arbitrary circle segments. It also does not support strokeDash.
// Furthermore, the ART implementation seems to be buggy/different than the iOS one.
// MoveTo is not needed on Android
p.path.push(4, cx, cy, r, startDegree * Math.PI / 180, (startDegree - endDegree) * Math.PI / 180, 0);
}
return p;
};
const Circle = ({ size, width, per }) => {
const path = circlePath(
size / 2, size / 2, size / 2 - width / 2, 0, 360 * per / 100,
);
return (
<Surface
width={size}
height={size}
>
<Group
rotation={-90}
originX={size / 2}
originY={size / 2}
>
<Shape
d={path}
stroke="#A4EEAA"
strokeWidth={width}
/>
</Group>
</Surface>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment