Last active
June 23, 2017 05:11
-
-
Save savelichalex/222ae90125a646f6732bc57948d9e1ef to your computer and use it in GitHub Desktop.
react native art sector
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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