Skip to content

Instantly share code, notes, and snippets.

@hswolff
Created January 14, 2016 15:40
Show Gist options
  • Save hswolff/1869bd0be5a9af931364 to your computer and use it in GitHub Desktop.
Save hswolff/1869bd0be5a9af931364 to your computer and use it in GitHub Desktop.
import React, {
Component,
ART,
} from 'react-native';
const {
Group,
Shape,
Surface,
} = ART;
function toRadians(degrees) {
return degrees / 180 * Math.PI;
}
export default class ARTArcToDemo extends Component {
render() {
const boxSize = 200;
const width = boxSize;
const height = boxSize;
const radius = Math.min(width, height) / 2;
var cx = radius;
var cy = radius;
var innerRadius = radius - 25;
var outerRadius = radius;
var startAngle = -90;
var arcSize = 90;
var segmentPath = new ART.Path();
var start = toRadians(startAngle);
var end = toRadians(startAngle + arcSize);
// Move to left, inner corner of arc.
segmentPath.moveTo(
(cx + innerRadius * Math.cos(start)),
(cy + innerRadius * Math.sin(start))
);
// Move to left, outer corner of arc.
segmentPath.lineTo(
(cx + outerRadius * Math.cos(start)),
(cy + outerRadius * Math.sin(start))
);
// Draw outer rect arc, ending at the right, outer corner.
segmentPath.arcTo(
(cx + outerRadius * Math.cos(end)),
(cy + outerRadius * Math.sin(end)),
outerRadius, outerRadius,
false, false, 0
);
return (
<Surface
width={width}
height={height}>
<Group x={0} y={0} originX={radius} originY={radius} rotation={0}>
<Shape
d={segmentPath}
fill={'#f7f7f7'}
strokeWidth={1}
stroke={'black'}
/>
</Group>
</Surface>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment